在 Firefox 上以 js 结尾退出全屏视频？答案

【问题标题】：exit fullscreen video at the ending with js on Firefox?在 Firefox 上以 js 结尾退出全屏视频？
【发布时间】：2013-01-14 19:54:03
【问题描述】：

<script>    
  $(document).ready(function(){
    $('#Video').bind('ended', function(){

      $('#Video')[0].mozCancelFullScreen();

    });
  });    
</script>

我尝试创建一个全屏模式的网站，其中包含可全屏显示一些视频的视频按钮。在视频结束时 videofullscreen 应该关闭并显示全屏网站概述，但它不起作用。只有 $('#Video').fadeout();有效，并且在视频结束后会显示网站概述，但是我无法重新打开视频。我尝试使用鼠标单击处理程序关闭全屏视频，但它也不起作用。

var Video = document.getElementById("Video")
    buttonFullscreen = document.getElementById("button");   

if (Video && buttonFullscreen) {
   videoFullscreen.addEventListener("click", function (evt) {

    if (Video.mozRequestFullScreen) {
      Video.mozRequestFullScreen();
      Video.mozSrcObject=null;
      Video.play();

      mouse.click( function () {
        Video.mousedown(function(event) {
          Video.pause();
          Video.mozSrcObject=null;
          Video.mozCancelFullScreen();
        }); 
     });

    }
  else if (Video.webkitRequestFullScreen) {
    Video.webkitRequestFullScreen();
    Video.play();

  }, false);
}

【问题讨论】：

标签： jquery html video fullscreen

【解决方案1】：

如果没有直接的用户交互，我也无法让 document.mozCancelFullScreen 工作。因此，从某些事件回调或超时调用它似乎永远不会起作用。

解决方法是删除元素，然后放回原来的位置。这就是为什么 $.fadeout() 适合你的原因，因为它会从 DOM 中删除元素。我用过：

var parentNode = videoElement.parentNode;
parentNode.removeChild(videoElement);
parentNode.appendChild(videoElement);

这看起来很糟糕，但这是我让它在 FF 中工作的唯一方法。

【讨论】：