HTML5是一項功能強大的技術,其中包括視頻全屏的功能。下面是實現HTML5視頻全屏的基本代碼:
HTML5視頻在全屏模式下的頁面代碼:
<!DOCTYPE html>
<html>
<head>
<title>HTML5視頻全屏模式</title>
</head>
<body>
<video id="myvideo" width="640" height="360">
<source src="video.mp4" type="video/mp4">
</video>
<button onclick="toggleFullScreen()">全屏</button>
<script>
function toggleFullScreen() {
var videoElem = document.getElementById("myvideo");
if (!document.fullscreenElement) {
videoElem.requestFullscreen().catch(err =>{
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen().catch(err =>{
alert(`Error attempting to exit full-screen mode: ${err.message} (${err.name})`);
});
}
}
</script>
</body>
</html>
以上代碼包括了一個HTML5視頻元素以及一個按鈕,用于控制視頻的全屏顯示。按鈕被點擊時,調用toggleFullScreen()函數進行全屏顯示。
在toggleFullScreen()函數中,首先獲取了視頻元素,并檢查當前頁面是否已經處于全屏模式。如果沒有,則調用requestFullscreen()方法請求全屏顯示。否則,調用exitFullscreen()方法退出全屏顯示。
總的來說,上述代碼是HTML5實現視頻全屏功能的核心代碼。通過這段代碼,您可以自由的控制頁面中的視頻元素在全屏模式下的顯示和退出。