Question

我使用以下代码打开3个视频。我有3个缩略图，一旦我点击其中一个，分配给该缩略图的视频就应该开始了。在第一次加载时，如果我点击第一个缩略图将正常启动视频。之后，如果我点击第二个缩略图将启动相同的视频。刷新页面后，我点击第二个缩略图，第二个视频开始。但如果我尝试打开第一个视频，它会播放第二个视频。知道如何更新吗？

function playVideo(){
    if(!vidInitialized){
        vidInitialized = true;
        $('#video').append( "<source type='video/mp4'></source>" );
        initVideo('pause');
    }else{
        video.currentTime=0;
    }
    audioOn();
    video.play();
    video.addEventListener("ended", videoEnd);
}

function videoEnd() {
    $('source').attr("src", "");
    controlls.vidPause();
}

function addEventListeners() {
    $("#video1").click(function() {playVideo(); $('source').attr("src", "video/video1.mp4")});
    $("#video2").click(function() {playVideo(); $('source').attr("src", "video/video2.mp4")});
    $("#video3").click(function() {playVideo(); $('source').attr("src", "video/video3.mp4")});      
}

HTML

<div id="thumbs">
    <img id="video1" src="images/video1.jpg">
    <img id="video2" src="images/video2.jpg">
    <img id="video3" src="images/video3.jpg">
 </div>
<div id="overlay"></div>
<div id="videoContainer" class="videoContainer">         
    <video id="video">
        <!-- video file from JS -->
    </video>
    <div id="close">x</div>
</div>

如何在JQuery中更新视频源？

0 个答案: