在現代網頁中，視頻元素已經成為了一種必不可少的元素。然而，對于用戶而言，很多時候他們對于小小的視頻框感到不滿足，希望能夠通過點擊按鈕來使視頻全屏播放。針對這個需求，jQuery提供了很好的支持，使得我們可以很方便地實現視頻全屏播放。

$(document).ready(function() {
var videoElement = $('video'); // 獲取視頻元素
var fullScreenElement = document.fullscreenElement || 
document.webkitFullscreenElement || 
document.mozFullscreenElement || 
document.msFullscreenElement; // 判斷瀏覽器是否支持全屏播放
$('button').click(function() { // 當點擊全屏按鈕時
if (videoElement[0].requestFullscreen) {
videoElement[0].requestFullscreen(); // 向瀏覽器請求全屏播放
} else if (videoElement[0].webkitRequestFullScreen) {
videoElement[0].webkitRequestFullScreen();
} else if (videoElement[0].mozRequestFullScreen) {
videoElement[0].mozRequestFullScreen();
} else if (videoElement[0].msRequestFullScreen) {
videoElement[0].msRequestFullScreen();
}
});
$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() { // 監聽全屏狀態修改事件
fullScreenElement = document.fullscreenElement || 
document.webkitFullscreenElement || 
document.mozFullscreenElement || 
document.msFullscreenElement;
if (!fullScreenElement) { // 如果退出全屏
videoElement.removeAttr("controls"); // 隱藏視頻控制欄
} else { // 如果進入全屏
videoElement.attr("controls", "controls"); // 顯示視頻控制欄
}
});
});

上述代碼中，我們首先獲取了視頻元素和瀏覽器是否支持全屏播放的信息。當用戶點擊全屏按鈕時，我們根據瀏覽器的支持情況通過jQuery設置元素的請求全屏函數。在接著監聽全屏狀態的修改事件，如果退出全屏則隱藏視頻控制欄，如果進入全屏則顯示視頻控制欄。

通過上述代碼，我們就可以輕松地在網頁中實現視頻全屏播放的功能，為用戶帶來更好的使用體驗。