为 HTML5 中的视频标签手动触发全屏按钮单击事件答案

【问题标题】：Manually fire full screen button click event for Video tag in HTML5为 HTML5 中的视频标签手动触发全屏按钮单击事件
【发布时间】：2014-03-15 12:19:49
【问题描述】：

我的 HTML5 页面中有一个简单的视频标签。我没有显示视频标签的控件。检查下面的代码：

<video width="320" height="240" > <source src="movie.mp4" type="video/mp4"> </video>

有什么方法可以触发全屏按钮点击事件并使视频以全屏模式运行。

任何帮助将不胜感激。

提前致谢。

【问题讨论】：

标签： javascript html video

【解决方案1】：

//由用户点击元素发起

 function makeFullScreen(divObj) {
       //Use the specification method before using prefixed versions
      if (divObj.requestFullscreen) {
        divObj.requestFullscreen();
      }
      else if (divObj.msRequestFullscreen) {
        divObj.msRequestFullscreen();
      }
      else if (divObj.mozRequestFullScreen) {
        divObj.mozRequestFullScreen();
      }
      else if (divObj.webkitRequestFullscreen) {
        divObj.webkitRequestFullscreen();
      } else {
        console.log("Fullscreen API is not supported");
      } 

    }

【讨论】：

【解决方案2】：

激活全屏模式

给定一个您希望以全屏模式呈现的元素（例如<video>），您可以通过简单地调用其requestFullscreen() 方法以全屏模式呈现它；此方法在 Gecko 中实现为 element.mozRequestFullScreen()，在 Trident 中实现为 element.msRequestFullscreen()，在 WebKit 中实现为 element.webkitRequestFullscreen()。

取自MDN

【讨论】：