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

我正在将多个HTML5视频添加到一个网页上。我正在复制的代码来自此推荐的可访问方法。视频播放效果很好，音频字幕也很好，但当我在同一页面添加新视频时，第二个视频根本不会播放音频字幕。有人对我如何解决这个问题有什么建议吗？我是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'）；
//如果支持介质控制器，
//为视频和音频创建控制器实例
if（typeof（window.MediaController）=“函数”）
{
var controller=new MediaController（）；
audio.controller=控制器；
video.controller=控制器；
}   
//否则，请创建空控制器引用以进行比较
其他的
{
控制器=空；
}
//稍微降低视频音量以突出音频
audio.volume=1；
视频音量=0.8；
//当视频播放时
video.addEventListener（'play'，function（）
{
//如果我们有音频但没有控制器
//如果音频暂停，也可以播放
如果（！controller&&audio.paused）
{
音频播放（）；
}
}，假）；
//当视频暂停时
video.addEventListener（'pause'，function（）
{
//如果我们有音频但没有控制器
//音频没有暂停，也暂停一下
如果（！controller&&！audio.paused）
{
audio.pause（）；
}
}，假）；
//视频结束时
video.addEventListener（'end'，function（）
{
//如果我们有控制器，暂停
if（控制器）
{
controller.pause（）；
}
//否则，分别暂停视频和音频
其他的
{
video.pause（）；
audio.pause（）；
}
}，假）；
//当视频时间更新时
video.addEventListener（'timeupdate'，function（）
{
//如果我们有音频但没有控制器，
//并且音频已经足够加载
如果（！controller&&audio.readyState>=4）
{
//如果音频和视频时间不同，
//更新音频时间以保持同步
if（Math.ceil（audio.currentTime）！=Math.ceil（video.currentTime））
{
audio.currentTime=video.currentTime；
}
}
}，假）；
})();

因此，您的问题首先在于如何抓取元素

var video=document.getElementById（'video'）；
var audio=document.getElementById（'audio'）；

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

ID必须是唯一的，所以您要做的是改用类

看，我把ID改成了类

现在，我们的代码中可以使用类为“video”的任何元素

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

请注意，以下内容旨在让您了解如何循环项目等。您需要重新编写代码，将每个步骤移动到函数等中。因为您的原始代码不适用于多个项目

（功能（）
{
//获取每个视频和音频元素的引用
var videos=document.querySelectorAll（'.video'）；
var audios=document.querySelectorAll（'.audio'）；
//循环浏览所有视频，添加逻辑等。
对于（x=0；x

快速提示：

我将用类（例如

class=“video audio wrapper”

）包装

和

中相关的

元素

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

var videoContainers=document.querySelectorAll（'.video-audio-wrapper'）

然后循环检查它们是否有视频和/或音频元素

（x=0；x{
var thisVideoContainer=videoContainers[x]；
//仅查询此容器-我们可以使用'querySelector'，因为每个容器应该只有一个视频，并返回单个项目/它找到的第一个项目。
var video=thisVideoContainer.querySelector（'video'）；
var audio=thisVideoContainer.querySelector（'audio'）；
//现在我们可以检查元素是否存在
如果（video.length==1）{
//应用视频逻辑
}
如果（audio.length==1）{
//应用音频逻辑
}
//或者，如果必须同时拥有这两个，我们可以检查它们是否存在
if（video.length！=1 | | audio.length！=1）{
//我们要么缺一个，要么两个都缺。
//在缺少视频/音频元素时应用任何逻辑
//使用“return”可以提前退出函数，这意味着在此点之后的所有代码都不会运行。
返回false；
}
///这种方法的美妙之处在于，您可以只使用原始代码！
}

---

通过这种方式，您可以回收大部分代码。

感谢您的建议，将ID更改为类，并将视频包装添加到视频容器中。将每个视频分组在一个页面上，这一切都是有意义的。我更新了下面的代码，但是音频字幕根本不会播放。录像带

<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>

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);
    }
}