WebBrowser控制视频元素进入全屏

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

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

[更新]不幸的是，当通过OnFullScreen元素的原生UI输入全屏模式时，WebBrowser不会被<video>解雇，我刚刚验证了这一点。 IE The object model元素的<video>似乎没有任何与全屏模式相关的方法/属性/事件。因此，<video>元素的程序化大小调整可能是最佳选择。

Answer 2

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

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