Question

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

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

是否有办法触发全屏按钮点击事件并使视频以全屏模式运行。

任何帮助将非常感谢。

提前致谢。

Answer 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");
      } 

    }

了解更多信息：http://msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx

Answer 2

激活全屏模式

如果您想要以全屏模式呈现元素（例如<video>），则只需调用其requestFullscreen()方法即可以全屏模式显示该元素。此方法在Gecko中以element.mozRequestFullScreen()实现，在Trident中以element.msRequestFullscreen()实现，在WebKit中以element.webkitRequestFullscreen()实现。

取自MDN

在HTML5中手动触发视频标记的全屏按钮单击事件

2 个答案: