WebBrowser 控制视频元素进入全屏答案

【问题标题】：WebBrowser control video element enter fullscreenWebBrowser 控制视频元素进入全屏
【发布时间】：2013-10-02 13:23:29
【问题描述】：

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

我试过这段代码：

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

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

而且它不起作用。我在一些文章中读到，在 IE 浏览器中无法使视频元素进入全屏。有什么解决办法吗？我是不是做错了什么？

【问题讨论】：

标签： c# javascript html webbrowser-control

【解决方案1】：

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

[更新] 不幸的是，当通过<video> 元素的本机 UI I' 进入全屏模式时，OnFullScreen 不会被 WebBrowser 触发刚刚验证了这一点。 IE <video> 元素的 The object model 似乎也没有与全屏模式相关的任何方法/属性/事件。因此，以编程方式调整 <video> 元素的大小可能是最佳选择。

【讨论】：

根据this，WebBrowser 对象会忽略 OnFullScreen 事件。

【解决方案2】：

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

【讨论】：

+1，使用 IE WebBrowser 似乎没有更好的方法。
@noseratio noseratio 和 BlackSpy 你们介意看看我的问题吗：stackoverflow.com/questions/55622038/… 这是一个类似的问题，但我找不到答案。

【解决方案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();
  }
}

【讨论】：