JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理

时间: 2020-04-24阅读: 447标签: 视频

在日常应用场景中,可能会遇到这么一个情况,需要判断用户是否完整的观看完了一部视频,在这个场景中,和视频相关的事件大体涉及到几个部分,获取视频长度,视频开始播放,暂停播放和播放结束,下面来看下如何通过JavaScript来监听获取视频的这几种状态。


(1)HTML页面视频标签大体如下

<video id="video" controls="controls">
    <source type="video/mp4" src="mi.mp4">
</video>


(2)视频加载后获取视频的长度

<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener(‘loadedmetadata‘, function () { //加载数据
        //视频的总长度
        console.log(elevideo.duration);
    });
</script>


(3)视频开始播放

<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener(‘play‘, function () { //播放开始执行的函数
        console.log("开始播放");
    });
</script>

 

(4) 视频正在播放中

<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener(‘playing‘, function () { //播放中
       console.log("播放中");
    });
</script>

 

(5)视频加载中

<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener(‘waiting‘, function () { //加载
        console.log("加载中");
    });
</script>

 

(6)视频暂停播放

<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener(‘pause‘, function () { //暂停开始执行的函数
        console.log("暂停播放");
    });
</script>

 

(7)视频结束播放

<script>
    var elevideo = document.getElementById("video");
    elevideo.addEventListener(‘ended‘, function () { //结束
        console.log("播放结束");
    }, false);
</script>
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8793

价值2580元廖雪峰前端视频,终终终于免费啦!

vue是国内最常用的前端框架,作者是尤雨溪大佬中文资料多,而且上手快,生态繁荣,是新手入门的首选框架。即将更新到3.0版本,追赶技术浪潮 进大厂就靠它啦

DPlayer简单用法

DPlayer 是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku,实时视频(HTTP Live Streaming,M3U8格式)以及 FLV 格式

html网页添加音乐视频方式

声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 Chrome 66 也正式关掉了声音自动播放

video.js切换视频源问题

什么要再重新load一下什么替换一下src,没有啥作用,简单粗暴又有效的方法,video的问题,单单替换source的src是不行的,简单明了重新替换整个video标签,将video用js重新替换一遍,更改src

聊聊 Web 视频播放的画中画模式

Chrome 在升级到 70 的时候开始对视频播放的画中画模式开始支持了,用户在浏览器 Web 页面可以通过 画中画的形式强当前画面停留在屏幕正上方,无论你在使用其他软件还是切到其他 Tab ,都可以看到当前画面

H5视频交互

在uc浏览器和ios微博里面,是不支持视频交互的,暂时没有办法把层级放在视频上方,IOS 必须用click事件点击之后视频才会播放,不支持自动播放 安卓环境下,视频播放会全屏播放,播放完之后不会回到原页面

Video Renderer:高性能移动 Web 端视频编辑器

Video Renderer 是一款针对移动 Web 应用开发的高性能视频编辑器。在 2019 伦敦全栈工程师大会( Fullstack London 2019 conference )上, Threads Styling 公司的软件开发工程师Forbes Lindesay 分享了 Video Renderer 的开发经验。

vue实现自定义H5视频播放器

前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑,这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭

Bideo.js实现全屏视频背景

想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览。那么我告诉你有一款Javascript库正合你意,它就是Bideo.js。

Web视频格式

网络视频一直都很火。虽然在页面上嵌入 Instagram 和 Youtube 视频非常简单,但是有越来越多的需求 —— 比如许多电子商务的场景 —— 要求定制的视频传输方法。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广