Question

在我的项目中，我有一个带有视频元素的WebBrowser控件，我想插入一个按钮，当我按下它时，视频元素将切换到全屏模式。

我试过这段代码：

var video = document.getElementById('video');

if (video.requestFullscreen) {
    video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
    video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
}

它不会起作用。我在一些文章中读到，在IE浏览器中不可能使视频元素进入全屏。有没有解决这个问题？我做错了吗？

Answer 1

您可以读取视口的宽度和高度，并将视频控件的宽度和高度设置为相同的值。不会全屏显示 - 但会填满浏览器中的空间。

Answer 2

根据MSDN，我们应该能够处理OnFullScreen事件并跟踪WebBrowser控件的FullScreen属性。你需要access the underlying ActiveX object for that。不过，我自己没有试过FullScreen/OnFullScreen。

[更新] 不幸的是，当WebBrowser通过<video>元素的原生用户界面输入全屏模式时，<video>不会被触发，我刚刚验证了。 IE <video>元素的OnFullScreen似乎没有任何与全屏模式相关的方法/属性/事件。因此，{{1}}元素的程序化大小调整可能是最佳选择。

Answer 3

该方法需要特定的前缀才能在不同的浏览器中工作，对于IE浏览器，应使用：msRequestFullscreen和msRequestFullscreen()

参见下文：

/* Get the element you want displayed in fullscreen mode (a video in this example): */
var video = document.getElementById("video"); 

/* When the openFullscreen() function is executed, open the video in fullscreen.
Note that we must include prefixes for different browsers, as they don't support the requestFullscreen property yet */

function openFullscreen() {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.mozRequestFullScreen) { /* Firefox */
    video.mozRequestFullScreen();
  } else if (video.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) { /* IE/Edge */
    video.msRequestFullscreen();
  }
}

如果要退出全屏模式，请使用msExitFullscreen()方法在IE浏览器中取消全屏模式。

参见下文：

/* Close fullscreen */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen();
  }
}

WebBrowser控制视频元素进入全屏

3 个答案: