audio标签控制音量_HTML5中audio与video标签的使用
最近做的微信分享页面中有大量的语音播放和视频展示,相关的好多方法属性以前都没接触过,现在记录下来!
1.首先,了解关于两个标签的基本信息:
两个标签的基本属性:
属性描述
audioTracks返回表示可用音轨的AudioTrackList对象
autoplay设置或返回是否在加载完成后随即播放音频/视频
buffered返回表示音频/视频已缓冲部分的TimeRanges对象
controller返回表示音频/视频当前媒体控制器的MediaController对象
controls设置或返回音频/视频是否显示控件(比如播放/暂停等)
crossOrigin设置或返回音频/视频的CORS设置
currentSrc返回当前音频/视频的URL
currentTime设置或返回音频/视频中的当前播放位置(以秒计)
defaultMuted设置或返回音频/视频默认是否静音
defaultPlaybackRate设置或返回音频/视频的默认播放速度
duration返回当前音频/视频的长度(以秒计)
ended返回音频/视频的播放是否已结束
error返回表示音频/视频错误状态的MediaError对象
loop设置或返回音频/视频是否应在结束时重新播放
mediaGroup设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)
muted设置或返回音频/视频是否静音
networkState返回音频/视频的当前网络状态
paused设置或返回音频/视频是否暂停
playbackRate设置或返回音频/视频播放的速度
played返回表示音频/视频已播放部分的TimeRanges对象
preload设置或返回音频/视频是否应该在页面加载后进行加载
readyState返回音频/视频当前的就绪状态
seekable返回表示音频/视频可寻址部分的TimeRanges对象
seeking返回用户是否正在音频/视频中进行查找
src设置或返回音频/视频元素的当前来源
startDate返回表示当前时间偏移的Date对象
textTracks返回表示可用文本轨道的TextTrackList对象
videoTracks返回表示可用视频轨道的VideoTrackList对象
volume设置或返回音频/视频的音量
两个标签的基本方法:
方法描述
addTextTrack()向音频/视频添加新的文本轨道
canPlayType()检测浏览器是否能播放指定的音频/视频类型
load()重新加载音频/视频元素
play()开始播放音频/视频
pause()暂停当前播放的音频/视频
两个标签中的事件:
事件描述
abort当音频/视频的加载已放弃时
canplay当浏览器可以播放音频/视频时
canplaythrough当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange当音频/视频的时长已更改时
emptied当目前的播放列表为空时
ended当目前的播放列表已结束时
error当在音频/视频加载期间发生错误时
loadeddata当浏览器已加载音频/视频的当前帧时
loadedmetadata当浏览器已加载音频/视频的元数据时
loadstart当浏览器开始查找音频/视频时
pause当音频/视频已暂停时
play当音频/视频已开始或不再暂停时
playing当音频/视频在已因缓冲而暂停或停止后已就绪时
progress当浏览器正在下载音频/视频时
ratechange当音频/视频的播放速度已更改时
seeked当用户已移动/跳跃到音频/视频中的新位置时
seeking当用户开始移动/跳跃到音频/视频中的新位置时
stalled当浏览器尝试获取媒体数据,但数据不可用时
suspend当浏览器刻意不获取媒体数据时
timeupdate当目前的播放位置已更改时
volumechange当音量已更改时
waiting
当视频由于需要缓冲下一帧而停止
2.在项目中的使用:在视频没有加载出来的时候需要显示这个视频的第一帧图片,我这里第一帧图片是后台传过来的,查了相关资料原来video标签有个属性poster专门用来显示视频的第一帧图片,相当于视频封面图。poster属性用于设置或返回视频的poster属性值。这个属性描述了在视频加载时或在用户点击播放按钮前显示的图片。如果不包含该属性,视频的第一帧将被用来代替显示。
{{item.fragment_text_describe}}
在音频播放的时候浏览器不一定支持该种类型的音频,所以要做一个判断:用canPlayType()方法检查浏览器是否能播放指定的音频/视频类型。canPlayType()方法可返回下列值之一:
"probably"-浏览器最可能支持该音频/视频类型
"maybe"-浏览器也许支持该音频/视频类型
""-(空字符串)浏览器不支持该音频/视频类型
使用语法:
audio.canPlayType("mp3"))
本文转载自中文网
audio标签控制音量_HTML5中audio与video标签的使用相关推荐
- audio标签控制音量_HTML5中audio标签的使用
HTML5中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. autoplay:设置音频是否自动播放. loop:设置音频是否要循环播放. control ...
- audio标签控制音量_html中audio标签的使用
在HTML5标准网页里面,我们可以运用audio标签来完成我们对声音的调用及播放.以下是最经常见到的运用HTML5三种基本格式: 1.最少的代码 2.带有不兼容提醒的代码 Your browser d ...
- HTML5中关于解决video标签禁止右键和下载视频的办法
近期做了一个关于在线文件管理的项目,类似网盘,基本功能包含用户.消息.项目.分享.文件提取.收藏.回收站等主要功能,领挖还有一些office.压缩包.图片.文本.音频和视频的预览功能. 音频我使用的是 ...
- html5 audio标志改变音量,HTML5之Audio(二)—— processor调节音量
Audio var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // ...
- html嵌入audio格式不支持,html5中audio支持音频格式的解决方法
HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持.不是所有的浏览器都支持MP ...
- video 标签内 音量_HTML5 视频(Video)元素使用详解
很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: Web站点上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准.今天,大多数视频是通过插 ...
- html5标签属性大全_HTML5中video标签如何使用
HTML5中的video标签用于播放视频文件的,在video标签中我们可以设置窗口的宽高,视频的自动播放,循环播放以及视频的封面图片等等 HTML5是下一代HTML,新增了许多新的标签,这些标签实现了 ...
- vue中使用h5 video标签实现弹窗播放本地视频
参考h5 < video >标签的用法 在开发过程中主要涉及到以下几个需要关注的点 1.弹窗的打开关闭 父组件中使用.sync绑定visible属性,可直接在子组件中关闭弹窗更新父组件传入 ...
- 微信浏览器video标签没有封面_微信h5页面video标签用法总结
最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题:在微信浏览器内播放时,视频会自动全屏 如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设置 ...
最新文章
- /xiaolei.php|martin_十步解决Php Utf-8编码(转贴)
- Python3.x和Python2.x的区别
- python怎么画简单图片-小白艰难的Python图像的绘制
- 关于iOS 3D touch 指纹验证的随笔
- mysql grant查看用户权限命令
- 2021数学建模C题思路数据挖掘
- Tensorflow深度学习应用(进阶篇)
- DG导入mysql依赖包_MySql导入导出数据库(含远程导入导出)
- 要闻君说:华云数据“豪气”收购超融合厂商Maxta;VMware有意“携手”微软Azure云;亚马逊获3亿美元云计算合同...
- thinkphp 多字段排序
- Linux snmp 时间戳,linux snmp计数器汇总
- 云计算的发展趋势_云计算的未来发展趋势
- iOS 崩溃 问题 警告 错误2
- 随机信号分析基础——例题篇(例题3.1)
- html5搜狗浏览器缓存文件夹,搜狗浏览器中怎么查找之前看过的视频文件?
- 梦工厂将在红帽峰会畅谈云计算心得
- Voldemort的FailureDetector设计
- MODIS数据wget下载
- python:.py文件转.dll文件(.pyd文件)
- 动态规划 -- 二维数组中左上到右下的最短路径和。
热门文章
- go gin框架:请求静态图片资源(可用于搭建图床等应用)
- go map的定义及使用
- linux安装minikube(Ubuntu/deepin)
- Spark on k8s: 通过hostPath设置SPARK_LOCAL_DIRS加速Shuffle
- ubuntu安装cgroup-tools
- linux创建crontab定时任务
- ubuntu18.04安装python3.7并将python3指向python3.7
- Java客户端操作zookeeper:获取/节点的子节点代码示例
- Python Django 配置静态资源访问(settings配置)
- vue实现页面权限显示_vue实现菜单权限控制