全屏html5播放器的点击处理程序

Question

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

任何指针都会有帮助。

谢谢。

Answer 1

您可以设置一个简单的点击处理程序使用jQuery即使视频是全屏，这将工作：

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

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

在这个片段请看：

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

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