HTML5 视频 - 双击全屏答案

【问题标题】：HTML5 Video - double click to go full screenHTML5 视频 - 双击全屏
【发布时间】：2015-03-02 07:54:00
【问题描述】：

我希望在用户双击视频区域时让我的视频全屏显示，而不仅仅是在他们单击控件中的小图标时。有没有办法添加事件或其他东西来控制用户点击视频时会发生什么？

<video controls autoplay>
  <source src="/v/foo.mp4">
</video>

谢谢！

【问题讨论】：

你可以试试这个：sitepoint.com/use-html5-full-screen-api

标签： html video fullscreen

【解决方案1】：

<video controls autoplay ondblclick="fullScreen()">
  <source src="/v/foo.mp4">
</video>

<script  type='text/javascript'>
  function fullScreen() { 
    if (!window.isFs) $(".mejs__fullscreen-button > button").trigger('click');
    else  $(".mejs__unfullscreen > button").trigger('click'); 
  }
</script>

【讨论】：

【解决方案2】：

这是一个工作示例：

https://fiddle.jshell.net/AhmadMysra/57kcyhbp/4/

function makeFullScreen(divObj) {
  if (!document.fullscreenElement && // alternative standard method
    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
    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");
    }

  } else {

    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }

  }
}

<video controls style="border: 1px solid blue;" height="360" width="480" ondblclick="makeFullScreen(this)">

<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">

	<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
  
	<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"><!-- Firefox3.6+ / Opera 10.5+ -->
    
    </video>
<p>
  Hosting of the video provided by<br>
  <a href="http://webop.de/users/69">André M. Åslund</a> of <a href="http://vorwaerts-gmbh.de">Vorwärts GmbH</a>.
</p>

【讨论】：

为我工作过

【解决方案3】：

按照 Musa 的建议，附加一个双击事件——类似于 $('video').on('dblclick', callback)

element.requestFullScreen 可能是“正确”的做法，但浏览器支持isn't great yet，尤其是在移动设备上。

如果您不需要真正的全屏，并且填充浏览器就足够了，您可以在 dblclick 回调中应用一些 CSS。

【讨论】：

【解决方案4】：

将双击(dblclick) event listener 附加到视频，然后在视频上的听众调用requestFullScreen。

【讨论】：

【解决方案5】：

也许this link可以帮助你，还有很多HTML5/JavaScript播放器可以使用（例如：BuckPlayer）。祝你好运。

【讨论】：

谢谢，但是当用户单击视频所在的实际区域时，我找不到如何使浏览器执行某些操作。我只是希望它在用户单击或双击它时全屏显示。