小編給大家分享一下HTML5如何通過Vedio標(biāo)簽實(shí)現(xiàn)視頻循環(huán)播放，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司云計(jì)算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過13年的服務(wù)器租用、成都移動機(jī)房、云服務(wù)器、虛擬主機(jī)、網(wǎng)站系統(tǒng)開發(fā)經(jīng)驗(yàn)，已先后獲得國家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務(wù)許可證。專業(yè)提供云主機(jī)、虛擬主機(jī)、空間域名、VPS主機(jī)、云服務(wù)器、香港云服務(wù)器、免備案服務(wù)器等。

要實(shí)現(xiàn)網(wǎng)頁播放視頻在HTML5以前是通過<embed>標(biāo)簽

<embed> 標(biāo)簽的作用是在 HTML頁面中嵌入多媒體元素

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

<object> 標(biāo)簽的作用是在 HTML頁面中嵌入多媒體元素

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

存在的問題：

需要flash，效率低

如果瀏覽器不支持 Flash，那么視頻將無法播放

iPad 和 iPhone 不能顯示 Flash 視頻

將視頻轉(zhuǎn)換為其他格式，仍然不能在所有瀏覽器中播放

在HTML5后，播放網(wǎng)頁視頻就簡單多了，一個(gè)<vedio></vedio>解決所有問題，廢話不多說，直接進(jìn)入正題：

本人編寫HTML5代碼是使用HBuilder，個(gè)人覺得軟件還不錯(cuò)，（主要的原因是該軟件的快捷鍵和界面布局和Eclipse很相似，對于習(xí)慣了Eclipse操作的我來說真是猶如再見故友的感覺啊，有木有）

先新建Web項(xiàng)目，將資源文件放入項(xiàng)目，目錄結(jié)構(gòu)如下：

接著直接在index.html中編寫代碼就行了：

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

vedio標(biāo)簽，中設(shè)置autoplay，是為了視頻在頁面加載完畢后就自動播放，controls添加控制條工具

<source>標(biāo)簽通過src設(shè)置視頻位置，此時(shí)的效果是這樣的：

這就是<vedio>標(biāo)簽的神奇之處了，只需一個(gè)標(biāo)簽搞定所有事

之后就是設(shè)置播放列表，使點(diǎn)擊列表播放后播放對應(yīng)的視頻：

添加<ul>,<li>實(shí)現(xiàn)列表的顯示：

<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>腳本控制點(diǎn)擊列表播放該視頻了

var myVideo = document.getElementById("myVedio"); //通過js獲取到vedio標(biāo)簽實(shí)例
var vedioLi = document.getElementsByTagName("li"); //獲取視頻列表
 
var vedioArry = new Array("1.webm", "2.webm", "3.webm"); //設(shè)置播放視頻列表數(shù)組
var arryNumber = 0; //設(shè)置默認(rèn)播放位置，方便后面循環(huán)播放

通過for循環(huán)為視頻列表添加onClick()方法，實(shí)現(xiàn)點(diǎn)中哪個(gè)就播放對應(yīng)視頻：

for(var j = 0; j < vedioLi.length; j++) {//循環(huán)條件為列表的長度
	vedioLi[j].onclick = function() {
	        for(var m = 0; m < vedioLi.length; m++) {
	                vedioLi[m].style.backgroundColor = "black";//為每個(gè)類表設(shè)置背景為黑色
	        }
                for(var i = 0; i < vedioLi.length; i++) {
		        if(vedioLi[i] == this) { //判斷點(diǎn)中的是否為該項(xiàng)
		                vedioLi[i].style.backgroundColor = "darkgray"; //將點(diǎn)擊后的背景設(shè)置為灰白
		                arryNumber = i; //將當(dāng)前播放設(shè)置為選中的下標(biāo)
		                myVideo.src = "video/" + vedioArry[i]; //設(shè)置播放視頻
		                myVideo.play(); //開始播放
	                }
	        }
        }
}

接下來實(shí)現(xiàn)循環(huán)播放：

myVideo.addEventListener("ended", function() {//為vedio添加ended監(jiān)聽，當(dāng)視頻播放完畢后執(zhí)行對應(yīng)函數(shù)
	if(arryNumber == (vedioArry.length - 1)) { //判斷是否到了最后一個(gè)視頻
	        vedioLi[vedioLi.length - 1].style.backgroundColor = "black"; //將前一個(gè)列表顏色設(shè)為black
		vedioLi[0].style.backgroundColor = "darkgray"; //將當(dāng)前視頻設(shè)置為灰白
		myVideo.src = "video/"+vedioArry[0]; //播放第一個(gè)視頻
		myVideo.play();
		arryNumber = 0;//將下標(biāo)重設(shè)為 0
	} else {
		arryNumber += 1; //每播放一次則將下標(biāo)加一
		myVideo.src = "video/" + vedioArry[arryNumber];
		vedioLi[arryNumber].style.backgroundColor = "darkgray";
		vedioLi[arryNumber - 1].style.backgroundColor = "black";
		myVideo.play();
	}
 
});

效果如下：

以上是“HTML5如何通過Vedio標(biāo)簽實(shí)現(xiàn)視頻循環(huán)播放”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：HTML5如何通過Vedio標(biāo)簽實(shí)現(xiàn)視頻循環(huán)播放-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://aaarwkj.com/article24/dpigje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站收錄、標(biāo)簽優(yōu)化、網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)