5.1 audio 与 video 元素详解

5.1 audio 与 video 元素详解

多媒体元素基础架构

1. 核心HTML结构

视频元素基础实现：

<video controls 
       width="640" 
       height="360"
       poster="preview.jpg"
       preload="metadata">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
  您的浏览器不支持HTML5视频
</video>

音频元素基础实现：

<audio controls 
       preload="none"
       loop>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持HTML5音频
</audio>

2. 通用属性对照表

媒体源与格式处理

1. 多源加载策略

响应式源选择：

<video>
  <!-- 优先尝试H.265高效压缩 -->
  <source src="video.hevc.mp4" type="video/mp4; codecs=hevc">
  
  <!-- 标准H.264回退 -->
  <source src="video.h264.mp4" type="video/mp4">
  
  <!-- WebM备选方案 -->
  <source src="video.webm" type="video/webm; codecs=vp9,vorbis">
</video>

格式检测逻辑：

const video = document.createElement('video');
const canPlayHEVC = video.canPlayType('video/mp4; codecs="hevc"');
const canPlayVP9 = video.canPlayType('video/webm; codecs="vp9"');

if(canPlayHEVC) {
  loadHighEfficiencySource();
} else if(canPlayVP9) {
  loadWebMSource();
} else {
  loadStandardSource();
}

2. 自适应码率技术

HLS实现方案：

<video id="hls-video" controls></video>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  if(Hls.isSupported()) {
    const video = document.getElementById('hls-video');
    const hls = new Hls();
    hls.loadSource('https://example.com/video.m3u8');
    hls.attachMedia(video);
  }
</script>

DASH实现方案：

<video id="dash-video" controls></video>

<script src="https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js"></script>
<script>
  const player = dashjs.MediaPlayer().create();
  player.initialize(document.getElementById('dash-video'), 'https://example.com/video.mpd', true);
</script>

媒体控制API

1. 基础控制方法

const media = document.querySelector('video');

// 播放控制
media.play().catch(error => {
  console.error('播放失败:', error);
});

media.pause();

// 进度跳转
media.currentTime = 120; // 跳转到2分钟

// 音量控制
media.volume = 0.5; // 50%音量
media.muted = true; // 静音

// 播放速率
media.playbackRate = 1.5; // 1.5倍速播放

2. 全屏控制

标准全屏API：

function toggleFullscreen(videoElement) {
  if(!document.fullscreenElement) {
    videoElement.requestFullscreen().catch(err => {
      console.error(`全屏错误: ${err.message}`);
    });
  } else {
    document.exitFullscreen();
  }
}

// 兼容不同浏览器前缀
videoElement.requestFullscreen = 
  videoElement.requestFullscreen ||
  videoElement.webkitRequestFullscreen || 
  videoElement.msRequestFullscreen;

3. 画中画模式

const pipButton = document.getElementById('pip-button');

pipButton.addEventListener('click', async () => {
  try {
    if(video !== document.pictureInPictureElement) {
      await video.requestPictureInPicture();
    } else {
      await document.exitPictureInPicture();
    }
  } catch(error) {
    console.error('画中画错误:', error);
  }
});

// 监听画中画状态变化
video.addEventListener('enterpictureinpicture', () => {
  pipButton.textContent = '退出画中画';
});

video.addEventListener('leavepictureinpicture', () => {
  pipButton.textContent = '进入画中画';
});

字幕与轨道管理

1. 字幕轨道实现

WebVTT标准格式：

WEBVTT

00:00:01.000 --> 00:00:04.000
<v 张三>你好，我是张三

00:00:05.000 --> 00:00:08.000
<v 李四>你好张三，我是李四

动态切换字幕：

<video>
  <track default kind="subtitles" srclang="zh" label="中文" src="subs/chinese.vtt">
  <track kind="subtitles" srclang="en" label="English" src="subs/english.vtt">
</video>

<select id="subtitle-select">
  <option value="zh">中文</option>
  <option value="en">English</option>
  <option value="off">关闭字幕</option>
</select>

<script>
  const video = document.querySelector('video');
  const subtitleSelect = document.getElementById('subtitle-select');
  
  subtitleSelect.addEventListener('change', () => {
    const lang = subtitleSelect.value;
    
    // 关闭所有字幕轨道
    Array.from(video.textTracks).forEach(track => {
      track.mode = 'disabled';
    });
    
    if(lang !== 'off') {
      // 启用选中的字幕轨道
      const selectedTrack = Array.from(video.textTracks)
        .find(track => track.language === lang);
      
      if(selectedTrack) selectedTrack.mode = 'showing';
    }
  });
</script>

2. 多音轨控制

// 获取可用音轨
const audioTracks = video.audioTracks;

// 切换音轨
function setAudioTrack(language) {
  for(let i = 0; i < audioTracks.length; i++) {
    audioTracks[i].enabled = (audioTracks[i].language === language);
  }
}

