5.3 多媒体 API 与 JavaScript 控制

5.3 多媒体 API 与 JavaScript 控制

核心API架构

1. HTMLMediaElement基础

HTML5通过扩展HTMLMediaElement接口为<audio>和<video>元素提供完整的编程控制能力，该接口包含以下核心属性和方法：

关键属性：

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

// 播放状态
media.paused;      // 是否暂停
media.ended;       // 是否结束
media.seeking;     // 是否正在跳转

// 时间控制
media.currentTime; // 当前播放位置(秒)
media.duration;    // 媒体总长度
media.playbackRate; // 播放速度(1.0正常)

// 音量控制
media.volume;      // 0.0到1.0
media.muted;       // 是否静音

// 媒体信息
media.readyState;  // 就绪状态(0-4)
media.buffered;    // 已缓冲时间范围
media.videoWidth;  // 视频原始宽度
media.videoHeight; // 视频原始高度

控制方法：

// 播放控制
media.play();      // 返回Promise
media.pause();

// 加载控制
media.load();      // 重新加载
media.canPlayType('video/mp4'); // 检测支持类型

高级播放控制

1. 精准时间点操作

片段循环播放：

function loopSegment(start, end) {
  media.currentTime = start;
  
  media.ontimeupdate = () => {
    if(media.currentTime >= end) {
      media.currentTime = start;
    }
  };
  
  media.play();
}

// 示例：循环播放10-20秒
loopSegment(10, 20);

章节跳转系统：

const chapters = [
  { start: 0, title: "开场" },
  { start: 120, title: "第一幕" },
  { start: 300, title: "第二幕" }
];

function createChapterMenu() {
  const menu = document.getElementById('chapter-menu');
  chapters.forEach(chapter => {
    const button = document.createElement('button');
    button.textContent = chapter.title;
    button.onclick = () => {
      media.currentTime = chapter.start;
    };
    menu.appendChild(button);
  });
}

2. 播放速度动态调整

速度阶梯控制：

const speedSteps = [0.5, 1.0, 1.5, 2.0];
let currentSpeedIndex = 1;

function changeSpeed() {
  currentSpeedIndex = (currentSpeedIndex + 1) % speedSteps.length;
  media.playbackRate = speedSteps[currentSpeedIndex];
  updateSpeedIndicator();
}

// 保持音调不变（需要浏览器支持）
if('preservesPitch' in media) {
  media.preservesPitch = false;
}

媒体状态监控

1. 缓冲与网络状态

缓冲进度可视化：

function updateBufferDisplay() {
  const buffered = media.buffered;
  const duration = media.duration;
  
  for(let i = 0; i < buffered.length; i++) {
    const start = buffered.start(i);
    const end = buffered.end(i);
    const width = ((end - start) / duration) * 100;
    
    const bufferBar = document.createElement('div');
    bufferBar.style.width = `${width}%`;
    document.getElementById('buffer-display').appendChild(bufferBar);
  }
}

media.addEventListener('progress', updateBufferDisplay);

网络状态响应：

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

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

media.addEventListener('stalled', () => {
  showNetworkWarning();
});

高级交互功能

1. 媒体片段裁剪

实现剪辑功能：

let clipStart = 0;
let clipEnd = 0;

function setClipStart() {
  clipStart = media.currentTime;
}

function setClipEnd() {
  clipEnd = media.currentTime;
}

function playClip() {
  media.currentTime = clipStart;
  
  const checkTime = () => {
    if(media.currentTime >= clipEnd) {
      media.pause();
      media.removeEventListener('timeupdate', checkTime);
    }
  };
  
  media.addEventListener('timeupdate', checkTime);
  media.play();
}

2. 实时特效处理

通过Canvas处理视频帧：

<video id="source-video" src="video.mp4" hidden></video>
<canvas id="video-canvas"></canvas>

<script>
  const video = document.getElementById('source-video');
  const canvas = document.getElementById('video-canvas');
  const ctx = canvas.getContext('2d');
  
  video.addEventListener('play', () => {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    
    function processFrame() {
      if(video.paused || video.ended) return;
      
      // 绘制原始帧
      ctx.drawImage(video, 0, 0);
      
      // 应用灰度滤镜
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const data = imageData.data;
      
      for(let i = 0; i < data.length; i += 4) {
        const avg = (data[i] + data[i+1] + data[i+2]) / 3;
        data[i] = avg;     // R
        data[i+1] = avg;   // G
        data[i+2] = avg;   // B
      }
      
      ctx.putImageData(imageData, 0, 0);
      requestAnimationFrame(processFrame);
    }
    
    processFrame();
  });
</script>

媒体源扩展(Media Source Extensions)

1. 动态媒体流加载

基础实现：

const video = document.getElementById('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
  
  // 分片加载视频数据
  fetch('video_segment1.mp4')
    .then(response => response.arrayBuffer())
    .then(data => {
      sourceBuffer.addEventListener('updateend', () => {
        if(!sourceBuffer.updating && mediaSource.readyState === 'open') {
          mediaSource.endOfStream();
        }
      });
      
      sourceBuffer.appendBuffer(data);
    });
});

