HTML5是一種新的網(wǎng)絡(luò)編程語言，它不僅可以用來創(chuàng)建網(wǎng)頁，還可以嵌入多媒體元素。其中，視頻是網(wǎng)頁中使用頻率較高的元素之一。HTML5中，通過使用video元素就可以很方便地向網(wǎng)頁中添加視頻了。而且，通過HTML5，我們還可以很容易地實(shí)現(xiàn)全屏播放視頻。

下面我們來看看如何在HTML5中設(shè)置視頻全屏。

<video id="myVideo" controls width="400" height="300">
<source src="my-video.mp4" type="video/mp4">
<source src="my-video.webm" type="video/webm">
<source src="my-video.ogg" type="video/ogg">
您的瀏覽器不支持video標(biāo)簽。
</video>
<button onclick="toggleFullScreen()">全屏</button>
<script>
function toggleFullScreen() {
var videoElement = document.getElementById("myVideo");
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
if (videoElement.requestFullscreen) {
videoElement.requestFullscreen();
} else if (videoElement.msRequestFullscreen) {
videoElement.msRequestFullscreen();
} else if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else if (videoElement.webkitRequestFullscreen) {
videoElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
</script>

上面的代碼中，我們首先創(chuàng)建了一個video元素，并為其添加了多個source子元素，以便在各種瀏覽器中都可以播放視頻。然后，在代碼的末尾，我們添加了一個button元素，并為其添加了onclick事件，用于觸發(fā)全屏播放視頻的函數(shù)toggleFullScreen()。

最后，我們在JavaScript中定義了toggleFullScreen()函數(shù)，用于切換視頻的全屏狀態(tài)。在函數(shù)中，我們首先獲取了video元素，然后判斷當(dāng)前的全屏狀態(tài)。如果當(dāng)前不是全屏狀態(tài)，我們就通過videoElement.requestFullscreen()方法請求進(jìn)入全屏狀態(tài)。而如果當(dāng)前已經(jīng)是全屏狀態(tài)，我們就調(diào)用document.exitFullscreen()方法退出全屏狀態(tài)。

通過以上方法，我們就可以很方便地在HTML5中設(shè)置視頻全屏了。你可以復(fù)制上述代碼片段并嘗試在自己的網(wǎng)頁中使用。祝你編程愉快！