在第一个视频结束后更改视频源
Change video source after the first video ends
我的设计中有两个视频文件。第一个是标志显示动画,第二个是标志动画。我想加载第一个视频只有当页面每次加载。我想在第一个视频结束后加载第二个视频
这里我的目标是:第一个视频播放时,页面加载(只有一次-每次页面加载)。如果第一个视频结束,第二个视频将在循环中播放。我不想一次又一次地显示徽标显示(第一)。如何做到这一点。希望我能找到解决办法。
这是我的代码。
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();
}
演示:https://jsfiddle.net/jLa1s62w/
你差一点就成功了。
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的event方法:$('#myVideo').on('ended',myHandler)
和$('#myVideo').off('ended',myHandler)
相关文章:
- YouTube(注入)视频结束回调
- 在 html5 视频结束时调用 AngularJS 控制器函数
- 如何在 HTML 视频结束后重定向到 URL
- 视频结束后显示播放按钮
- YouTube视频结束时的事件
- YouTube API 视频结束加载一个函数
- iPad1在视频播放结束之前启动视频结束事件
- Youtube API如何在视频结束时从0秒开始播放视频?Iframe,Javascript
- 让 YouTube API 在第一个视频结束时自动开始播放另一个视频
- 使用JavaScript在视频结束前几秒运行一个函数
- Youtube Javascript API嵌入在视频结束后有2个标题栏
- 需要在视频结束时触发事件
- 使用jwplayer检测视频结束
- 在第一个视频结束后更改视频源
- 视频结束后更换横幅
- 当视频结束时提交一个表单
- 在Javascript中检测Youtube网站内的Youtube视频结束
- html5视频结束后切换源
- 视频结束时添加电子邮件注册表格
- 如何在一段视频结束后播放第二段.mp4视频