H5 视频Video 元素及常用事件 播放 暂停 初始化 设置播放时间禁用下载等
H5 视频Video 元素及常用事件 播放 暂停 初始化 设置播放时间
常用属性
- 自动播放：
autoplay - 显示常用工具栏：
controls - 是否重复播放：
loop - 视频总长度：
duration - 判断是否播放完：
ended - 设置获取视频静音：
muted - 不显示下载按钮： controlslist=“nodownload”
- 设置返回视频播放速度：
playbackRate具体设置参数 - 更多属性
常用事件
暂停：Video.pause()播放：Video.play()
设置播放时间 & 获取当前播放时间 currentTime
获取： Video.currentTime设置： Video.currentTime = 60 // 单位为秒；60秒=1分钟获取总长：Video.duration
常用监听判断视频生命周期
开始获取到视频元数据：addEventListener('loadedmetadata')这里获取到了视频名称，宽高等信息，且只触发一次可以获取视频总时长了：addEventListener('durationchange')视频时间加载完成快进时候视频加载完毕：addEventListener('canplay')当快进或者跳到某段时间点，视频加载完成时监听开始播放：addEventListener('play')每次视频加载完成，开始播放，快进和拖拽都会触发监听开始暂停：addEventListener('pause')每次视频暂停触发更多介绍
H5 视频Video 元素及常用事件 播放 暂停 初始化 设置播放时间禁用下载等相关推荐
- H5新增video标签的常用属性
原文地址:https://blog.csdn.net/nihaio25/article/details/120263499 video 在video标签出现之前,如果想在网页中播放视频或者音频数据是非 ...
- video 标签内 音量_HTML5 视频(Video)元素使用详解
很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: Web站点上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准.今天,大多数视频是通过插 ...
- android mediaplayer 连续播放,android mediaPlayer 设置播放次数
mediaplayer通过 mediaPlayer.setLooping(true); 可以设置循环播放.但是,有时候我们需要设置具体的播放次数,而不是一直循环播放,比如读单词的时候,想要读两次,这个 ...
- html音乐播放器如何添加暂停按钮,HotKey播放/暂停HTML5音乐播放器
这是我用于HTML5音乐播放器的一小部分JavaScript代码.我想知道你们是否可以帮我建立一个HotKey来使用Space键切换播放/暂停按钮.有什么想法吗? CODE: $('.tracksli ...
- Service后台服务控制音乐的播放暂停和停止,播放完自动播放下一曲
//添加获得sd卡的状态权限,和读取sd卡的权限 <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FIL ...
- 解决H5视频(video)音频(audio)不兼容IE8的问题
HTML5 <video> <audio> 不兼容低版本IE的问题,找了很多种解决方式,最终找到一种比较简单易操作的. 解决办法是引入html5media 这款插件. 使用ht ...
- 微信小程序音乐背景图360旋转+点击播放暂停同步音乐播放暂停。
wxml部分 wxss部分 js部分
- kafka常用命令 topic创建 删除 设置保存时间 消费情况 zookeeper 启动停止
启动kafka sh kafka-server-start.sh -daemon ../config/server.properties 停止kafka sh kafka-server-stop.sh ...
- html5音乐播放时间监测,【HTML5】HTML5中video元素事件详解（实时监测当前播放时间）...
//获取视频DOM元素 var myVideo = document.getElementById("myVideo"); myVideo.oncanplay = function ...
最新文章
- “万能钥匙”可以释放大脑:脑刺激个性化医疗的新领域
- 5、学MySQL前必须要了解的数据库专业术语
- kaggle机器学习作业(房价预测)
- Lighting System Design UVA - 11400 动态规划
- 适用于Linux的Windows子系统WSL
- flume从指定网络端口采集数据输出到控制台
- text html artemplete,artTemplate前端模板引擎使用说明
- pagePiling.js - 创建美丽的全屏滚动效果
- C++使用using与typedef定义别名
- 单分支 两路分支和多分支的if结构_程序选择结构
- 蛮牛教育Unity Shader从入门到精通：第十节课Shader问题
- GPS经纬度转84坐标系
- 普通游戏显卡和专业图形显卡的区别
- PHP GD竖排文字写法
- 解决fullpage滑动，控制台的报错提示
- 新茶饮迎来新玩家，柠檬茶酸涩难甜
- 利用百度云API接口上传照片进行植物识别
- 血战力扣752.打开转盘锁
- 手机端的多图片剪辑上传支持手势支持预览
- 怎样合成gif海报？手把手教你一键制作动态海报