HTML5 根据⊙﹏⊙Vedio标识完成视頻循环系统播发的

2021-03-23 11:31 jianzhan

要完成网页页面播发视頻在HTML5之前是根据<embed>标识

存有的难题：

必须flash，高效率低

假如访问器不兼容 Flash，那麼视頻将没法播发

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

将视頻变换为别的文件格式，依然不可以在全部访问器中播发

在HTML5后，播发网页页面视頻就简易多了，一个<vedio></vedio>处理全部难题，空话很少说，立即进到主题：

自己撰写HTML5编码是应用HBuilder，本人感觉手机软件还非常好，（关键的缘故是此软件的便捷键和页面合理布局和Eclipse很类似，针对习惯性了Eclipse实际操作的我来讲简直宛如再见了旧识的觉得啊，有没有）

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

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

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

vedio标识，中设定autoplay，是以便视頻在网页页面载入结束后就全自动播发，controls加上操纵条专用工具

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

这便是<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: 800px;
	font-family: "楷体";
	font-size: 30px;
}

以后显示信息实际效果：

接下去便是撰写<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标识完成视頻循环系统播发的实例编码的文章内容就详细介绍到这了,大量有关HTML5视頻循环系统播发內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

HTML5 根据⊙﹏⊙Vedio标识完成视頻循环系统播发的

为您推荐