HTML5 API详解(13):video/audio 视频/音频
video的使用方法:
<video autoplay="autoplay" controls="controls" width="800" muted="muted" loop="loop" poster="/images/w3html5.gif">
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
你的浏览器不支持video标签
</video>
视频常用标签属性:
autoplay:自动播放
controls:视频操作控件
muted:静音
loop:循环播放
poster:加载完成前显示的图片
音频的使用方法
<audio controls="controls" autoplay="autoplay" muted="muted" loop="loop">
<source src="http://www.w3cschool.cc/try/demo_source/horse.mp3" type="audio/mpeg">
<source src="http://www.w3cschool.cc/try/demo_source/horse.ogg" type="audio/ogg">
</audio>
音频常用标签属性:
autoplay:自动播放
controls:视频操作控件
muted:静音
loop:循环播放
视频/音频共同特性
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
你的浏览器不支持video标签
可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息
HTML 音频/视频 方法
方法 | 描述 |
addTextTrack() | 向音频/视频添加新的文本轨道。 |
canPlayType() | 检测浏览器是否能播放指定的音频/视频类型。 |
load() | 重新加载音频/视频元素。 |
play() | 开始播放音频/视频。 |
pause() | 暂停当前播放的音频/视频。 |
HTML 音频/视频属性
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 | 设置或返回音频/视频的音量。 |
HTML 音频/视频事件
事件 | 描述 |
abort | 当音频/视频的加载已放弃时触发。 |
canplay | 当浏览器可以开始播放音频/视频时触发。 |
canplaythrough | 当浏览器可在不因缓冲而停顿的情况下进行播放时触发。 |
durationchange | 当音频/视频的时长已更改时触发。 |
emptied | 当目前的播放列表为空时触发。 |
ended | 当目前的播放列表已结束时触发。 |
error | 当在音频/视频加载期间发生错误时触发。 |
loadeddata | 当浏览器已加载音频/视频的当前帧时触发。 |
loadedmetadata | 当浏览器已加载音频/视频的元数据时触发。 |
loadstart | 当浏览器开始查找音频/视频时触发。 |
pause | 当音频/视频已暂停时触发。 |
play | 当音频/视频已开始或不再暂停时触发。 |
playing | 当音频/视频在因缓冲而暂停或停止后已就绪时触发。 |
progress | 当浏览器正在下载音频/视频时触发。 |
ratechange | 当音频/视频的播放速度已更改时触发。 |
seeked | 当用户已移动/跳跃到音频/视频中的新位置时触发。 |
seeking | 当用户开始移动/跳跃到音频/视频中的新位置时触发。 |
stalled | 当浏览器尝试获取媒体数据,但数据不可用时触发。 |
suspend | 当浏览器刻意不获取媒体数据时触发。 |
timeupdate | 当目前的播放位置已更改时触发。 |
volumechange | 当音量已更改时触发。 |
waiting | 当视频由于需要缓冲下一帧而停止时触发。 |
HTML5 API详解(13):video/audio 视频/音频相关推荐
- HTML5 API详解(5):Page Visibility API帮您省流量,提高体验
页面可见性API可以让你知 道一个页面什么时候是隐藏的,什么时候是显示的.当页面被最小化或者被切换成后台标签页时,浏览器会触发一个 visibilitychange事件,告诉你用户已经看不到这个页面了 ...
- HTML5 API详解(6):getUserMedia实现拍照功能
注意:获取摄像头影像主要是通过navigator.getUserMedia这个接口,在caniuse.com上查询一下这个接口的支持情况,可以看到目前只有Chrome和Firefox支持得比较好,而且 ...
- HTML5 API详解(18):IndexedDB 本地存储
Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了Local Storage和Session Storage与IndexedDB.Web Storage使用简单 ...
- HTML5 API详解(17):Web SQL DataBase本地数据库
Web SQL Database是一个已经废弃的规范,但是鉴于除了IE和Firefox,其他浏览器都已经实现了Web SQL Database,并且它还具有一些HTML5 Storage所不具有的特性 ...
- HTML5 API详解(16):web socket 全双工通信
目前实时Web应用的实现方式,大部分是围绕轮询和其他服务器端推送技术展开的,其中最著名的是Comet.Comet技术可以让服务器主动以异步方式向客户端推送数据. 使用轮询时,浏览器定期发送HTTP请求 ...
- HTML5 API详解(15):History 不刷新也可以实现网页跳转
HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...
- HTML5 API详解(14):Notification 实现桌面提醒
桌面提醒功能可以在窗口隐藏甚至是浏览器最小化(不被激活)的情况下,依然可以对用户进行信息通信,采用的方式就是在电脑桌面的右下角弹出消息提示框.这样的一个功能可以使用在一些消息推送的场景下.不过,虽然h ...
- HTML5 API详解(3):为何网页上要增加Battery电池状态API
手机自身的电源管理已经相当不错了,那为何网页上还要增加一个HTML5 Battery电池状态API呢? 随着HTML5以及CSS3技术支持与发展,以及手机越来越高性能带来的可行性.移动端的页面显然会越 ...
- HTML5 API详解(12):canvas画布API提供的内容很丰富啊~
不考虑代码质量的话,一般来说css3>canvas>纯js. 1. css3动画是独立与js线程的,js的运算操作不会阻塞css3的动画,所以在系统cpu占用率较高的时候,css3的动画性 ...
最新文章
- PHP数据库连接池SQL Relay安装使用
- 生命天书”破译20年,生命科学由此走向“大数据时代”
- 最新2018年全球DevOps薪资报告:行业和团队选择指南
- 热传递 matlab,利用matlab程序解决热传导问题
- 开发者需要理解的分布式原语
- bitmap 转byte[]后读取_闲谈redis的bitmap
- 函数传参string_C/C++的三种函数传值方式及其区别
- ci/cd heroku_在GitLab上设置CI / CD以在Heroku上部署Python Flask应用程序
- java流程图什么代表活动_举例分析流程图与活动图的区别与联系
- 第十二章——SQLServer统计信息(3)——发现过期统计信息并处理
- php导航栏代码子菜单找不到,php – 下拉导航菜单,显示每个类别的最新帖子
- LeetCode 74. Search a 2D Matrix
- javascript--Math相关
- html 页面加载中 请稍候,html 提示“数据在加载中,请稍后……”
- 9、网友问答----有关清零问题------------------labview宝典
- 最新Erphpdown v13.11modown8.02主题破jie版去授权无域名限制版本
- Warship+NPOI导入导出组件介绍【对象化】
- 七夕到了 —— 属于 Java 的浪漫,拿去吧~ 祝表白成功
- 二叉搜索树的删除操作详解,图文并茂,化繁为简
- 多因子策略-APT模型