Question

我有一个带缩略图的视频播放器。我希望视频播放器开始播放所选的视频。但是，除非视频已播放，否则无法使用。所以我需要先点击播放按钮，然后点击缩略图才能显示。如果页面加载并且我点击缩略图，它将无法播放。

这是我的网站：http://www3.carleton.ca/clubs/sissa/html5/video.html

HTML：

<div id="playlist" class="animated fadeInRight">
    <div class="thumb" id="tb1"><img src="images/thumbnails/TbGow.jpg" onClick="changeTrailer('media/vGow')"/></div>
    <div class="thumb" id="tb2"><img src="images/thumbnails/TbLast.jpg" onClick="changeTrailer('media/vLast')"/></div>
    <div class="thumb" id="tb3"><img src="images/thumbnails/TbTwo.jpg" onClick="changeTrailer('media/vTwo')"/></div>
</div>

JS：

function changeTrailer(source){ 
    playlist = document.getElementById('playlist');
    var source1 = media.children[0]; 
    var source2 = media.children[1]; 
    source1.src = source+'.mp4'; 
    source2.src = source+'.webm'; 

    media.load(); 
    //Reseting control bar elements 
    window.clearInterval(updateBar);
    media.play(); //call play function so it resets timer
    dimScreen();
    playButton.firstChild.src = "images/icons/pause.png";
    updateBar=setInterval(update, 100);
    playlist.style.opacity = '0';
}
function playPause(){
    if (!media.paused) { // if currently playing (or ended?)
        if (media.ended) { // if at the end
            media.currentTime = 0; // go to start 
            lightScreen();
        } else { // else
            media.pause(); // pause
            playButton.firstChild.src = "images/icons/play.png";
            window.clearInterval(updateBar);
            lightScreen();
            return; // and end function here
        }
    } // then if function didn't end
    media.play(); // resume playing
    dimScreen();
    playButton.firstChild.src = "images/icons/pause.png";
    updateBar=setInterval(update, 100);
}

Answer 1

尝试将window.clearIntreval(updateBar)更改为if ( typeof updateBar !== 'undefined' && updateBar ) window.clearInterval(updateBar);。

除非已播放，否则视频播放器不会播放src更改

1 个答案: