javascript - 使 html5 视频全屏显示

Question

我有一个自定义的 HTML5 视频播放器，在 HTML 页面中有一个视频标签和另一个 DIV 标签，我在其中放置了控件。控制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属性(property)，所以没有你的 if语句正在运行(如果它们已经运行， video.requestFullscreen 将失败)。