多个HTML5视频的音频描述无法正常工作的问题咨询

核心问题原因 #

• 根本诱因：原代码依赖id="video"、id="audio"这类全局唯一的id选择器获取媒体元素，同一页面直接复制复用代码时，重复的id会导致getElementById只会匹配页面中第一个出现的对应元素，第二个视频完全不会被JS的同步逻辑绑定
• 原JS逻辑是针对单组媒体元素写的硬编码，没有做组件化隔离，多组媒体共存时会出现逻辑串扰

具体修复步骤 #

1. 调整HTML结构，移除重复id #

将每一组视频和对应的描述音频放在同一个容器内，彻底消除重复id问题：

<!-- 第一组视频+描述音频 -->
<div class="video-desc-group">
  <video preload="auto" controls="controls" 
      width="640" height="360" poster="./media/HorribleHistories.jpg">
      <source src="./media/HorribleHistories.mp4" type="video/mp4" />
      <source src="./media/HorribleHistories.webm" type="video/webm" />
  </video>

  <audio preload="auto">
      <source src="./media/HorribleHistories.mp3" type="audio/mp3" />
      <source src="./media/HorribleHistories.ogg" type="audio/ogg" />
  </audio>
</div>

<!-- 第二组视频+描述音频 -->
<div class="video-desc-group">
  <video preload="auto" controls="controls" 
      width="640" height="360" poster="./media/SecondVideo.jpg">
      <source src="./media/SecondVideo.mp4" type="video/mp4" />
      <source src="./media/SecondVideo.webm" type="video/webm" />
  </video>

  <audio preload="auto">
      <source src="./media/SecondVideo.mp3" type="audio/mp3" />
      <source src="./media/SecondVideo.ogg" type="audio/ogg" />
  </audio>
</div>

2. 重构JS逻辑，逐组绑定同步规则 #

把原来针对单个元素的硬编码逻辑，改成遍历所有媒体组、在组域内查找对应元素的通用逻辑，保证每一组的音视频同步是独立运行的，不会互相干扰：

(function () {
    // 遍历页面上所有的视频描述组容器
    const mediaGroups = document.querySelectorAll('.video-desc-group');
    
    mediaGroups.forEach(groupEl => {
        // 只在当前组的DOM范围内查找对应的视频、音频元素
        const video = groupEl.querySelector('video');
        const audio = groupEl.querySelector('audio');
        let controller = null;

        // 兼容MediaController特性，为每一组创建独立的控制器实例
        if (typeof(window.MediaController) === 'function') {
            controller = new MediaController();
            audio.controller = controller;
            video.controller = controller;
        }

        // 为当前组配置独立的音量参数
        audio.volume = 1;
        video.volume = 0.8;

        // 为当前组绑定所有同步事件
        video.addEventListener('play', function() {
            if(!controller && audio.paused) {
                audio.play();
            }
        }, false);

        video.addEventListener('pause', function() {
            if(!controller && !audio.paused) {
                audio.pause();
            }
        }, false);

        video.addEventListener('ended', function() {
            if(controller) {
                controller.pause();
            } else {
                video.pause();
                audio.pause();
            }
        }, false);

        video.addEventListener('timeupdate', function() {
            if(!controller && audio.readyState >= 4) {
                // 跨秒级偏差时自动同步进度，避免长时间播放后音画错位
                if(Math.ceil(audio.currentTime) != Math.ceil(video.currentTime)) {
                    audio.currentTime = video.currentTime;
                }
            }
        }, false);
    })
})();

注意事项 #

• 严格遵循HTML规范，同一页面内不要出现重复的id值，这类问题不仅会导致JS选择错误，还会触发W3C校验报错
• 每一组的MediaController是独立实例，不会出现跨组操控音视频播放状态的问题
• 同步逻辑全部限定在当前组的DOM范围内，新增第三、第四个视频时只需要复制对应的HTML组结构即可自动适配，不需要额外改JS代码

内容的提问来源于stack exchange，提问作者Oswaldo Mendoza