在 HTML5 中,video 元素可以讓我們輕松地在網頁上嵌入視頻。而且 HTML5 video 還支持全屏播放,提供給用戶更好的觀看體驗。本文將介紹如何在 HTML5 中設置全屏播放的代碼。
在 video 元素中,我們需要添加 controls 屬性,這樣才能展示默認的播放控制器。然后,我們需要添加一個全屏按鈕,讓用戶可以切換全屏播放模式。
HTML 代碼: <video src="video.mp4" controls></video> <button onclick="toggleFullScreen()"></button>
在 JavaScript 代碼中,我們需要創建一個名為 toggleFullScreen 的函數,用于切換全屏播放模式。該函數需要檢查當前的全屏狀態,如果是已經全屏,就退出全屏;如果是未全屏,就進入全屏。
JavaScript 代碼: function toggleFullScreen() { var videoElem = document.getElementsByTagName('video')[0]; if (videoElem.requestFullscreen) { if (document.fullScreenElement) { document.exitFullscreen(); } else { videoElem.requestFullscreen(); } } }
在上面的 JavaScript 代碼中,我們使用了 document.fullScreenElement 屬性來檢查當前是否已經全屏。如果已經全屏,我們就使用 document.exitFullscreen() 方法退出全屏,否則我們就使用 videoElem.requestFullscreen() 方法進入全屏。
通過上述 HTML 和 JavaScript 代碼,我們就可以在 HTML5 中設置全屏播放了。同時,我們還要注意兼容性問題,因為不同瀏覽器對全屏播放的支持可能不同。