Question

我希望有人能帮我解决问题。

我有一个播放视频的网页。在视频下方我有四个按钮当点击更改为另一个视频时。每个视频都有一个带.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>

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

使用onclick jquery

1 个答案: