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

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

var elevideo = document.getElementById("video");elevideo.addEventListener('loadedmetadata', function () { //加载数据//视频的总长度console.log(elevideo.duration,'瓦达无大');});elevideo.addEventListener('play', function () { //播放开始执行的函数console.log("开始播放");document.getElementById("bofan").style.display = "none";});var elevideo = document.getElementById("video");elevideo.addEventListener('playing', function () { //播放中console.log("播放中");});var elevideo = document.getElementById("video");elevideo.addEventListener('waiting', function () { //加载console.log("加载中");});elevideo.addEventListener('pause', function () { //暂停开始执行的函数console.log("暂停播放");document.getElementById("bofan").style.display="flex";});elevideo.addEventListener('ended', function () { //结束console.log("播放结束");document.getElementById("bofan").style.display="flex";}, false);

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

chromedp网络监听_动态爬虫三：监听网络事件 + 监听js事件
一: 概述上两篇文章介绍了cdp协议和chromedp库,从这篇文章开始动手实战一下,我们要拿到页面上更多的网络请求,最直接的想法就是类似于开发者工具里的network,只有一有网络请求就显示在列表 ...
JS：打字游戏_键盘事件监听
1. 打字游戏屏幕随机出现字母或数字用户按下键盘,屏幕显示回答正确与否当用户按下ESC时游戏结束 <!DOCTYPE html> <html lang="en&quo ...
Unity AVPro video 开始播放,播放完成事件监听
代码播放: 低版本的路径播放api 不是这个 2.2.4 AVPro Video - Core Edition (核心版) bool isOpening = mediaPlayer.OpenMedi ...
雷火神山直播超两亿，Web播放器事件监听是怎么实现的？
Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播.在视频业务大数据平台中,播放数据的统计分析非常重要,所以We ...
Vue 模板语法插值操作绑定属性计算属性事件监听条件判断循环遍历阶段案例
1 插值操作 1.1 Mustache语法也就是双大括号 {{ }} <div id="app"> <!-- mustche语法中,不仅可以直接写变量,也可以写 ...
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
html中事件监听的使用,Vue.JS入门篇--事件监听
你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数 ...
js 监听安卓事件_百行代码实现js事件监听实现跨页面数据传输
百行代码实现js事件监听实现跨页面数据传输使用场景类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息技术原理跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...
js如何监听元素事件是否被移除_JS移除事件监听的方法 .removeEventListener( )
JS用addEventListener添加事件监听方法后,可以用removeEventListener来解除监听: element.removeEventListener(event, myFunct ...

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

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

最新文章

热门文章