使html5視頻全屏顯示

Question

我有一個自定義HTML5視頻播放器，在HTML頁面中有一個視頻標簽和另一個放置了控件的DIV標簽。 Control DIV具有播放按鈕，暫停按鈕，全屏按鈕等。現在，我試圖通過單擊全屏按鈕使視頻全屏顯示。 我已經編寫了使用requestFullscreen（）的代碼。 這段代碼沒有拋出任何錯誤，但是沒有任何作用。 有人可以告訴我我要去哪里錯嗎？

var controls = {
video: $("#player"),  //this is the video element
fullscreen: $("#fullscreen")  //This is the fullscreen button.
};

controls.fullscreen.click(function(){
var elem = controls.fullscreen;
if (elem.requestFullscreen) {
    controls.video.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
    controls.video.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
    controls.video.webkitRequestFullscreen();
}
});

Answer 1

controls.fullscreen和controls.video都是jQuery對象，而不是DOM元素。 您需要jQuery對象中的元素，可以通過.get獲得：

var controls = {
    video: $("#player").get(0),  //this is the video element
    fullscreen: $("#fullscreen").get(0)  //This is the fullscreen button.
};

jQuery對象沒有requestFullscreen屬性，因此您的if語句均未運行（如果已運行， video.requestFullscreen wold將會失敗）。