要完成网页播放视频在HTML5之前是根据<embed>标识

<embed> 标识的功效是在 HTML网页页面中置入多媒体系统原素

<embed src="1.swf"width="400">

<object> 标识的功效是在 HTML网页页面中置入多媒体系统原素

<object data="1.swf"width="400"></object>

存在的不足:

必须flash,高效率低

假如电脑浏览器不兼容 Flash,那麼视頻将没法播放视频

iPad 和 iPhone 不可以显示信息 Flash 视頻

将视频转换为别的文件格式,依然不可以在全部电脑浏览器中播放视频

在HTML5后,播放视频网页视頻就简易多了,一个<vedio></vedio>处理全部难题,废话不多说,直接进入主题:

自己撰写HTML5编码是应用HBuilder,本人感觉手机软件还不错,(关键的缘故是此软件的键盘快捷键和页面合理布局和Eclipse很类似,针对习惯Eclipse实际操作的我而言简直宛如再见了旧识的觉得啊,有没有)

先在建Web新项目,将資源文档放进新项目,文件目录构造以下:

HTML5 通过Vedio标签实现视频循环播放的示例代码 视频循环播放 Vedio HTML5 html5  第1张

然后立即在index.html中撰写编码就可以了:

<video id="myVedio" autoplay="autoplay" controls="controls" width="801080x">
	<source src="video/1.webm"></source>
</video>

vedio标识,中设定autoplay,是为了更好地视頻在页面加载结束后就全屏播放,controls加上操纵条专用工具

<source>标识根据src设定视頻部位,这时的实际效果是那样的:

HTML5 通过Vedio标签实现视频循环播放的示例代码 视频循环播放 Vedio HTML5 html5  第2张

这就是<vedio>标识的奇妙的地方了,只需一个标识拿下全部事

以后便是设定列表,使点一下目录播放视频后播放视频相匹配的视頻:

加上<ul>,<li>完成目录的显示信息:

<ul>
	<li>视频一</li>
	<li>视頻二</li>
	<li>视頻三</li>
</ul>

为了更好地显示信息实际效果更强能够加上css样式,为已经播放的视频加上背景颜色:

li {
	list-style: none;
        background-color: black;
	color: white;
	text-align: center;
	margin: 5px auto;
	width: 801080x;
	font-family: "楷体";
	font-size: 30px;
}

以后显示信息实际效果:

HTML5 通过Vedio标签实现视频循环播放的示例代码 视频循环播放 Vedio HTML5 html5  第3张

接下去便是撰写<script>脚本制作操纵点一下目录播放视频该视頻了

var myVideo = document.getElementById("myVedio"); //根据js获得到vedio标识案例
var vedioLi = document.getElementsByTagName("li"); //获得视频列表
var vedioArry = new Array("1.webm", "2.webm", "3.webm"); //设定播放视频目录数字能量数组
var arryNumber = 0; //设定默认设置播放视频部位,便捷后边循环播放

根据for循环为视频列表加上onClick()方式 ,完成选中哪一个就播放视频相匹配视頻:

for(var j = 0; j < vedioLi.length; j  ) {//循环系统标准为目录的长短
	vedioLi[j].onclick = function() {
	        for(var m = 0; m < vedioLi.length; m  ) {
	                vedioLi[m].style.backgroundColor = "black";//为每一个类表设定情况为灰黑色
	        }
                for(var i = 0; i < vedioLi.length; i  ) {
		        if(vedioLi[i] == this) { //分辨选中的是不是为此项
		                vedioLi[i].style.backgroundColor = "darkgray"; //将点一下后的情况设定为灰白色
		                arryNumber = i; //将当今播放视频设定为选定的字符
		                myVideo.src = "video/"   vedioArry[i]; //设定播放视频
		                myVideo.play(); //开播
	                }
	        }
        }
}

接下去完成循环播放:

myVideo.addEventListener("ended", function() {//为vedio加上ended监视,当视频在线观看结束后实行相匹配涵数
	if(arryNumber == (vedioArry.length - 1)) { //分辨是不是来到最终一个视频
	        vedioLi[vedioLi.length - 1].style.backgroundColor = "black"; //将前一个目录色调设为black
		vedioLi[0].style.backgroundColor = "darkgray"; //将当今视頻设定为灰白色
		myVideo.src = "video/" vedioArry[0]; //播放视频第一个视頻
		myVideo.play();
		arryNumber = 0;//将字符更改为 0
	} else {
		arryNumber  = 1; //每播放视频一次则将字符加一
		myVideo.src = "video/"   vedioArry[arryNumber];
		vedioLi[arryNumber].style.backgroundColor = "darkgray";
		vedioLi[arryNumber - 1].style.backgroundColor = "black";
		myVideo.play();
	}
});

实际效果以下:

HTML5 通过Vedio标签实现视频循环播放的示例代码 视频循环播放 Vedio HTML5 html5  第4张

HTML5 通过Vedio标签实现视频循环播放的示例代码 视频循环播放 Vedio HTML5 html5  第5张

到此这篇有关HTML5 根据Vedio标识完成视頻循环播放的实例编码的文章内容就详细介绍到这了,大量有关HTML5视頻循环播放內容请搜索之前的文章内容或再次访问下边的类似文章,期待大伙儿之后多多的适用!