javascript - jquery 和 html5 中的全屏视频轮播

Question

大家好。 我想制作一个简单的视频轮播，一旦单击，轮播就会停止，视频会全屏显示，直到结束，然后关闭。

其实我已经做到了70%，只是全屏部分有所欠缺。

代码是:

<style>
#carousel {
        width: 480px;
        overflow:hidden;
        margin:0 auto;
    }

    #carousel ul {
        width: 1920px;
        padding: 0;
        margin: 0;
    }

    #carousel ul li {
        width:480px;
        text-align: center;
        height: 280px;
        list-style: none;
        float:  left;
    }
</style>


<div id="carousel" >
   <ul>
       <li>
           <video class="media-video" poster="poster1.jpg" controls>
                <source src="video1.mp4" type="video/mp4"> 
           </video> 
       </li> 
       <li>
           <video class="media-video" poster="poster2.jpg" controls>
                <source src="video2.mp4" type="video/mp4"> 
           </video> 
       </li>
       <li>
           <video class="media-video" poster="poster3.jpg" controls>
                <source src="video3.mp4" type="video/mp4"> 
           </video> 
       </li>                                 
  </ul> 
</div>

<script>
$(document).ready(function(){
    var elem = document.getElementsByClassName("media-video");
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }


    //carousel

    var t = setInterval(function(){
        $("#carousel ul").animate({marginLeft:-480},1000,function(){
            $(this).find("li:last").after($(this).find("li:first"));
            $(this).css({marginLeft:0});
        })
    },5000);
});</script>

我的问题是，全屏部分似乎被忽略，没有抛出错误，但发生了任何事情，另外，我想考虑一些可以停止播放的轮播的东西，有没有办法可以拦截点击并停止轮播？ (然后当然最后再次启动它)，如果没有，我将在计时的头部实现“单击到下一个轮播”。但全屏问题是我想解决的问题，我错了什么？

编辑1:

新代码是这样的:

<script>
$(document).ready(function(){

    var t = setInterval(function(){
        $("#carousel ul").animate({marginLeft:-480},1000,function(){
            $(this).find("li:last").after($(this).find("li:first"));
            $(this).css({marginLeft:0});
        })
    },5000);


    $(".media-video" ).bind('play', function () {
        clearInterval(t);
        if (this.requestFullscreen) {
          this.requestFullscreen();
        } else if (this.mozRequestFullScreen) {
          this.mozRequestFullScreen();
        } else if (this.webkitRequestFullscreen) {
          this.webkitRequestFullscreen();
        }   
    });


    $(".media-video" ).bind('pause', function () {
        t = setInterval(function(){
            $("#carousel ul").animate({marginLeft:-480},2000,function(){
                $(this).find("li:last").after($(this).find("li:first"));
                $(this).css({marginLeft:0});
            })
        },1000);
    });

});
</script>

现在问题只是全屏，这似乎被忽略了，没有警报，没有警告，没有错误。

提前致谢

Answer 1

来自the spec :

If any of the following conditions are true, queue a task to fire an event named fullscreenerror with its bubbles attribute set to true on the context object's node document, and then terminate

…

• This algorithm is not allowed to show a pop-up.

来自the linked spec :

An algorithm is allowed to show a popup if any of the following conditions is true

…后面跟着一堆条件，可以概括为“打开弹出窗口的代码是由用户触发的”。

简而言之，加载文档时无法全屏显示。您必须这样做以响应用户执行某些操作(例如单击按钮)。