第一个视频结束后更改视频源
Change video source after the first video ends
我的设计中有两个视频文件。第一个是徽标显示动画,第二个是徽标动画。我只想在每次加载页面时加载第一个视频。我想在第一个视频结束后加载第二个视频。
我的目标是:页面加载时播放第一个视频(仅一次 - 每次页面加载)。如果第一个视频结束,第二个视频将循环播放。我不想一次又一次地显示徽标 reveal(1st)。这该怎么做。希望我能得到解决方案。
这是我的代码。
HTML :
<video width="400" controls id="myVideo" autoplay>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
JS
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
alert();
var videoFile = 'https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4';
$(' #myVideo source').attr('src', videoFile);
$("#myVideo")[0].load();
}
你快明白了。
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
function myHandler(e) {
alert();
var videoFile = 'https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4';
$(' #myVideo source').attr('src', videoFile);
$('#myVideo').attr("loop", true); /* 1 */
$("#myVideo")[0].load();
document.getElementById('myVideo').removeEventListener('ended', myHandler, false) /* 2 */
}
1) 循环属性,所以第二个视频循环。
2) 删除事件侦听器,这样视频就不会被再次替换。
https://jsfiddle.net/yuriy636/jLa1s62w/1/
注意:如果你使用的是jQuery,你也可以使用jQuery的事件方法:
$('#myVideo').on('ended',myHandler)
和 $('#myVideo').off('ended',myHandler)
我的设计中有两个视频文件。第一个是徽标显示动画,第二个是徽标动画。我只想在每次加载页面时加载第一个视频。我想在第一个视频结束后加载第二个视频。
我的目标是:页面加载时播放第一个视频(仅一次 - 每次页面加载)。如果第一个视频结束,第二个视频将循环播放。我不想一次又一次地显示徽标 reveal(1st)。这该怎么做。希望我能得到解决方案。
这是我的代码。
HTML :
<video width="400" controls id="myVideo" autoplay>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
JS
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
alert();
var videoFile = 'https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4';
$(' #myVideo source').attr('src', videoFile);
$("#myVideo")[0].load();
}
你快明白了。
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
function myHandler(e) {
alert();
var videoFile = 'https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4';
$(' #myVideo source').attr('src', videoFile);
$('#myVideo').attr("loop", true); /* 1 */
$("#myVideo")[0].load();
document.getElementById('myVideo').removeEventListener('ended', myHandler, false) /* 2 */
}
1) 循环属性,所以第二个视频循环。
2) 删除事件侦听器,这样视频就不会被再次替换。
https://jsfiddle.net/yuriy636/jLa1s62w/1/
注意:如果你使用的是jQuery,你也可以使用jQuery的事件方法:
$('#myVideo').on('ended',myHandler)
和 $('#myVideo').off('ended',myHandler)