在html5中，如何使用video标签让两个不同的视频文件按顺序自动播放？
设计让两个视频按顺序自动播放的思路如下：
1、 创建一个video元素，设置其播放资源为第一个视频资源
2、 设置当视频进行播放如果是隐藏状态就会显示出来。
3、 通过循环遍历改变video元素中设置播放资源的属性
下面我们通过一个简单的示例来进行演示。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Media: 动态加载</title>
<body>
<article>
<h1>Media<span> - 动态加载</span></h1>
</article>
<div id="result-stub" class="well hidden">
//创建一个Video元素用来播放视频这里自定义了两个属性firstfile，secondfile他们的值要分别为播放的第一个视频资源和第二个视频资源。
<video id="vid"
firstfile="video1"
secondfile="video2" controls width="320">
//视频资源设首先置为第一个视频资源
<source src="../media/video1.mp4" type="video/mp4" />
<source src="../media/video1.ogv" type="video/ogg" />
<source src="../media/video1.webm" type="video/webm" />
</video>
</div>
<script >
window.οnlοad= function() {
//---获取video元素对象
var $video = $('#vid');
//设置当视频正在播放时，如果是隐藏状态就会以淡入的效果显示出来
$video.on('play', function() {
if (!$video.is(':visible')) {
$video.fadeIn();
}
});
//当视频播放结束时动态加载第二个视频
$video.on('ended', function() {
//获取video独享
var
video = this,
//获取source对象，这样我们就可以通过该对象来修改video元素播放视频的来源。
sources =
video.getElementsByTagName('source'),
//获取第一个视频资源的资源名称
oldFileName =
$video.attr('firstfile'),
//获取第二个视频资源的资源名称
newFileName =
$video.attr('secondfile'),
forEach = Array.prototype.forEach;
// 检查是否成功加载最后一个视频
if(sources[0].src.indexOf(newFileName) === -1){
//通过遍历的方式将video的sources的src属性由第一个资源名称改为第二个资源名称
forEach.call(sources, function(source) {
source.src =
source.src.replace(oldFileName,
newFileName);
});
//加载和播放新视频
$video.fadeOut(function() {
video.load();
video.play();
});
}
});
//---
}
</script>
<script src="../js/jquery.js"></script>
</body>
</html>
有关于HTML5中的相关知识建议你可以到一个叫做秒秒学的网站中学习一下，里面有专门讲解HTML5的课程。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
