使用onclick jquery加载两次视频字幕答案

【问题标题】：video subtitles loading twice with onclick jquery使用onclick jquery加载两次视频字幕
【发布时间】：2017-09-27 13:47:31
【问题描述】：

我希望有人能给我解决我的问题。

我有一个播放视频的网页。在视频下方我有四个按钮当单击更改为另一个视频时。每个视频都有带有 .vtt 文件的字幕。

现在我遇到的问题是每次单击另一个按钮播放不同的视频时，以前视频的字幕加载到当前视频，当单击返回第一个视频时，字幕开始加载到每个视频的顶部其他并堆叠归档屏幕。因此，当单击按钮查看其他视频时，其他视频的所有字幕都堆叠在一起。请帮忙:)

这是html代码

    <video id="videoclip" class=" embed-responsive-item animated bounceIn" 
    width="760" height="415" controls>
    <source id="mp4video" src="../vid/video1.mp4">
    <track id="subtitle" src="../vid/subtitles/video1sub.vtt" kind="subtitles" srclang="en" 
    label="English">
    </video>

还有 javascrip/jquery

     $(document).ready(function(){
            //HTML5 video object
            var detailedVidObj = "#videoclip";


            //Reload the video object and automatically play it
            function videoReloader(){
                $(detailedVidObj)[0].load();
                $(detailedVidObj)[0].play();

            }

            $("#video1").click(function(){
                $("#mp4video").attr("src", "../vid/video1.mp4");
                $("#subtitle").attr("src", "../vid/subtitles/video1sub.vtt");
                videoReloader();
            });
            $("#video2").click(function(){
                $("#mp4video").attr("src", "../vid/video2.mp4");
                $("#subtitle").attr("src", "../vid/subtitles/video2sub.vtt");
                videoReloader();
            });
            $("#video3").click(function(){
                $("#mp4video").attr("src", "../vid/video3.mp4");
                $("#subtitle").attr("src", "../vid/subtitles/video3sub.vtt");
                videoReloader();
            });
            $("#video4").click(function(){
                $("#mp4video").attr("src", "../vid/video4.mp4");
                $("#subtitle").attr("src", "../vid/subtitles/video4sub.vtt");
                videoReloader();
            });
        });

这是按钮的html

<button class="button btn btn-primary" id="video1">video One</button>
    <button class="button btn btn-primary" id="video2">Video Two</button>
    <button class="button btn btn-primary" id="video3">Video Three</button>
    <button class="button btn btn-primary" id="video4">Video Four</button>

【问题讨论】：

标签： javascript jquery html html5-video

【解决方案1】：

我的猜测是，当您加载新的字幕文件时，旧的不会被替换并继续播放。在这种情况下，删除初始字幕元素并使用新字幕文件创建一个新元素应该可以：

 $("#video1").click(function(){
            $("#mp4video").attr("src", "../vid/video1.mp4");
            $("#subtitle").remove();
            $("#videoclip").append("<track id='subtitle' src='../vid/subtitles/video1sub.vtt' kind='subtitles' srclang='en' 
             label='English'>");
            videoReloader();
        });
 $("#video2").click(function(){
            $("#mp4video").attr("src", "../vid/video2.mp4");
            $("#subtitle").remove();
            $("#videoclip").append("<track id='subtitle' src='../vid/subtitles/video2sub.vtt' kind='subtitles' srclang='en' 
             label='English'>");
            videoReloader();
        });
 $("#video3").click(function(){
            $("#mp4video").attr("src", "../vid/video3.mp4");
            $("#subtitle").remove();
            $("#videoclip").append("<track id='subtitle' src='../vid/subtitles/video3sub.vtt' kind='subtitles' srclang='en' 
             label='English'>");
            videoReloader();
        });
 $("#video4").click(function(){
            $("#mp4video").attr("src", "../vid/video4.mp4");
            $("#subtitle").remove();
            $("#videoclip").append("<track id='subtitle' src='../vid/subtitles/video4sub.vtt' kind='subtitles' srclang='en' 
             label='English'>");
            videoReloader();
        });

【讨论】：