您好,登錄后才能下訂單哦!
這篇文章主要介紹了html5如何將視頻設置為循環播放,具有一定借鑒價值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
實例
將視頻設置為循環播放:
myVid=document.getElementById("video1"); myVid.loop=true;
定義和用法
loop 屬性設置或返回音頻/視頻是否應該在結束時再次播放。
瀏覽器支持
所有主流瀏覽器都支持 loop 屬性。
注釋:Internet Explorer 8 或更早的瀏覽器不支持該屬性。
語法
設置 loop 屬性:
audio|video.loop=true|false
返回 loop 屬性:
audio|video.loop
屬性值
值 | 描述 |
true | 指示音頻/視頻應該在結束時再次播放。 |
false | 默認。指示音頻/視頻不應該在結束時再次播放。 |
返回值
類型 | 描述 |
布爾值 | true|false。默認值是 false。 |
實例
將視頻設置為循環播放:
<!DOCTYPE html> <html> <body> <p> <button onclick="enableLoop()" type="button">啟用循環</button> <button onclick="disableLoop()" type="button">禁用循環</button> <button onclick="checkLoop()" type="button">檢查循環的狀態</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 標簽。 </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>
因為需要在APP加載HTML頁面,用CrossWalk替換了原生的WebVIew,發現在一臺測試機上即使設置Loop屬性。視頻(andorid4.2.2設備)不會循環播放,
最后不再使用loop屬性用js來處理循環播放,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可能出現包括autopaly loop等屬性都不能用的情況,可以考慮用更強大的CrossWalk代替,不過會增加包的大小
同是用HTML5加載視頻來循環播放,可以避免直接播放視頻時切換過程中短暫的黑屏情況。。。
感謝你能夠認真閱讀完這篇文章,希望小編分享html5如何將視頻設置為循環播放內容對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,遇到問題就找億速云,詳細的解決方法等著你來學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。