如何自动循环播放一个视频?

下面是html代码

<video controls="controls" id="videoID" style="width: 300px; vertical-align: middle;"><source src="/Portals/0/video/movie.ogv" type="video/mp4" /></video>
 

下面是js代码, 浏览器厂商为了不打扰用户,自动播放是不能播放声音的,如果播放声音,会提示 The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission。常规解决方案是点击一下页面才能播放声音,参看下面红色部分代码。

<script type="text/javascript">
    window.onload = function() {      
      var   local1 = document.getElementById('videoID'); //获取,函数执行完成后local内存释放
        local1.autoplay = true; // 自动播放
        local1.loop = true; // 循环播放
        local1.muted = true; // 关闭声音,如果为false,视频无法自动播放
        if (local1.paused) { //判断是否处于暂停状态
            local1.play(); //开启播放
        } else {
            local1.pause(); //停止播放
        }
document.body.addEventListener('mousedown', function(){
   if(loginstatus==false){
    var vdo = $("video")[0]; //jquery
    vdo .muted = false;
   }
}, false); 

    }

    function btn() {
        var local = document.getElementById('videoID'); //获取,函数执行完成后local内存释放
        if (local.paused) { //判断是否处于暂停状态
            local.play(); //开启播放
        } else {
            local.pause(); //停止播放
        }
    }
</script>

 

转载请注明出处: http://bluesd7.com/蓝影闪电的随笔/ContentId/419/html5-video-视频循环自动播放,-有声音

 
标签: 分类: HTML, JavasScript, 前端开发, 原创

评论数量 (0)

    留下一个评论

    剩余2000个字符。 一共限制在2000个字符内.
    发送评论

    搜索

    关于我

    姓名:余钊

    英文名:Joshua

    现居:武汉

    Email: yuzhao_blue@163.com

    关注:架构, 全栈, SQL, 高性能, 高并发

    日历