html5多媒体Video/Audio
video:
- OGG = 带有Theora视频编码+Vorbis音频编码的ogg文件 浏览器支持:F,C,O
- MPEG4 = 带有H.264视频编码+AAC音频编码的MPEG4文件 浏览器支持:S,C
- WebM = 带有VP8视频格式编码+Vorbis音频编码的WebM格式 浏览器支持:I、F、C、O
<video src="http://www.bigaody.com" controls="controls"></video>
<video src="文件地址" controls="controls">
您的浏览器暂不支持video标签。播放视频
</video>
<video controls="controls" width="300">
<source src="move.ogg" type='video/ogg; codecs="theora, vorbis"'>
<source src="move.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="move.webm" type='video/webm; codecs="vp8, vorbis"'> 您的浏览器暂不支持video标签。播放视频
</video>
属性 | 描述 |
---|---|
audioTracks |
返回表示可用音频轨道的 AudioTrackList 对象。 |
autobuffer | 设置为浏览器缓冲方式,不设置autoplay才有效 |
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 属性的值。 |
方法 | 描述 |
---|---|
addTextTrack() | 向视频添加新的文本轨道。 |
canPlayType() | 检查浏览器是否能够播放指定的视频类型。 |
load() | 重新加载视频元素。 |
play() | 开始播放视频。 |
pause() | 暂停当前播放的视频。 |
audio
当前,audio 元素支持三种音频格式:
IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
---|---|---|---|---|---|
Ogg Vorbis (免费) | √ | √ | √ | ||
MP3 (收费) | √ | √ | √ | ||
Wav(收费) | √ | √ | √ |
属性 | 描述 |
---|---|
audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象。 |
autoplay | 设置或返回是否在就绪(加载完成)后随即播放音频。 |
buffered | 返回表示音频已缓冲部分的 TimeRanges 对象。 |
controller | 返回表示音频当前媒体控制器的 MediaController 对象。 |
controls | 设置或返回音频是否应该显示控件(比如播放/暂停等)。 |
crossOrigin | 设置或返回音频的 CORS 设置。 |
currentSrc | 返回当前音频的 URL。 |
currentTime | 设置或返回音频中的当前播放位置(以秒计)。 |
defaultMuted | 设置或返回音频默认是否静音。 |
defaultPlaybackRate | 设置或返回音频的默认播放速度。 |
duration | 返回音频的长度(以秒计)。 |
ended | 返回音频的播放是否已结束。Boolean类型 |
error | 返回表示音频错误状态的 MediaError 对象。 |
loop | 设置或返回音频是否应在结束时再次播放。Boolean类型 |
mediaGroup | 设置或返回音频所属媒介组合的名称。 |
muted | 设置或返回是否关闭声音。Boolean类型 |
networkState | 返回音频的当前网络状态。 |
paused | 设置或返回音频是否暂停。 |
playbackRate | 设置或返回音频播放的速度。 |
played | 返回表示音频已播放部分的 TimeRanges 对象。 |
preload | 设置或返回音频的 preload 属性的值。音频在页面加载时预加载,并预备播放 |
readyState | 返回音频当前的就绪状态。 |
seekable | 返回表示音频可寻址部分的 TimeRanges 对象。 |
seeking | 返回用户当前是否正在音频中进行查找。 |
src | 设置或返回音频的 src 属性的值。 |
textTracks | 返回表示可用文本轨道的 TextTrackList 对象。(目前主流浏览器都不支持) |
volume | 设置或返回音频的音量。 |
autoplay 当歌曲加载后自动播放,但是只有pc端可以实现 移动端不行(pc端的浏览器要比移动端的完善很多,对有些属性支持也会好很多)
以上是标签内的属性 当然也可以作为对象属性来调取控制auido.*
语法
在 HTML 中:
<audio src="文件地址" controls="controls"></audio>
< audio src="文件地址" controls="controls">
您的浏览器暂不支持audio标签。播放视频
</ audio>
< audio controls="controls" >
<source src="happy.MP3" type="video/mpeg" >
<source src="happy.ogg" type="video/ogg" >
您的浏览器暂不支持audio标签。播放视频
</ audio>
注:controls为Boolean类型,controls="controls"表示true,因为Boolean("controls")
= true,字符串不为空都为true
var myAudio = document.getElementById("myAudio");
myAudio.setAttribute("loop",true);
myAudio.play();
audio不单单是个标签 他也是window下的一个对象,对象就有属性和方法,作为对象他有哪些常用的方法呢
11.Audio 对象方法
方法 | 描述 |
---|---|
addTextTrack() | 向音频添加新的文本轨道。 |
canPlayType() | 检查浏览器是否能够播放指定的音频类型。 |
fastSeek() | 在音频播放器中指定播放时间。 |
getStartDate() | 返回新的 Date 对象,表示当前时间线偏移量。 |
load() | 重新加载音频元素。 |
play() | 开始播放音频。 |
pause() | 暂停当前播放的音频。 |
详情: http://www.w3school.com.cn/jsref/dom_obj_audio.asp
音频/视频 DOM 事件
当音频/视频处于加载过程中时,会依次发生以下事件:
loadstart 当浏览器开始寻找指定的音频/视频时,会发生 loadstart 事件。即当加载过程开始时。
durationchange 当指定音频/视频的时长数据发生变化时,发生 durationchange 事件。
当音频/视频加载后,时长将由 "NaN" 变为音频/视频的实际时长。
loadedmetadata 当指定的音频/视频的元数据已加载时,会发生 loadedmetadata 事件。
音频/视频的元数据包括:时长、尺寸(仅视频)以及文本轨道
loadeddata 当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时,会发生 loadeddata 事件。
progress 当浏览器正在下载指定的音频/视频时,会发生 progress 事件。
canplay 当浏览器能够开始播放指定的音频/视频时,会发生 canplay 事件。
canplaythrough 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件。
在 HTML 中:
<audio|video onprogress="SomeJavaScriptCode">
在 JavaScript 中:audio|video.onprogress=SomeJavaScriptCode;
使用 addEventListener():audio|video.addEventListener("progress", function()
{
//SomeJavaScriptCode
}
);
上一篇: 【排序算法-4】直接插入排序法
推荐阅读
-
html5多媒体Video/Audio
-
动态内容注入,使用HTML5 Canvas 和Video
-
html5中的video标签在iphone,ipad中播放有何中不同? 博客分类: HTML html5videoaudioipadiphone
-
验证是否支持html5的Video标签及MP4视频播放 博客分类: web前端 html5验证videoMP4javascript
-
初识html5 博客分类: html5 html5video
-
html5之
-
由html5视频播放引发的总结 博客分类: html5视频技术 html5video视频
-
HTML5新特性--video视频标签 博客分类: html5 html5video
-
HTML5 Video和audio的使用 博客分类: Html+CSS+HTML5 HTML5Videoaudio
-
html5之Video事件api探究 博客分类: html5 video