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属性，因此没有任何if语句正在运行（如果它们已运行，video.requestFullscreen wold已失败。

将html5视频制作成全屏

1 个答案: