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>