Question

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

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

    });
  });    
</script>

我尝试使用视频按钮以全屏模式创建一个网站，以全屏显示一些视频。在视频结束时，视频屏幕应该关闭并显示全屏网站概述，但它不起作用。只有$（'＃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);
}

Answer 1

我还没有能够在没有直接用户交互的情况下使document.mozCancelFullScreen工作。因此，从某些事件回调或超时调用它似乎不起作用。

解决方法是删除元素，然后放回原处。这就是$ .fadeout（）为你工作的原因，因为它从DOM中删除了元素。我用过：

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

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

在Firefox的js结尾处退出全屏视频？

1 个答案: