html/css/javascript您现在的位置是:主页 > html/css/javascript >
JS判断视频Video的播放、暂停、结束完成及获取长度等事件监听处理
2023-04-25 10:05:57html/css/javascript 46人已围观
controls:加上这个属性,Gecko 会提供用户控制,允许用户控制视频的播放,包括音量,跨帧,暂停/恢复播放。 浏览器并不是都支持相同的视频格式,所以你可以在 <source> 元素里提供多个视频源,然后浏览器将会使用它所支持的第一个源。 <video id="video" controls="controls"> <source type="video/mp4" src="mi.mp4"> <source src="myVideo.webm" type="video/webm"> </video> // 视频加载后获取视频的长度 <script> var elevideo = document.getElementById("video"); elevideo.addEventListener('loadedmetadata', function () { //加载数据 //视频的总长度 console.log(elevideo.duration); }); </script> // 视频开始播放 <script> var elevideo = document.getElementById("video"); elevideo.addEventListener('play', function () { //播放开始执行的函数 console.log("开始播放"); }); </script> // 视频正在播放中 <script> var elevideo = document.getElementById("video"); elevideo.addEventListener('playing', function () { //播放中 console.log("播放中"); }); </script> // 视频加载中 <script> var elevideo = document.getElementById("video"); elevideo.addEventListener('waiting', function () { //加载 console.log("加载中"); }); </script> // 视频暂停播放 <script> var elevideo = document.getElementById("video"); elevideo.addEventListener('pause', function () { //暂停开始执行的函数 console.log("暂停播放"); }); </script> // 视频结束播放 <script> var elevideo = document.getElementById("video"); elevideo.addEventListener('ended', function () { //结束 console.log("播放结束"); }, false); </script>
联系微信
扫码联系技术微信
---------------专业解决网站各种疑难杂症,可淘宝担保交易,安全无风险---------------
建站、仿站、二次开发、网站改版、网站修改、网站漏洞修复、网站被黑修复、网站安全、服务器安全等
点击了解更多 >>
相关文章
随机图文
input输入框不为空验证
<input type="text" name='mail' id='mail' placeholder="请输入您的邮箱" required /> required 属性规定必需在提交之前填写输入字段。 如果使用该属性,则字段是必填(或必选)的。 注释:required 属性适用于以下 <input> 类型:text, sear精美的纯CSS3丝带效果div丝带效果
源码下载 点击下载pbootcms实现精确搜索全词匹配查询
pbootcms实现全词匹配精确搜索或查询,可用于证书查询,授权查询一类的功能。 搜索页面模板标签如下: {pboot:search field='title' fuzzy=0 scode=5} <a href="[search:link]">[search:title]</a> {/pboot:search} field='title'哀悼日 让网站全站变灰css代码
此代码为提取百度官方的css代码。 html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%)