媒体事件体系

1. 关键事件监听

const media = document.querySelector('video');

// 加载过程事件
media.addEventListener('loadedmetadata', () => {
  console.log('媒体元数据加载完成', media.duration);
});

media.addEventListener('canplay', () => {
  console.log('可以开始播放');
});

media.addEventListener('waiting', () => {
  showLoadingSpinner();
});

media.addEventListener('playing', () => {
  hideLoadingSpinner();
});

// 播放进度事件
media.addEventListener('timeupdate', () => {
  updateProgressBar(media.currentTime / media.duration);
});

// 错误处理
media.addEventListener('error', () => {
  const errorCode = media.error;
  showErrorMessage(`媒体错误: ${getErrorText(errorCode)}`);
});

function getErrorText(code) {
  const errors = {
    1: 'MEDIA_ERR_ABORTED - 用户中止',
    2: 'MEDIA_ERR_NETWORK - 网络错误',
    3: 'MEDIA_ERR_DECODE - 解码错误',
    4: 'MEDIA_ERR_SRC_NOT_SUPPORTED - 格式不支持'
  };
  return errors[code] || '未知错误';
}

2. 自定义控制面板

HTML结构：

<div class="custom-player">
  <video src="video.mp4"></video>
  <div class="controls">
    <button class="play-btn">播放/暂停</button>
    <input type="range" class="progress-bar" min="0" max="100" value="0">
    <button class="mute-btn">静音</button>
    <input type="range" class="volume-slider" min="0" max="100" value="100">
    <button class="fullscreen-btn">全屏</button>
  </div>
</div>

JavaScript控制：

const video = document.querySelector('.custom-player video');
const playBtn = document.querySelector('.play-btn');
const progressBar = document.querySelector('.progress-bar');
const muteBtn = document.querySelector('.mute-btn');
const volumeSlider = document.querySelector('.volume-slider');

// 播放/暂停切换
playBtn.addEventListener('click', () => {
  if(video.paused) {
    video.play().catch(e => console.error(e));
    playBtn.textContent = '暂停';
  } else {
    video.pause();
    playBtn.textContent = '播放';
  }
});

// 进度条控制
video.addEventListener('timeupdate', () => {
  progressBar.value = (video.currentTime / video.duration) * 100;
});

progressBar.addEventListener('input', () => {
  video.currentTime = (progressBar.value / 100) * video.duration;
});

// 音量控制
volumeSlider.addEventListener('input', () => {
  video.volume = volumeSlider.value / 100;
  muteBtn.textContent = video.volume === 0 ? '取消静音' : '静音';
});

muteBtn.addEventListener('click', () => {
  video.muted = !video.muted;
  muteBtn.textContent = video.muted ? '取消静音' : '静音';
  volumeSlider.value = video.muted ? 0 : video.volume * 100;
});

性能优化策略

1. 懒加载技术

<video controls preload="none" poster="preview.jpg">
  <source data-src="video.mp4" type="video/mp4">
</video>

<script>
  const video = document.querySelector('video');
  const observer = new IntersectionObserver((entries) => {
    if(entries[0].isIntersecting) {
      const source = video.querySelector('source');
      source.src = source.dataset.src;
      video.load();
      observer.unobserve(video);
    }
  });
  
  observer.observe(video);
</script>

2. 自适应清晰度

function checkNetworkAndAdjustQuality() {
  const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
  
  if(connection) {
    const effectiveType = connection.effectiveType; // '4g', '3g'等
    
    switch(effectiveType) {
      case '4g':
        selectHighQualitySource();
        break;
      case '3g':
        selectMediumQualitySource();
        break;
      default:
        selectLowQualitySource();
    }
    
    connection.addEventListener('change', checkNetworkAndAdjustQuality);
  }
}

安全与权限控制

1. 自动播放策略处理

video.play().catch(error => {
  if(error.name === 'NotAllowedError') {
    // 显示播放按钮让用户手动触发
    showPlayButton();
    
    // 用户手势后重试
    document.addEventListener('click', () => {
      video.play().catch(e => console.error(e));
    }, { once: true });
  }
});

2. 加密媒体扩展(EME)

const video = document.querySelector('video');
const config = [{
  initDataTypes: ['cenc'],
  videoCapabilities: [{
    contentType: 'video/mp4;codecs="avc1.42E01E"'
  }]
}];

navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
  .then(access => {
    return access.createMediaKeys();
  })
  .then(mediaKeys => {
    video.setMediaKeys(mediaKeys);
    video.src = 'https://example.com/encrypted-video.mpd';
  });

通过深入理解这些多媒体元素的技术细节，开发者可以创建功能丰富、性能优异且兼容性良好的音视频播放体验，满足从简单的背景音乐到复杂的交互式视频等各种应用场景的需求。