2 
<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);
}
4

1 回答 1

5

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

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

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

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

于 2013-05-16T18:56:31.170 回答