1.前言:
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>音频写法二
<audio src="song.ogg" controls="controls"> Your browser does not support the audio tag. </audio>
视频写法一
<video controls="controls" preload="auto"
>
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video>
视频格式
当前,video 元素支持三种视频格式:
格式 | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
<video> 标签的属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 preload=“load” |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
HTML5 <video> - 方法、属性以及事件
下面列出了大多数浏览器支持的视频方法、属性和事件:
方法 | 属性 | 事件 |
---|---|---|
play() | currentSrc | play |
pause() | currentTime | pause |
load() | videoWidth | progress |
canPlayType | videoHeight | error |
duration | timeupdate | |
ended | ended | |
error | abort | |
paused | empty | |
muted | emptied | |
seeking | waiting | |
volume | loadedmetadata | |
height | ||
width |
注释:在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。
通过实例 new Video(); 的JS 代码会用到下来属性来进行控制
Video 对象属性
属性 | 描述 |
---|---|
audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象。 |
autoplay | 设置或返回是否在就绪(加载完成)后随即播放视频。 |
buffered | 返回表示视频已缓冲部分的 TimeRanges 对象。 |
controller | 返回表示视频当前媒体控制器的 MediaController 对象。 |
controls | 设置或返回视频是否应该显示控件(比如播放/暂停等)。 |
crossOrigin | 设置或返回视频的 CORS 设置。 |
currentSrc | 返回当前视频的 URL。 |
currentTime | 设置或返回视频中的当前播放位置(以秒计)。 |
defaultMuted | 设置或返回视频默认是否静音。 |
defaultPlaybackRate | 设置或返回视频的默认播放速度。 |
duration | 返回视频的长度(以秒计)。 |
ended | 返回视频的播放是否已结束。 |
error | 返回表示视频错误状态的 MediaError 对象。 |
height | 设置或返回视频的 height 属性的值。 |
loop | 设置或返回视频是否应在结束时再次播放。 |
mediaGroup | 设置或返回视频所属媒介组合的名称。 |
muted | 设置或返回是否关闭声音。 |
networkState | 返回视频的当前网络状态。 |
paused | 设置或返回视频是否暂停。 |
playbackRate | 设置或返回视频播放的速度。 |
played | 返回表示视频已播放部分的 TimeRanges 对象。 |
poster | 设置或返回视频的 poster 属性的值。 |
preload | 设置或返回视频的 preload 属性的值。 |
readyState | 返回视频当前的就绪状态。 |
seekable | 返回表示视频可寻址部分的 TimeRanges 对象。 |
seeking | 返回用户当前是否正在视频中进行查找。 |
src | 设置或返回视频的 src 属性的值。 |
startDate | 返回表示当前时间偏移的 Date 对象。 |
textTracks | 返回表示可用文本轨道的 TextTrackList 对象。 |
videoTracks | 返回表示可用视频轨道的 VideoTrackList 对象。 |
volume | 设置或返回视频的音量。 |
width | 设置或返回视频的 width 属性的值。 |
Video 对象方法
方法 | 描述 |
---|---|
addTextTrack() | 向视频添加新的文本轨道。 |
canPlayType() | 检查浏览器是否能够播放指定的视频类型。 |
load() | 重新加载视频元素。 |
play() | 开始播放视频。 |
pause() | 暂停当前播放的视频。 |
当前,audio 元素支持三种音频格式:
IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
---|---|---|---|---|---|
Ogg Vorbis | √ | √ | √ | ||
MP3 | √ | √ | √ | ||
Wav | √ | √ | √ |
<audio> 标签的属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的音频的 URL。 |
Audio 对象属性
属性 | 描述 |
---|---|
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 | 设置或返回音频的 preload 属性的值。 |
readyState | 返回音频当前的就绪状态。 |
seekable | 返回表示音频可寻址部分的 TimeRanges 对象。 |
seeking | 返回用户当前是否正在音频中进行查找。 |
src | 设置或返回音频的 src 属性的值。 |
textTracks | 返回表示可用文本轨道的 TextTrackList 对象。 |
volume | 设置或返回音频的音量。 |
Audio 对象方法
方法 | 描述 |
---|---|
addTextTrack() | 向音频添加新的文本轨道。 |
canPlayType() | 检查浏览器是否能够播放指定的音频类型。 |
fastSeek() | 在音频播放器中指定播放时间。 |
getStartDate() | 返回新的 Date 对象,表示当前时间线偏移量。 |
load() | 重新加载音频元素。 |
play() | 开始播放音频。 |
pause() | 暂停当前播放的音频。 |
Media 事件
由媒介(比如视频、图像和音频)触发的事件(适用于所有 HTML 元素,但常见于媒介元素中,比如 <audio>、<embed>、<img>、<object> 以及 <video>):
属性 | 值 | 描述 |
---|---|---|
onabort | script | 在退出时运行的脚本。 |
oncanplay | script | 当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)。 |
oncanplaythrough | script | 当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。 |
ondurationchange | script | 当媒介长度改变时运行的脚本。 |
onemptied | script | 当发生故障并且文件突然不可用时运行的脚本(比如连接意外断开时)。 |
onended | script | 当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)。 |
onerror | script | 当在文件加载期间发生错误时运行的脚本。 |
onloadeddata | script | 当媒介数据已加载时运行的脚本。 |
onloadedmetadata | script | 当元数据(比如分辨率和时长)被加载时运行的脚本。 |
onloadstart | script | 在文件开始加载且未实际加载任何数据前运行的脚本。 |
onpause | script | 当媒介被用户或程序暂停时运行的脚本。 |
onplay | script | 当媒介已就绪可以开始播放时运行的脚本。 |
onplaying | script | 当媒介已开始播放时运行的脚本。 |
onprogress | script | 当浏览器正在获取媒介数据时运行的脚本。 |
onratechange | script | 每当回放速率改变时运行的脚本(比如当用户切换到慢动作或快进模式)。 |
onreadystatechange | script | 每当就绪状态改变时运行的脚本(就绪状态监测媒介数据的状态)。 |
onseeked | script | 当 seeking 属性设置为 false(指示定位已结束)时运行的脚本。 |
onseeking | script | 当 seeking 属性设置为 true(指示定位是活动的)时运行的脚本。 |
onstalled | script | 在浏览器不论何种原因未能取回媒介数据时运行的脚本。 |
onsuspend | script | 在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。 |
ontimeupdate | script | 当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。 |
onvolumechange | script | 每当音量改变时(包括将音量设置为静音)时运行的脚本。 |
onwaiting | script | 当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲更多数据)运行脚本 |
注意:在video 标签微信或浏览器中播放的时候默认会全屏播放,并带有控件,有时会影响显示效果,那么下面两个代码可以取消全屏显示亲测有效
x-webkit-airplay="true"
webkit-playsinline="true"
目前所有主流浏览器均支持video 和 audio标签
如果我们的视频文件是swf的话,上传至腾讯视频空间后给到的链接,是无法自动播放的。
各个手机浏览的VIDEO的操作不同。
iphone 除非本身页面是APP内歉页,配合APP本身对H5 webview的操作,可以实现视频播放不全屏
andriod 6.0以上开始。小米手机等,就开始默认video标签。不会默认全屏播放。
所以在这里点出来。
webkit-playsinline="true"必须配合应用内部的API来使用,单独使用没有意义。 http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser