HTML5視屏循環代碼使用方法
HTML5是最新的一代HTML標準,其中的視頻標簽為video。在視頻播放時,有時我們需要循環播放視頻,那么該如何實現呢?下面介紹一下 HTML5視屏循環代碼的使用方法。
HTML5視頻標簽示例:
<video src="example.mp4"> </video>
其中,src屬性指定視頻文件的位置。
若想將視頻循環播放,只需在video標簽內添加loop屬性即可,如下示例代碼:<video src="example.mp4" loop> </video>
如此,播放完例子.mp4后,再次從頭播放,直至手動停止。
同時,還可以使用JavaScript控制視頻播放,下面是一個簡單的示例代碼:<video id="myVideo" src="example.mp4"></video>
<script type="text/javascript">
var video = document.getElementById("myVideo");
video.addEventListener("ended", function() {
video.currentTime = 0;
video.play();
}, false);
</script>
以上代碼中,通過addEventListener()完成視頻播放結束的監聽事件,并在監聽到視頻播放完畢的時候,將視頻的當前播放時間歸零,并重新播放視頻。
不同的瀏覽器可能對視頻標簽的支持不同,所以在實際開發過程中需要適當注意。同時,也要注意合法的視頻文件格式,常見的如.mp4、.webm、.ogv等。