前端 音频/视频(Audio/Video)开始加载以及播放的过程_video.addeventlistener-程序员宅基地

技术标签: 前端  javascript  开发语言  

<body>
    <video src="" id="video"></video>
</body>
<script>
    var elevideo = document.getElementById("video");
    let self = this
    elevideo.addEventListener('loadstart', function () {
        
        console.log('加载过程开始');
    });
    elevideo.addEventListener('durationchange', function () {
        
        console.log('当指定音频/视频的时长数据发生变化时,发生 durationchange 事件');
    });
    elevideo.addEventListener('loadedmetadata', function () {
        
        console.log('当指定的音频/视频的元数据已加载时,会发生 loadedmetadata 事件');
    });
 
    elevideo.addEventListener('loadeddata', function () {
       
        console.log('当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时,会发生 loadeddata 事件');
    });
    elevideo.addEventListener('progress', function () {
       
        console.log('当浏览器正在下载指定的音频/视频时,会发生 progress 事件');
    });
    
    elevideo.addEventListener('canplay', function () {
        
        console.log('当浏览器能够开始播放指定的音频/视频时,发生 canplay 事件');
    });

    elevideo.addEventListener('canplaythrough', function () {
       
        console.log('当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件');
    });
 
    elevideo.addEventListener('play', function () {
        console.log("开始播放");
    });
 
    elevideo.addEventListener('playing', function () {
       console.log("播放中");
    });
 
    elevideo.addEventListener('waiting', function () {
        console.log("加载中");
    });
 
    elevideo.addEventListener('pause', function () {
        console.log("暂停播放");
    });
 
    elevideo.addEventListener('ended', function () {
        console.log("播放结束");
    }, false);
</script>

vue 项目中,放在 mounted间断监听

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/maoxiaozhu/article/details/127036457

智能推荐

Sqoop抽取Postgresql数据到HDFS和Hive时数据量增多_hive 平台抽取pg库数据-程序员宅基地

文章浏览阅读1.1k次。1、现象:postgresql源表数据量:抽取到HDFS上和Hive之后数据量:2、原因:使用sqoop从pg库导出数据至HDFS或Hive时,如果数据中包含Hive指定的列分隔符,如”\001”或”\t”,那么在Hive中就会导致数据错位;如果数据中包含换行符”\n”,那么就会导致原先的一行数据,在Hive中变成了两行或多行数据,导致数据量增多。正常的:3、解决:在sqoop执行import导入命令时添加参数–hive-drop-import-delims,作用是在导入时从字符串字_hive 平台抽取pg库数据

docker-pptp_docker pptp 807-程序员宅基地

文章浏览阅读1.5k次。docker pull ubuntusudo modprobe nf_conntrack_pptpecho nf_conntrack_pptp | sudo tee /etc/modules-load.d/pptp.confdocker run -i -t --privileged=true ubuntu:latest /bin/bashapt-get -y updateapt-get -y_docker pptp 807

UE4中自定义用于sequence的变量和函数_蓝图 操作 sequence-程序员宅基地

文章浏览阅读1.5k次,点赞3次,收藏9次。UE4中自定义用于sequence的变量和函数https://zhuanlan.zhihu.com/p/136962130ue4进化了sequence这个系统,每个版本都在进化,使得这个工具越来越好用,好用到我们甚至我们在做游戏的时候,任意的过场都可以拿他来制作,可以说是美术的利器。绝大部分美术在短时间内就能学会ue4的sequence并用它做出绚烂的画面,但是,这只限制与一般的单机游戏的过场,如果我们希望把它做成游戏里的事件的过场,比如触发事件后的表现,就有不少欠缺了。最主要的是,因为角色在游_蓝图 操作 sequence

plant simulation 关于产线工人搬运method优化_plant工人-程序员宅基地

文章浏览阅读341次。怎样优化一人四机搬运流程,不会出现workerpool手上有工件在工位前发呆,导致后工位的停止_plant工人

okhttp response.body().contentLength()=-1_解决okhttp content-length -1-程序员宅基地

文章浏览阅读6k次。问题:在使用okhttp下载文件的时候拿到的文件长度为-1解决思路1.看服务器返回的请求头是否含有Content-Lengthcmd 打开命令窗口输入 curl -i +下载链接窗口显示 connect-length 是有数值的2.看返回的content-typecontent-type类型https://www.runoob.com/http/http-content-type.html第一个返回text/plain; charset=utf-8 表示文本类型..._解决okhttp content-length -1

