HTML5視頻未使用.load（）返回海報圖像

Question

我有一個帶有海報圖像和疊加內容的視頻。 當用戶單擊自定義播放按鈕時，視頻請求全屏顯示。 如果用戶退出全屏顯示，則會重新加載視頻並返回疊加內容。 一切都很好，除了海報圖像沒有返回。 誰能幫我這個？

javascript / jQuery是：

var featuredButton = $('.featured-panel .play img');
var featuredOverlay = $('.featured-panel .overlay-content');
var featuredVideo = $('.featured-video');
var featuredDown = $('.featured-panel .down');

// when clicking play button
featuredButton.on('click', function() {
  // hide play button
  $(this).hide();
  // hide down button
  featuredDown.hide();
  // hide overlay content
  featuredOverlay.fadeOut();
  // play the video
  $(this).parent().siblings(featuredVideo)[0].play();

  if (win.width() > 1024) {
    // vv This will automatically request full screen, consider using this and then returning to default poster view when full screen is exited
    $(this).parent().siblings(featuredVideo)[0].webkitRequestFullScreen();
    $(this).parent().siblings(featuredVideo)[0].mozRequestFullScreen();
  }
});

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

  if (event == "FullscreenOff") {
    //do something when fullscreen off
    featuredVideo.load();
    featuredOverlay.fadeIn();
    featuredButton.show();
  }
});

Answer 1

嘗試將fullscreenchange事件而不是<video>綁定到document或window 。 根據mdn

fullscreenchange

基本信息

規格全屏界面
活動氣泡是
取消否
目標 文件
默認動作無

還要注意，您第一次調用.webkitRequestFullScreen(); 會在Firefox中引發錯誤，我認為這將使其停止執行腳本。

這是一個更好的polyfill：

if(element.requestFullScreen)
    element.requestFullScreen();
    else if(element.webkitRequestFullScreen)
        element.webkitRequestFullScreen();
        else if(element.mozRequestFullScreen)
            element.mozRequestFullScreen();
            else if(element.msRequestFullscreen)
                element.msRequestFullscreen();
                else console.warn("fullscreen API not supported by this browser")

這是帶有假定html的示例代碼，因此我注釋了featuredDown部分。
它不能在這里工作 ，但是可以在您的計算機上嘗試。 （全屏請求在代碼段的iframe中被阻止。）

 var featuredButton = $('.featured-panel .play img'); var featuredOverlay = $('.featured-panel .overlay-content'); var featuredVideo = $('.featured-video'); var win= $(window); //var featuredDown = $('.featured-panel .down'); function requestFullscreen(element){ if(element.requestFullScreen) element.requestFullScreen(); else if(element.webkitRequestFullScreen) element.webkitRequestFullScreen(); else if(element.mozRequestFullScreen) element.mozRequestFullScreen(); else if(element.msRequestFullscreen) element.msRequestFullscreen(); else console.warn("fullscreen API not supported by this browser"); } // when clicking play button featuredButton.on('click', function() { // hide play button $(this).hide(); // hide down button // featuredDown.hide(); // hide overlay content featuredOverlay.fadeOut(); // play the video $(this).parent().siblings(featuredVideo)[0].play(); if (win.width() > 200) { requestFullscreen($(this).parent().siblings(featuredVideo)[0]); } }); win.bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) { var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; var event = state ? 'FullscreenOn' : 'FullscreenOff'; console.log(event); if (event == "FullscreenOff") { //do something when fullscreen off featuredVideo.load(); featuredOverlay.fadeIn(); featuredButton.show(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="featured-panel"> <div class="play"> <img src="http://lorempixel.com/50/50"> </div> <video controls="true" width="500" poster="http://lorempixel.com/500/280" class="featured-video"> <source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4"> <source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv"> </video> </div>