HTML5視頻播放器的自定義控件：使用[ESC]退出全屏

我正在與自定義控件的HTML5視頻播放器。你可以在THIS jsFiddle中看到它。HTML5視頻播放器的自定義控件：使用[ESC]退出全屏

的HTML是「經典」：

<div class="video-container"> 
    <video poster="http://code-love.me/video/posters/flamenco.jpg"> 
     <source src="http://code-love.me/video/videos/flamenco.mp4" type="video/mp4" /> 
     <source src="http://code-love.me/video/videos/flamenco.ogg" type="video/ogg" /> 
    </video> 
    <div class="controls-wrapper"> 
     <div class="progress-bar"> 
      <div class="progress"></div> 
     </div> 
     <ul class="video-controls"> 
      <li><input type="button" name="play-pause" value="Play" class="play"></li> 
      <li class="fullscreen-container"><input type="button" name="toggle-fullscreen" value="Fullscreen" class="fullscreen"></li> 
     </ul> 
    </div> 
</div>

我有我呼籲2個事件全屏功能：點擊全屏按鈕和緊迫Esc鍵關鍵。

點擊全屏按鈕切換全屏模式好，但我不明白爲什麼使用該鍵不。畢竟，這是同樣的功能....

任何提示？泰！現在

來源

2017-05-18 Razvan Zamfir

小提琴在Chrome上運行，您使用的是哪種瀏覽器？ – Rikusor

那麼，它在我的本地環境中不起作用。我必須按ESC兩次退出全屏。你能保存在你的電腦上，並告訴我它是如何工作的？而且..我也使用Chrome。 –

只是一個問題，你爲什麼要打開ESC按鈕上的全屏幕，從UX的角度來看對我來說沒有任何意義。 – Rikusor

，我明白你的目標，你可以不聽在全屏模式下，由於安全隱患按鍵事件，有辦法在Chrome中啓用這個，但我強烈反對這一點。

你可以做的是什麼，你可以聽webkitfullscreenchange mozfullscreenchange fullscreenchange事件（瀏覽器兼容性的原因多個事件）。這些事件發生時

然後採取行動。

$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) { 
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; 
    var event = state ? 'FullscreenOn' : 'FullscreenOff'; 

    // Now do something interesting 
    if(event === 'FullscreenOff') { 
    // Do something when user exists fullscreen 
    } else { 
    // Do something when user enters fullscreen 
    } 
});

來源

2017-05-18 09:43:52 Rikusor

HTML5視頻播放器的自定義控件：使用[ESC]退出全屏

回答

相關問題