多个 HTML5 视频音频字幕无法正常工作

如何解决多个 HTML5 视频音频字幕无法正常工作

我将多个 HTML5 视频添加到网页上。我正在复制的代码来自这个推荐的可访问方法。 http://jspro.brothercake.com/audio-descriptions/ 视频播放正常，音频字幕工作正常，但是当我将新视频添加到同一页面时，第二个视频根本不播放音频字幕。有没有人对我如何解决这个问题有任何建议？我是 JS 的初学者，但我了解如何编写 HTML 和 CSS。我很感激我能得到的任何帮助。

<video id="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 id="audio" preload="auto">
    <source src="./media/HorribleHistories.mp3" type="audio/mp3" />
    <source src="./media/HorribleHistories.ogg" type="audio/ogg" />
</audio>


<script type="text/javascript">
(function()
{

    //get references to the video and audio elements
    var video = document.getElementById('video');
    var audio = document.getElementById('audio');


    //if media controllers are supported,//create a controller instance for the video and audio
    if(typeof(window.MediaController) === 'function')
    {
        var controller = new MediaController();
        audio.controller = controller;
        video.controller = controller;
    }   
    
    //else create a null controller reference for comparison
    else
    {
        controller = null;
    }
    
    //reduce the video volume slightly to emphasise the audio
    audio.volume = 1;
    video.volume = 0.8;


    //when the video plays
    video.addEventListener('play',function() 
    {
        //if we have audio but no controller 
        //and the audio is paused,play that too
        if(!controller && audio.paused)
        {
            audio.play();
        }
    },false);
    
    //when the video pauses
    video.addEventListener('pause',function()
    {
        //if we have audio but no controller 
        //and the audio isn't paused,pause that too
        if(!controller && !audio.paused)
        {
            audio.pause();
        }
    },false);

    //when the video ends
    video.addEventListener('ended',function()
    {
        //if we have a controller,pause that
        if(controller)
        {
            controller.pause();
        }
        //otherwise pause the video and audio separately
        else
        {
            video.pause();
            audio.pause();
        }
    },false);
    
    
    //when the video time is updated
    video.addEventListener('timeupdate',function()
    {
        //if we have audio but no controller,//and the audio has sufficiently loaded
        if(!controller && audio.readyState >= 4)
        {
            //if the audio and video times are different,//update the audio time to keep it in sync
            if(Math.ceil(audio.currentTime) != Math.ceil(video.currentTime))
            {
                audio.currentTime = video.currentTime;
            }
        }
    },false);
    


})();
</script>

解决方法

所以你的问题首先在于你如何抓取元素。

var video = document.getElementById('video');
var audio = document.getElementById('audio');

您正在做的是抓取页面上 ID 为“video”（与“audio”相同）的单个项目。

ID 必须是唯一的，因此您要做的是改用类。

<video class="video" preload="auto" controls="controls" 
    width="640" height="360" poster="./media/HorribleHistories.jpg">

看到我把 ID 改成了一个类。

现在任何具有“video”类的元素都可以在我们的代码中使用。

但是我们确实需要稍微修改我们的代码，因为现在我们有多个项目要绑定。

请注意以下内容是为了让您了解如何循环项目等。您需要重写代码以将每个步骤移动到函数等中。因为您的原始代码不是为使用而设计的多个项目

(function()
{

    //get references to every single video and audio element
    var videos = document.querySelectorAll('.video');
    var audios = document.querySelectorAll('.audio');

    // loop through all videos adding logic etc.
    for(x = 0; x < videos.length; x++){
        // grab a single video from our list to make our code neater
        var video = videos[x];

    if(typeof(window.MediaController) === 'function')
    {
        var controller = new MediaController();
        video.controller = controller;
    } else {
        controller = null;
    }

    video.volume = 0.8;
    //...etc.
    
    

    }

    
})();

快速提示：

我会将 <video> 和 <audio> 元素与类（例如 <div>）包装在 class="video-audio-wrapper" 中。

通过这种方式，您可以将 CSS 选择器更改为：

var videoContainers = document.querySelectorAll('.video-audio-wrapper');

然后遍历它们并检查它们是否有视频和/或音频元素

for(x = 0; x < videoContainers.length; x++){
   var thisVideoContainer = videoContainers[x];

   //query this container only - we can use `querySelector` as there should only be one video per container and that returns a single item / the first item it finds.
   var video = thisVideoContainer.querySelector('video');
   var audio = thisVideoContainer.querySelector('audio');

   //now we can check if an element exists
   if(video.length == 1){
      //apply video logic
   }
   if(audio.length == 1){
      //apply audio logic
   }

   // alternatively we can check both exist if we have to have both
   if(video.length != 1 || audio.length != 1){
      // we either have one or both missing. 
      
      // apply any logic for when a video / audio element is missing

      //using "return" we can exit the function early,meaning all code after this point is not run.
      return false;
      
   }
 

   ///The beauty of this approach is you could then just use your original code!

}

这样做可以回收大部分代码。

,

感谢您建议将 ID 更改为类并将视频包装器 <div> 添加到视频容器。将每个视频分组在 1 页上都是有意义的。我更新了以下代码，但音频字幕根本无法播放。视频播放和暂停正常，音量正常。我也没有在浏览器控制台中收到任何语法错误。这是我为我的 HTML 和 JS 得到的。感谢您的帮助/反馈。

<div class="video-container-wrapper">
   <div class="video-container">
      <video class="video" preload="auto" controls="controls" width="640" height="360" poster="img/red-zone-thumb.png">
        <source src="https://player.vimeo.com/external/395077086.hd.mp4?s=1514637c1ac308a950fafc00ad46c0a113c6e8be&profile_id=175" type="video/mp4">
        <track kind="captions" label="English captions" src="captions/redzone-script.vtt" srclang="en" default="">
      </video>
      <audio class="audio" preload="auto">
        <source src="captions/redzone-message.mp3" type="audio/mp3">
      </audio>
   </div>
</div>

Javascript：

var videoContainers = document.querySelectorAll('.video-container-wrapper');

for (x = 0; x < videoContainers.length; x++) {
    var thisVideoContainer = videoContainers[x];

    //query this container only - we can use `querySelector` as there should only be one video per container and that returns a single item / the first item it finds.
    var video = thisVideoContainer.querySelector('video');
    var audio = thisVideoContainer.querySelector('audio');

    //now we can check if an element exists
    if (video.length == 1) {
        //apply video logic

        //reduce the video volume slightly to emphasise the audio
        video.volume = 0.8;

        //when the video ends
        video.addEventListener('ended',function () {
            video.pause();
        },false);
    }

    if (audio.length == 1) {
        //apply audio logic
        audio.volume = 1;
        //when the video plays
        video.addEventListener('play',function () {
            if (audio.paused) {
                audio.play();
            }
        },false);
        // when the video ends
        video.addEventListener('ended',function () {
            audio.pause();
        },false);
        //when the video time is updated
        video.addEventListener('timeupdate',function () {
            if (audio.readyState >= 4) {
                //if the audio and video times are different,//update the audio time to keep it in sync
                if (Math.ceil(audio.currentTime) != Math.ceil(video.currentTime)) {
                    audio.currentTime = video.currentTime;
                }
            }
        },false);
    }
}