除非已經播放，否則視頻播放器不會播放src變化

我有一個帶有縮略圖的視頻播放器。我希望視頻播放器開始播放選定的視頻。但是，除非視頻已經播放，否則它將無法工作。所以我需要先點擊播放按鈕，然後點擊縮略圖進行演示。如果頁面加載並且我點擊了縮略圖，它將不會播放。除非已經播放，否則視頻播放器不會播放src變化

這是我的網站：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); 
}

來源

2013-02-16 Batman

在控制檯中，當單擊縮略圖時，我得到'ReferenceError：updateBar未定義' – kjetilh 2013-02-16 22:55:49

updateBar使用的唯一的其他時間是在plauPause（）中，它是一個全局變量。我嘗試將media.play（）更改爲media.playPause（），並從changeTrailer（）中刪除updateBar行，但這並不起作用。 – Batman 2013-02-16 23:06:28

也許它與window.clearIntreval（updateBar）被稱爲太早的事實有關。 – Batman 2013-02-16 23:07:57

試圖改變window.clearIntreval(updateBar)成if (typeof updateBar !== 'undefined' && updateBar) window.clearInterval(updateBar);。

來源

2013-02-16 23:22:04 kjetilh

除非已經播放，否則視頻播放器不會播放src變化

回答

相關問題