我有一个带缩略图的视频播放器。我希望视频播放器开始播放所选视频。但是，除非视频已经在播放，否则它不会起作用。所以我需要先点击播放按钮，然后点击缩略图让它加注星标。如果页面加载并且我点击缩略图，它将无法播放。
这是我的网站：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);
}