将html5视频制作成全屏 [英] making html5 video to fullscreen

问题描述

我有一个客户HTML5视频播放器，在HTML页面中有一个视频标签和另一个DIV标签，我放置了控件。控制DIV有播放按钮，暂停按钮，全屏按钮等。现在我想点击全屏按钮使视频全屏显示。我编写了使用requestFullscreen（）的代码。此代码不会抛出任何错误，但它不起作用。有人可以告诉我我哪里错了吗？

I have a custome HTML5 Video player, where in the HTML Page there is a video tag and another DIV tag where i have put the controls. The Control DIV has play button,Pause button, Fullscreen button etc. Now i am trying to make the video full screen on the click of the full screen button. I have written the code making the use of requestFullscreen(). This code is not throwing any error but its neither working. Could someone please tell me where i am going wrong??

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();
}
});

推荐答案

controls.fullscreen 和 controls.video 都是jQuery对象，而不是DOM元素。您需要jQuery对象中的元素，您可以使用 .get ：

controls.fullscreen and controls.video are both jQuery objects, not DOM elements. You want the elements inside the jQuery objects, which you can get with .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失败了） 。

jQuery objects don't have a requestFullscreen property, so none of your if statement were running (and if they had run, video.requestFullscreen wold have failed).

这篇关于将html5视频制作成全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！