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

Stella981
• 阅读 1262

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

html页面视频标签大体如下:

<video id="video" controls="controls">

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

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

点赞
收藏
评论区
推荐文章
Easter79 Easter79
2年前
uni app video、视频播放开发
视频播放有3种解决方案,使用HTML5的自带video、从HBuilder9.1.3起新增的plus.video的原生视频播放,以及使用Native.js。1.HTML5自带video标签,可以播放符合HTML5规范的视频格式。注意不含flv、ra等三方商业公司的规范格式。HTML5的video在Android上有较多浏览
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Easter79 Easter79
2年前
vue video全屏播放
需求:1、视频为长方形,页面初始化打开为横屏全屏播放视频。2、微信不支持自动播放,故自动播放需求删除。方法:1、vuevideoplayer插件因需求较简单,仅要求播放本地一个视频,故未选择使用插件。2、video<divid"video_box"style"zindex:999;":cl
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Jacquelyn38 Jacquelyn38
2年前
从0到1搭建一款Vue可配置视频播放器组件(Npm已发布)
前言话不多说,这篇文章主要讲述如何从0到1搭建一款适用于Vue.js的自定义配置视频播放器。我们平时在PC端网站上观看视频时,会看到有很多丰富样式的视频播放器,而我们自己写的video标签样式却是那么丑。其实像那些网站都是基于原生video标签进行开发的,只不过还得适当加工一下,才会有我们所看到的漂亮的视频播放器。开发在具体开发之前,我们需要明确我们需要做什
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
03.视频播放器Api说明
03.视频播放器Api说明目录介绍01.最简单的播放02.如何切换视频内核03.切换视频模式04.切换视频清晰度05.视频播放监听06.列表中播放处理07.悬浮窗口播放08.其他重要功能Api09.播放多个视频10.
Stella981 Stella981
2年前
LayaAir使用原生Video视频播放以及Video监听事件
1.原生Video的基本属性src:视频的属性,url地址poster:视频封面,没有播放时显示的图片preload:预加载|none|metadata(部分预加载)|auto。默认为autoautoplay:自动播放loop:循环播放controls:浏览器自带的控制条width:视频宽度height:视频高
Stella981 Stella981
2年前
H5中video使用
<divid"video"src""controls"true"poster""preload"auto"webkitplaysinline"true"</div属性介绍:1)src:视频地址2)controls:Gecoko会提供用户控制,允许用户控制视频的播放,包括音量,跨
Stella981 Stella981
2年前
Android上定义播放器控件UniversalVideoView
在Android上播放视频最简单的方法是使用SDK中内置的VideoView,然后加上MediaController来控制视频播放暂停等,但是这样有一个缺点是无法定制自己的控制UI,所以这里提供一个自定义播放控件,它可以设置多种自定义属性(如loading样式,错误视频等),并且很容易在全屏与非全屏之间切换,另外支持AndroidV2.3及以上系统.