WebBrowser 控制视频元素进入全屏

Posted 2023-02-22

【中文标题】WebBrowser 控制视频元素进入全屏

【英文标题】：WebBrowser control video element enter fullscreen

【发布时间】：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 浏览器中无法使视频元素进入全屏。有什么解决办法吗？我是不是做错了什么？

【参考方案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 你们介意看看我的问题吗：***.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();