HTML5 视频未使用 .load() 返回海报图像

Question

我有一个带有海报图片和叠加内容的视频。当用户单击自定义播放按钮时，视频请求全屏。如果用户退出全屏，则重新加载视频和叠加内容 returns。除了海报图像没有返回外，一切都很好。谁能帮我解决这个问题？

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 事件绑定到 document 或 window 而不是 <video>。根据mdn

fullscreenchange

General info

Specification         Fullscreen Interface
Event Bubbles      Yes
Cancelable            No
Target                    Document
Default Action      None

另请注意，您第一次调用 .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>

HTML5 视频未使用 .load() 返回海报图像

HTML5 video not returning to poster image using .load()

html

javascript

video

jquery

html5-video

fullscreenchange

General info