Javascript jquery和html5中的全屏视频传送带

大家好。 我想制作一个简单的视频旋转木马，当它被点击时，旋转木马停止，视频全屏播放，直到结束，然后关闭

事实上我已经完成了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>

#旋转木马{
宽度：480px；
溢出：隐藏；
保证金：0自动；
}
#旋转木马{
宽度：1920像素；
填充：0；
保证金：0；
}
#旋转木马{
宽度：480px；
文本对齐：居中；
高度：280px；
列表样式：无；
浮动：左；
}








$（文档）.ready（函数（）{
var elem=document.getElementsByClassName（“媒体视频”）；
if（元素请求全屏）{
元素请求全屏（）；
}else if（元素mozRequestFullScreen）{
elem.mozRequestFullScreen（）；
}else if（元素webkitRequestFullscreen）{
elem.webkitRequestFullscreen（）；
}
//旋转木马
var t=setInterval（函数（）{
$（“#carousel ul”）.animate（{marginLeft:-480}，1000，function（）{
$（this.find（“li:last”）。在（$（this.find（“li:first”））之后；
$（this.css（{marginLeft:0}）；
})
},5000);
});

我的问题是，全屏部分似乎被忽略了，没有抛出错误，但任何事情都会发生，而且，我想想想，有什么东西可以在播放时停止旋转木马，我有没有办法拦截点击并停止旋转木马？（当然，在结束时再次启动），如果没有，我将在计时一的开头实现“单击下一个转盘”。但是全屏问题是我想要解决的，我错了什么

编辑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>

$（文档）.ready（函数（）{
var t=setInterval（函数（）{
$（“#carousel ul”）.animate（{marginLeft:-480}，1000，function（）{
$（this.find（“li:last”）。在（$（this.find（“li:first”））之后；
$（this.css（{marginLeft:0}）；
})
},5000);
$（“.media video”）.bind（'play'，函数（）{
净间隔（t）；
如果（此.requestFullscreen）{
这个.requestFullscreen（）；
}else if（此.mozRequestFullScreen）{
这个.mozRequestFullScreen（）；
}else if（this.webkitRequestFullscreen）{
this.webkitRequestFullscreen（）；
}   
});
$（“.media video”）.bind（'pause'，函数（）{
t=设置间隔（函数（）{
$（“#carousel ul”）。动画（{marginLeft:-480}，2000年，函数（）{
$（this.find（“li:last”）。在（$（this.find（“li:first”））之后；
$（this.css（{marginLeft:0}）；
})
},1000);
});
});

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

提前感谢

$（文档）.ready（函数（）{

/*下面的代码将检查文档是否处于全屏状态，如果是，则取消它，否则请求全屏，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);
});

函数RunPrefixMethod（obj，方法）{

var pfx=[“webkit”、“moz”、“ms”、“o”和“”]；
var p=0，
m、 t；
而（p

})；

来自：

如果以下任一条件为true，请将任务排队，以在上下文对象的节点文档上将名为fullscreenerror的事件及其气泡属性设置为true，然后终止

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

发件人：

如果以下任一条件为真，则允许算法显示弹出窗口

…然后是一系列条件，可以概括为“打开弹出窗口的代码是由用户触发的”

---

简而言之，当文档加载时，您不能全屏显示。您必须这样做，以响应用户所做的操作（例如单击按钮）.

真的很好，我添加了启动和停止旋转木马的行为，它工作得很好，现在的问题是fulscreen。好的，当你播放视频时，你试图请求全屏。所以你可以做的是$（“body”）[0]，“RequestFullScreen”)；此处RequestFullScreen是特定于浏览器的，例如前缀为ms或webkit或moz或o。您可以使用document取消全屏。CancelFullScreen，记住将浏览器前缀放在不同浏览器的CancelFullScreen前面。这对我来说是完全可以的，我已经阅读了这些规范，并且我的diea仅在视频开始后才能全屏显示，只有当用户单击“播放”时，它才会启动……我认为这已经足够了。：/Hmm，在我写这篇文章时，您彻底更改了问题中的代码。在您尝试全屏播放

ready

之前。无论如何，“视频已经开始播放”可能未被用户充分触发。请尝试制作自己的播放按钮，以调用

.play（）

和全屏功能。

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

    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++;
    }