HTML5是一種構建網站和應用程序的技術語言,它提供了一種便捷的方式來實現全屏視頻播放功能。下面是一個HTML5視頻全屏播放的代碼實例:
<video width="100%" height="100%" controls preload="metadata"> <source src="example.mp4" type="video/mp4"> <source src="example.webm" type="video/webm"> <p>該瀏覽器不支持HTML5視頻</p> </video> <script> var video = document.getElementsByTagName("video")[0]; video.onclick = function() { if (video.paused) { video.play(); } else { video.pause(); } } </script>
上述代碼中,我們首先創建一個video元素,并設置其中兩個source子元素,分別指定了視頻文件的不同格式。如果用戶的瀏覽器不支持HTML5視頻,我們也添加了一個
元素,用于提示用戶。
接下來,我們使用JavaScript對video元素進行了一些操作。通過getElementsByTagName方法來獲取video元素,并為其添加了一個onclick事件,用于實現播放/暫停功能。
以上代碼實現了一個簡單的HTML5視頻全屏播放功能,如果您想要改進,則可以添加更多的JavaScript代碼來擴展其功能。