溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html5如何將視頻設(shè)置為循環(huán)播放

發(fā)布時(shí)間：2020-09-30 15:50:59 來(lái)源：億速云 閱讀：999 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹了html5如何將視頻設(shè)置為循環(huán)播放，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

實(shí)例

將視頻設(shè)置為循環(huán)播放：

myVid=document.getElementById("video1");
myVid.loop=true;

定義和用法

loop 屬性設(shè)置或返回音頻/視頻是否應(yīng)該在結(jié)束時(shí)再次播放。

瀏覽器支持

所有主流瀏覽器都支持 loop 屬性。

注釋：Internet Explorer 8 或更早的瀏覽器不支持該屬性。

語(yǔ)法

設(shè)置 loop 屬性：

audio|video.loop=true|false

返回 loop 屬性：

audio|video.loop

屬性值

值描述
true指示音頻/視頻應(yīng)該在結(jié)束時(shí)再次播放。
false默認(rèn)。指示音頻/視頻不應(yīng)該在結(jié)束時(shí)再次播放。

返回值

類型描述
布爾值true|false。默認(rèn)值是 false。

實(shí)例

將視頻設(shè)置為循環(huán)播放：

<!DOCTYPE html> 
<html> 
<body> 

<p>
	<button onclick="enableLoop()" type="button">啟用循環(huán)</button>
	<button onclick="disableLoop()" type="button">禁用循環(huán)</button>
	<button onclick="checkLoop()" type="button">檢查循環(huán)的狀態(tài)</button>
</p>
<video id="video1" controls="controls">
	<source src="/kf51/demo/mov_bbb.mp4" type="video/mp4">
	<source src="/kf51/demo/mov_bbb.ogg" type="video/ogg">
	您的瀏覽器不支持 video 標(biāo)簽。
</video>

<script>
var myVid = document.getElementById("video1");
function enableLoop() { 
	myVid.loop = true;
	myVid.load();
} 
function disableLoop() { 
	myVid.loop = false;
	myVid.load();
} 
function checkLoop() { 
	alert(myVid.loop);
} 
</script> 

</body> 
</html>

因?yàn)樾枰贏PP加載HTML頁(yè)面，用CrossWalk替換了原生的WebVIew，發(fā)現(xiàn)在一臺(tái)測(cè)試機(jī)上即使設(shè)置Loop屬性。視頻（andorid4.2.2設(shè)備）不會(huì)循環(huán)播放，

最后不再使用loop屬性用js來(lái)處理循環(huán)播放，HTML5懂得也不多，，直接上代碼了

<video autoplay="autoplay" id = "video" playsinline webkit-playsinline>
   <source type="video/mp4" src="path" />
   <preference name="AllowInlineMediaPlayback" value="true" />
</video>
<script>
      var video = document.getElementById("video");
      video.loop = false;
      video.addEventListener('ended', function() {
      video.currentTime=0.1; video.play(); }, false);
      video.play();
   </script>
</body>

webView加載HTML可能出現(xiàn)包括autopaly loop等屬性都不能用的情況，可以考慮用更強(qiáng)大的CrossWalk代替，不過(guò)會(huì)增加包的大小

同是用HTML5加載視頻來(lái)循環(huán)播放，可以避免直接播放視頻時(shí)切換過(guò)程中短暫的黑屏情況。。。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享html5如何將視頻設(shè)置為循環(huán)播放內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手