2. 自适应码率切换

const mimeCodec = 'video/mp4; codecs="avc1.42E01E"';
const mediaSource = new MediaSource();
const video = document.getElementById('video');
let sourceBuffer;

// 不同质量视频片段
const qualityLevels = {
  low: 'video_low.mp4',
  medium: 'video_medium.mp4',
  high: 'video_high.mp4'
};

function selectQuality() {
  const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
  return connection && connection.effectiveType === '4g' ? 'high' : 'medium';
}

mediaSource.addEventListener('sourceopen', () => {
  sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  loadSegment(selectQuality());
});

function loadSegment(quality) {
  if(sourceBuffer.updating) return;
  
  fetch(qualityLevels[quality])
    .then(response => response.arrayBuffer())
    .then(data => {
      sourceBuffer.appendBuffer(data);
    });
}

// 网络变化时切换质量
navigator.connection?.addEventListener('change', () => {
  if(!sourceBuffer.updating) {
    sourceBuffer.abort();
    loadSegment(selectQuality());
  }
});

全屏与画中画控制

1. 全屏API深度集成

跨浏览器全屏控制：

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

// 检测全屏状态变化
document.addEventListener('fullscreenchange', () => {
  const isFullscreen = !!document.fullscreenElement;
  document.getElementById('fullscreen-btn').textContent = 
    isFullscreen ? '退出全屏' : '全屏';
});

2. 画中画模式增强

自定义画中画控件：

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

async function togglePip() {
  try {
    if(document.pictureInPictureElement) {
      await document.exitPictureInPicture();
    } else {
      await video.requestPictureInPicture();
    }
  } catch(error) {
    console.error('画中画错误:', error);
  }
}

pipButton.addEventListener('click', togglePip);

// 画中画状态同步
video.addEventListener('enterpictureinpicture', () => {
  pipButton.textContent = '退出画中画';
  createPipControls();
});

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

function createPipControls() {
  const pipWindow = document.querySelector('.pip-window');
  pipWindow.innerHTML = `
    <button onclick="video.pause()">暂停</button>
    <button onclick="video.play()">播放</button>
  `;
}

性能优化策略

1. 预加载与缓存

媒体缓存API：

if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js').then(() => {
    caches.open('media-cache').then(cache => {
      cache.addAll([
        'video_intro.mp4',
        'audio_background.mp3'
      ]);
    });
  });
}

资源预加载提示：

<!-- 预加载关键媒体 -->
<link rel="preload" href="video_intro.mp4" as="video" type="video/mp4">

<!-- 预加载元数据 -->
<link rel="prefetch" href="video_metadata.json" as="fetch">

2. 内存管理

释放媒体资源：

function cleanupMedia() {
  video.pause();
  video.src = '';
  video.load();
  
  if(mediaSource && mediaSource.readyState === 'open') {
    mediaSource.endOfStream();
  }
  
  URL.revokeObjectURL(video.src);
}

window.addEventListener('beforeunload', cleanupMedia);

调试与错误处理

1. 媒体错误捕获

综合错误处理：

video.addEventListener('error', () => {
  const error = video.error;
  const message = {
    1: '媒体加载中止',
    2: '网络错误',
    3: '解码错误',
    4: '格式不支持'
  }[error.code] || `未知错误: ${error.message}`;
  
  showErrorDialog(message);
  
  // 尝试回退源
  if(error.code === 4) {
    fallbackToAlternativeSource();
  }
});

function fallbackToAlternativeSource() {
  const sources = Array.from(video.querySelectorAll('source'));
  const failedIndex = sources.findIndex(s => s.src === video.currentSrc);
  
  if(failedIndex < sources.length - 1) {
    video.src = sources[failedIndex + 1].src;
    video.load();
  }
}

2. 性能监控

播放质量指标：

const perfMetrics = {
  playStartTime: 0,
  bufferingDuration: 0,
  lastBufferingStart: 0
};

video.addEventListener('waiting', () => {
  perfMetrics.lastBufferingStart = performance.now();
});

video.addEventListener('playing', () => {
  if(perfMetrics.lastBufferingStart > 0) {
    perfMetrics.bufferingDuration += performance.now() - perfMetrics.lastBufferingStart;
    perfMetrics.lastBufferingStart = 0;
  }
  
  if(perfMetrics.playStartTime === 0) {
    perfMetrics.playStartTime = performance.now();
  }
});

function getPlaybackMetrics() {
  return {
    startupTime: perfMetrics.playStartTime > 0 ? 
      perfMetrics.playStartTime - performance.timing.navigationStart : null,
    bufferingRatio: perfMetrics.bufferingDuration / video.currentTime,
    fps: calculateCurrentFPS()
  };
}

通过掌握这些多媒体API和JavaScript控制技术，开发者可以创建高度定制化的媒体播放体验，实现从基础的播放控制到复杂的流媒体处理等各种高级功能，同时确保应用的性能和可靠性。