Question

我制作了一个自定义播放器。除了一件事，它的工作正常。它没有在Android或黑莓默认浏览器中获得全屏。是否可以使视频播放器全屏具有相同的功能。现在我正在使用

事件是：webkitbeginfullscreen和webkitendfullscreen我正在努力

var player = document.getElementsByTagName("video")[0];
player.addEventListener('webkitbeginfullscreen', onVideoBeginsFullScreen, false);
player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);

但这些不适用于Android或黑莓手机。

Answer 1

试试这个

$("button").click(function () {
   launchFullScreen(document.getElementsByTagName('video')[0]);
})

// Find the right method, call on correct element
function launchFullScreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

参考：http://davidwalsh.name/fullscreen

Answer 2

您可以查看screenfull wrapper

使用它就像

一样简单

var elem = document.getElementById('target');
document.getElementById('button').addEventListener('click', function () {
    if (screenfull.enabled) {
        screenfull.request(elem);
    }
});

Answer 3

var elem = document.getElementById("video");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

如何在所有主流移动浏览器中使用按钮点击或javascript制作全屏视频播放器

3 个答案: