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>

我的问题是全屏部分似乎被忽略了，没有错误抛出但是发生了什么事情，而且，我想想一些停止旋转木马的东西，有没有办法拦截点击并停止旋转木马？（当然，最后再次开始），如果没有，我会实施一个＆＃34;点击下一个旋转木马＆＃34;时机之一。但全屏问题是我想解决的问题，我错误的是什么？

EDIT1：

新代码是这样的：

<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

$（文件）。就绪（函数（）{

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);

/ *以下代码将检查文档是否全屏，如果取消，否则请求全屏，RunPrefixMethod用于检查基于浏览器的前缀，例如msIsFullScreen或msFullScreen * /

if (RunPrefixMethod(document, "FullScreen") || 
        RunPrefixMethod(document, IsFullScreen")) {

        RunPrefixMethod(document, "CancelFullScreen");
}else{
        RunPrefixMethod($("body")[0], "RequestFullScreen");
}


});


$(".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);
});

function RunPrefixMethod（obj，method）{

    var pfx = ["webkit", "moz", "ms", "o", ""];
    var p = 0,
        m, t;
    while (p < pfx.length && !obj[m]) {
        m = method;
        if (pfx[p] === "") {
            m = m.substr(0, 1).toLowerCase() + m.substr(1);
        }
        m = pfx[p] + m;
        t = typeof obj[m];
        if (t !== "undefined") {
            pfx = [pfx[p]];
            return (t === "function" ? obj[m]() : obj[m]);
        }
        p++;
    }

}）;

Answer 2

来自the spec：

如果满足以下任一条件，则将任务排队以在上下文对象的节点文档中将其bubbles属性设置为true的名为fullscreenerror的事件触发，然后终止

...


此算法不允许显示弹出窗口。

来自the linked spec：

如果满足以下任何条件，则允许算法显示弹出窗口

...后面跟着一系列可以概括为＆＃34的条件;用户打开弹出窗口的代码＆＃34;。

简而言之，您无法在文档加载时全屏显示。您必须这样做以响应用户做某事（例如单击按钮）。

在jquery和html5中使用全屏的视频轮播

2 个答案: