将html5video制作成全屏

我有一个自定义HTML5video播放器，在HTML页面中有一个video标签和另一个DIV标签，我放置了控件。 控制DIV有播放按钮，暂停按钮，全屏按钮等。现在我想点击全屏按钮使video全屏显示。 我编写了使用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失败）。