javascript - 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

尝试绑定(bind)fullscreenchange事件于 document或window而不是<video> 。 根据mdn

fullscreenchange

General info

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

另请注意，您第一次调用 .webkitRequestFullScreen();会在 Firefox 中引发错误，我认为这会使其停止执行脚本。

这是一个更好的填充:

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>