首页 > Web开发 > 详细

【HTML5】HTML5中video元素事件详解(实时监测当前播放时间)

时间:2019-06-20 15:21:31      阅读:302      评论:0      收藏:0      [点我收藏+]

html 代码,video后边几个元素,可处理ios 系统的兼容性

   <video   id="myVideo"    controls="controls"       poster=‘预览图‘   preload="auto"    x5-playsinline="" playsinline="" webkit-playsinline=""  >
                   <source src="" type="video/mp4">
     </video>
<script>
//获取视频DOM元素
        var myVideo = document.getElementById("myVideo");

        myVideo.oncanplay = function(){
            console.log("准备就绪");    

        };
        //监听播放开始
        myVideo.addEventListener(‘play‘,function(){
            console.log("开始播放");
        });

        //监听播放结束
        myVideo.addEventListener(‘pause‘,function(){
            console.log("播放暂停");
        }); 

        //监听播放结束
        myVideo.addEventListener(‘ended‘,function(){
            console.log("播放结束");
        });
            
        //使用事件监听方式捕捉事件, 此事件可作为实时监测video 播放状态
        myVideo.addEventListener("timeupdate",function(){
            var timeDisplay;
            //用秒数来显示当前播放进度
            timeDisplay = Math.floor(myVideo.currentTime);
            console.log(Math.floor(myVideo.currentTime))

            //当视频播放到 4s的时候做处理
            if(timeDisplay == 4){
                    //处理代码
            }
        },false);   


</script>

  

事件介绍

技术分享图片

技术分享图片技术分享图片

原帖地址:https://www.cnblogs.com/richerdyoung/p/10701838.html

【HTML5】HTML5中video元素事件详解(实时监测当前播放时间)

原文:https://www.cnblogs.com/livedian/p/11058783.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!