Question

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

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

谢谢！

Answer 1

将双击（dblclick）event listener附加到视频，然后点击视频中的监听器requestFullScreen。

Answer 2

正如Musa建议的那样，附上双击事件 - 类似于$('video').on('dblclick', callback)

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

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

Answer 3

<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>

Answer 4

也许this link可以帮到你，也有很多HTML5 / JavaScript玩家可以使用（例如：BuckPlayer）。祝你好运。

Answer 5

以下是一个工作示例：

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

＆＃13;

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();
    }

  }
}

＆＃13;

<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>

＆＃13;

HTML5视频 - 双击全屏显示

5 个答案: