Question

在我的网站上，我有一个简短的视频，我在没有控件的情况下，在左上角的一个循环中播放，有点像Red Dwarf的Holly。我想点击一个按钮并用另一个视频替换视频，然后当视频播放时我想回到第一个视频。可以点击5个按钮，播放5个视频，一次一个。

我不是那么精明地使用JavaScript来做这个，我很感激有关如何使用HTML5视频做任何帮助。

感谢。

Answer 1

要在按下按钮时更改视频，您可以使用javascript功能将当前视频替换为您想要播放的视频。

如果您知道要播放的视频的长度，则可以使用Javascript计时器在完成后替换新的视频。

页码：

<div id="vid">
    <iframe width="236" height="105" src="//www.youtube.com/embed/AGg3u03JPfk?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

<h1>Change Video</h1>
<button onclick="PlayVid()">Change Video</button>

使用Javascript：

resetVid = function() {
    //get the Video div and replace with the original video source code
    var videoPanel = document.getElementById('vid');
    videoPanel.innerHTML = '<iframe width="236" height="105" src="//www.youtube.com/embed/AGg3u03JPfk?autoplay=1" frameborder="0" allowfullscreen></iframe>';    
}

PlayVid = function() {
    //get the Video div and play new video on button click
    var videoPanel = document.getElementById('vid');
    videoPanel.innerHTML = '<iframe width="280" height="157" src="//www.youtube.com/embed/ldT8qxWh07Y?autoplay=1&start=17" frameborder="0" allowfullscreen></iframe>';

    //replace video after 8.5 seconds
    setTimeout(resetVid, 8500);
}

如果您的视频需要时间缓冲/加载，这可能会导致时间问题，在这种情况下，新视频可能会过早地切换回原始视频。

单击按钮时播放的HTML5视频

1 个答案: