HTML视频自动播放不会停止

时间:2015-01-06 17:00:51

标签: html twitter-bootstrap video autoplay

我正在使用HTML视频TAG能够在我的网站上显示视频,我启用了自动播放功能,但视频将在页面重新加载时播放。所以我删除了自动播放功能,我有:

<video width="600" height="315" style=" margin-bottom: 20px;" controls >
                      <source src="video/handi.mp4" type="video/mp4">
                    </video> 


 <script>    
        $('body').on('hidden.bs.modal', '.modal', function () {
        $('video').trigger('pause');
        });
    </script>

这很好用,但是现在当你打开一个模式来观看视频时它会播放但是你必须点击开始播放按钮当你关闭模态时它会在你停止它时暂停视频,如果你打开它同样的模式,您可以从停止时恢复视频。 有没有像自动播放这样的功能,当你打开模态时它会打开它并且视频会自动播放,而且我想知道是否有任何重载功能当你打开任何模态观看视频时它从头开始不是从你停下来的地方开始的。

2 个答案:

答案 0 :(得分:0)

参考本page中的答案,我已经为你试过了..

请试试..

<强> HTML

<div id="simpleModal" class="modal">
   <video id="videoContainer" controls autoplay width="560" height="315">
      <source  src="video/arch_1.mp4" type="video/mp4">
   </video> 
   <a href="" id="closeSimple">Close</a>
</div>

<强>脚本

$(document).ready(function(){
    $("#showSimpleModal").click(function() {
        $("div#simpleModal").addClass("show");
        $("#videoContainer")[0].play();
        return false;   
    });

    $("#closeSimple").click(function() {
        $("div#simpleModal").removeClass("show");
        $("#videoContainer")[0].pause();
        return false;                   
    });
});

答案 1 :(得分:0)

嗨,根据w3schools.com,如果你删除自动播放,它将停止自动播放。这是学校和代码的链接。

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>