HTML5中video标签“事件”详解(实时监测当前播放时间)代码

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

 <video   id="myVideo"    controls="controls"       poster='预览图'   preload="auto"    x5-playsinline="" playsinline="" webkit-playsinline=""  >
                   <source src="" type="video/mp4">
     </video>

 

2、Js代码

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

 

video标签“事件”介绍

事件 描述
loadstart 浏览器开始在网上寻找媒体数据
progress 浏览器正在获取媒体数据
suspend 浏览器暂停获取媒体数据,但是下载过程并滑正常结束
abort 浏览器在下载完全部媒体数据之前中止获取媒体数据,但是并不是由错误引起的
error 获取媒体数据过程中出错
emptied video元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误

 

2.在浏览器正在选择支持的播放格式时,又调用 了load方法重新载入媒体

stalled 浏览器尝试获取媒体数据失败
play 即将开始播放,当执行了play方法时触发,或数据下载后元素被设为autoplay属性
pause 播放暂停,当执行了pause方式时触发
loadedmetadata 浏览器获取完毕媒体的时间长和字节数
waiting 播放过程由于得不到下一帧而暂停播放(例如下一帧尚未加载完毕),但很快就能够得到下一帧
canplay 浏览器能够播放媒体,但估计以当前的播放速率不能直接播放完毕,播放期间需要缓冲
canplaythrough 浏览器能够播放媒体,而且以当前播放速率能够将媒体播放完毕,不再需要进行缓冲
seeking seeking属性变为true,浏览器正在请求数据
seeked seeking属性变为false,浏览器停止请求数据
timeupdate 由于播放位置被改变,可能是播放过程中的自然改变,也可能是被人为的改变,或由于播放不能连续而发生的跳变
ended 播放结束后停止播放
ratechange defaultplaybackRate属性(默认播放速率)或playbackRate属性(当前播放速率)被改变
druationchange 播放时长被改变
volumechange volume属性(音量)被改变或muted属性(静音状态)被改变
    A+
发布日期:2019年06月05日 13:53:59  所属分类:HTML
最后更新时间:2019-06-05 13:55:45
评分: (2 票;平均数5.00 ;最高评分 5 ;用户总数2;总得分 10;百分比100.00)
头像
wordpress站群服务 泛解析二级域名 二级目录站群
wordpress站群服务 泛解析二级域名 二级目录站群
  • ¥ 1999.9元
  • 市场价:4800元
免费SSL证书服务 HTTPS申请 安装 配置 支持通配符*
免费SSL证书服务 HTTPS申请 安装 配置 支持通配符*
  • ¥ 199.9元
  • 市场价:20000元
PHP运行环境 wamp lamp lnmp 安装 配置 搭建服务
PHP运行环境 wamp lamp lnmp 安装 配置 搭建服务
  • ¥ 9.9元
  • 市场价:49.9元
wp discux 帝国 dedecms phpcms等快速建站
wp discux 帝国 dedecms phpcms等快速建站
  • ¥ 99.9元
  • 市场价:499.9元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: