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或document上的window事件，而不是<video>。 根据{{​​3}}

  

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部分进行了评论 它不会在这里工作，但在你的机器上尝试这个，它会。 （fullscreeen请求在片段的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>