使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将会失败）。