关于使用aspectjx出现 java.util.zip.ZipException: zip file is empty_aspectjtools zip file is empty-程序员宅基地

文章浏览阅读3.4k次。首先在demo中是没有问题的,然后集成到正式项目中就报了这个错,反复对比了好几次配置都一样的(有种情况是集成了但是不使用也会报错没找到类xxx)。先Googlegoogle发现该项目的issues里面也有很多人遇到这个问题。https://github.com/HujiangTechnology/gradle_plugin_android_aspectjx/issues/101h..._aspectjtools zip file is empty

随便推点

(5)systemverilog 面向对象编程(二)_sv在类之外定义方法-程序员宅基地

文章浏览阅读471次,点赞7次,收藏4次。面向对象编程(二)文章目录面向对象编程(二)五、类的方法1.在类之外定义方法2.this六、 动态对象七、 公有和私有关注作者五、类的方法类中的程序也称为方法,也就是在类的作用域内定义的内部task或者function。类中的方法默认使用自动存储,所以不必担心忘记使用automatic修饰符。1.在类之外定义方法一条值得称道的规则是,你应当限制代码段的长度在一页范围内以保证其可读性。该规则用于函数或任务时你能并不感到陌生,但是它同样适用于类。如果你可以在一屏内读到类的所有的东西,那么理解该类就会变_sv在类之外定义方法

xadmin使用formfield_for_dbfield函数过滤下拉表单-程序员宅基地

文章浏览阅读1.6k次。xadmin使用formfield_for_dbfield函数过滤下拉表单环境:Django 2.0.7 xadmin 2.0.1需求:下拉表单显示的是模型的其他表项或者外键 # 重写formfield_for_dbfield,设计add和edit表单 def formfield_for_dbfield(self, db_field, **kwargs): i..._formfield_for_dbfield

开发内功修炼视频课程上线-程序员宅基地

文章浏览阅读77次。无论是对于准备参加校园招聘、社会招聘的同学,还是想在工作中持续提升技术能力的同学,深度地理解计算机硬件、Linux 内核底层原理都是非常重要的。我之前给大家分享技术主要是通过公众号、纸质出版书等途径。其中《深入理解Linux网络》入围了2022年中国开发者影响力IT图书榜单。新的一本讲 CPU 原理、进程调度、内存管理方面的书也已经审稿中,预计明年会出版。但图文的表达力还是有限,更多的读者希望我能...

inputstream.available()方法-程序员宅基地

文章浏览阅读4.2k次。看到一篇有用的文章 遂转载获取网页文件大小的方法:url = new URL("http://158.46.34.140/index1.jpg");HttpURLConnection httpconn = (HttpURLConnection)url.openConnection();int length=httpconn.getContentLength();_inputstream.available

Xpath定位——xpath helper插件_xpath helper 使用id定位-程序员宅基地

文章浏览阅读2.5k次。XPath helper插件概述xPath Helper插件是什么? xPath helper是一款Chrome浏览器的开发者插件,安装了xPath helper后就能轻松获取HTML元素的 xPath,程序员就再也不需要通过搜索html源代码,定位一些id去找到对应的位置去解析网页了。XPath helper插件功能介绍google插件XPath Helper可以支持在网页点击元..._xpath helper 使用id定位

JAVA-微信支付关于APP下单_微信下单时签名作用-程序员宅基地

文章浏览阅读561次。我在网上查找了很多关于微信支付的案例很多但是部分讲的不是很细节,自己拿过来以后不知道如何去使用比较乱。我这几天研究了一下微信的支付v2的文档目前自己还是一个头脑简单的码农如果我哪里有啥不对的欢迎大家来指点一下,谢谢大家!!!!!!!!!!!!!我们都知道微信支付的app相关的接口是要封装好app传过来的相关参数数据打包给前端来唤起支付,其中最令人头疼的可能就是签名。好多人你不理解签名是怎么回事。其实理解了微信支付文档,其实一点也不难。签名就是客户端发数据给后台,后台打包下单参数签名一次,把返回的数据做处_微信下单时签名作用

推荐文章

热门文章

相关标签