关闭

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

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

在日常应用场景中,可能会遇到这么一个情况,需要判断用户是否完整的观看完了一部视频,在这个场景中,和视频相关的事件大体涉及到几个部分,获取视频长度,视频开始播放,暂停播放和播放结束,下面来看下如何通过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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

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

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

js实现截取视频帧图片作为封面预览图

前端需要把视频文件的第一帧图像截取出来,并做为缩略图显示在页面上,这里需要利用HTML5中强大的画布canvas来实现该功能

h5页面自动播放视频、音频_关于媒体文件自动全屏播放的实现方式

在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放。这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自己对浏览器进行设置才能支持autoplay。

H5视频交互

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

视频全屏弹幕实现

这个问题如果思路错了就是个死胡同。所以我在找问题的时候趟了很多坑。思路错在我不应该使用视频的全屏,敲黑板!划重点啦!不要使用视频的全屏!(解决了问题的时候才幡然醒悟)

web视频播放

毫无疑问,现在是短视频、直播的时代。视频内容逐渐代替图文形式成为网友们获取新鲜事物以及展现自我的一大媒介。随着5G的到来,2020年属于直播短视频爆发式增长的一年,电商平台也都涌入直播营销的大风口

如何实现沉浸式视频体验?

沉浸式视频体验,大致内容是一个页面里有几十个视频,用户点击其中一个视频时,该视频自动滑动到屏幕可视区域的顶部开始播放,并暂停其他视频,该视频滑出屏幕可视区域之后要自动暂停。

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

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

如何将视频设置为网页背景【转】

有时候为一个网页添加一个动画效果的背景,会让网页增加一定的韵味,让网页看起来与众不同。需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放

h5视频播放踩坑记录

随着抖音、快手这类的视频类app的火爆,移动端h5视频类应用也随之兴起,使用video播放的场景也越来越多,本篇文章主要例举了移动端视频播放的一些场景和个人在开发过程中遇到的一些问题

点击更多...

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