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