Question

我想了解当视频以全屏播放时，我们是否可以在html5中使用onclick处理程序和视频标记。我尝试过safari和chrome，但它没有用。

任何指针都会有所帮助。

感谢。

Answer 1

你可以用jQuery设置一个简单的点击处理程序，即使视频是全屏的，它也能正常工作：

$('#vid').click( function(){
  /* Do stuff */
});

如果您希望点击处理程序仅在视频全屏时工作，您可以根据视频在全屏和常规之间切换时触发的事件设置变量。然后你可以检查点击处理程序中的状态：

看一下这个片段：

＆＃13;

var fullscreen = false

$('#vid').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
  var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
  var event = state ? "FullscreenOn" : "FullscreenOff";

  if (event == "FullscreenOn") {
    //set state to fullscreen
    fullscreen = true
  } else {
    fullscreen = false
  }
});


$('#vid').click(function() {
  if (fullscreen) {
    alert("You clicked a fullscreen video!");
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<video id="vid" width="400" controls>
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />Your browser does not support HTML5 video.
</video>

＆＃13;

在全屏html5播放器上单击处理程序

1 个答案: