您好,登錄后才能下訂單哦!
小編給大家分享一下在html5中如何讓視頻循環(huán)播放,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
首先要實(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很相似,對(duì)于習(xí)慣了Eclipse操作的我來說真是猶如再見故友的感覺啊,有木有)
先新建Web項(xiàng)目,將資源文件放入項(xiàng)目:
接著直接在index.html中編寫代碼就行了:
<video id="myVedio" autoplay="autoplay" controls="controls" width="800px">
<source src="video/1.webm"></source>
</video>
vedio標(biāo)簽,中設(shè)置autoplay,是為了視頻在頁面加載完畢后就自動(dòng)播放,controls添加控制條工具
<source>標(biāo)簽通過src設(shè)置視頻位置,此時(shí)的效果是這樣的:
這就是<vedio>標(biāo)簽的神奇之處了,只需一個(gè)標(biāo)簽搞定所有事
之后就是設(shè)置播放列表,使點(diǎn)擊列表播放后播放對(duì)應(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è)就播放對(duì)應(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í)行對(duì)應(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中如何讓視頻循環(huán)播放”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。