HTML5媒体(音频/视频)

摘要:

  在HTML5出现之前,web媒体大部分通过Flash来实现。这种方式造成了文件大加载慢,影响网站性能,开发难度高,维护麻烦,不易扩展等。这就导致HTML5自己开始支持媒体功能。HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。

浏览器:

从IE9已经开始支持audio和video标签。

Audio:

  <audio> 标签定义声音,比如音乐或其他音频流。

音频格式:

   IE9  Firefox3.5  Opera10.5  Chrome3.0  Safari3.0
 Ogg Vorbis    √  √  √  
 Mp3    √      √  √
 Wav    √  √    √

实例:

<audio src="song.ogg" controls="controls">
  您的浏览器不支持 audio 标签。
</audio>

如果浏览器不支持audio标签将会显示文本内容。为了支持各个浏览器,可以加载多种格式的音频文件,浏览器会播放自己识别的音频文件

<audio controls>
    <source src="song.ogg" type="audio/ogg">
    <source src="song.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 标签。
</audio>

属性:

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload
如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的音频的 URL。

Video:

  <video> 标签定义视屏文件。

视频格式:

   IE9  Firefox3.5  Opera10.5  Chrome5.0  Safari3.0
Ogg    √  √  √  
MPEG 4    √      √  √
WebM    √(4.0)  √(10.6)  √(6.0)  

实例:

<video src="movie.ogg" controls="controls">
  您的浏览器不支持 video 标签。
</video>

如果浏览器不支持audio标签将会显示文本内容。为了支持各个浏览器,可以加载多种格式的视屏文件,浏览器会播放自己识别的视频文件

<video controls="controls" width="500" height="500" autoplay="autoplay" loop="loop" poster="PLMM.jpg">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  您的浏览器不支持 video 标签。
</video>

属性:

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload
如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

同时也支持全局属性

事件:

属性 描述
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 当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲更多数据)运行脚本

Demo:

  下面这个实例重新定义了视频的暂停、播放、快进、快退等方法。项目中可以参考

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 5     </head>
 6     <body>
 7         <video src="movie.webm" controls="controls" poster="PLMM.jpg" width="550px" height="300px" id="video">
 8             您的浏览器不支持 video 标签。
 9         </video>
10         <br />
11         <button onclick="bofang()">播放</button>
12         <button onclick="zanting()">暂停</button>
13         <button onclick="kuaijin()">快进10秒</button>
14         <button onclick="kuaitui()">快退10秒</button>
15         <button onclick="shutup(this)">闭嘴</button>
16         <button onclick="soso()">加速播放</button>
17         <button onclick="yu()">减速播放</button>
18         <button onclick="normal()">正常播放</button>
19         <button onclick="upper()">提高嗓门</button>
20         <button onclick="lower()">降低嗓门</button>
21         <script>
22             //获取对应的video标签
23             var video=document.getElementById(‘video‘);
24             //播放方法
25             function bofang(){
26                 video.play();
27             }
28             //暂停方法
29             function zanting(){
30                 video.pause();
31             }
32             //快进10秒
33             function kuaijin(){
34                 video.currentTime+=10;
35             }
36             //快退10秒
37             function kuaitui(){
38                 video.currentTime-=10;
39             }
40             //静音按钮
41             function shutup(obj){
42                 if(video.muted){
43                     obj.innerHTML="闭嘴";
44                     video.muted=false;
45                 }else{
46                     obj.innerHTML="张嘴";
47                     video.muted=true;
48                 }
49             }
50             //加速播放(3倍速度)
51             function soso(){
52                 video.playbackRate=3;
53             }
54             //慢速播放(慢三倍)
55             function yu(){
56                 video.playbackRate=1/3;
57             }
58             //正常倍速
59             function normal(){
60                 video.playbackRate=1;//默认的播放倍速是1
61             }
62             //调高声音
63             function upper(){
64                 video.volume+=0.2;//声音值的范围是0-1
65             }
66             //调低声音
67             function lower(){
68                 video.volume-=0.2;
69             }
70         </script>
71     </body>
72 </html>

效果如下:

附录:

HTML5 Audio/Video 方法

方法 描述
addTextTrack() 向音频/视频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频/视频类型
load() 重新加载音频/视频元素
play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频

HTML5 Audio/Video 属性

属性 描述
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 设置或返回音频/视频的音量

HTML5 Audio/Video 事件

事件 描述
abort 当音频/视频的加载已放弃时
canplay 当浏览器可以播放音频/视频时
canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange 当音频/视频的时长已更改时
emptied 当目前的播放列表为空时
ended 当目前的播放列表已结束时
error 当在音频/视频加载期间发生错误时
loadeddata 当浏览器已加载音频/视频的当前帧时
loadedmetadata 当浏览器已加载音频/视频的元数据时
loadstart 当浏览器开始查找音频/视频时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
progress 当浏览器正在下载音频/视频时
ratechange 当音频/视频的播放速度已更改时
seeked 当用户已移动/跳跃到音频/视频中的新位置时
seeking 当用户开始移动/跳跃到音频/视频中的新位置时
stalled 当浏览器尝试获取媒体数据,但数据不可用时
suspend 当浏览器刻意不获取媒体数据时
timeupdate 当目前的播放位置已更改时
volumechange 当音量已更改时
waiting 当视频由于需要缓冲下一帧而停止
时间: 2024-11-10 14:32:27

HTML5媒体(音频/视频)的相关文章

【HTML5】音频视频

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <object src="img/鸟1.jpg">当前浏览器不支持此对象</object> 9 <embed src="mp4/a.m

HTML5音频视频总结

音频格式 视频 音频 ogg ogg mp4 mp3 webm wav video标签属性 属性 值 作用 controls controls HTML5 默认视频样式 autoplay autoplay 自动播放属性 loop loop 循环播放 poster 图片路径 设置视频初始背景图片 video的API方法  play()  开始播放音频.视频  pause()  暂停播放  RequestFullScreen() 全屏模式 mozRequestFullScreen() moz内核 w

HTML5之音频与视频

HTML5之音频与视频 l  标签 ?     audio .video ?     source l  视频容器 ?     容器文件,类似于压缩了一组文件 –    音频轨道 –    视频轨道 –    元数据:封面,标题,字幕等 –    格式:.avi..flv..mp4..mkv..ogv等 l  编解码器 ?     原始的视频容器非常大,添加需编码,播放需解码 ?     音频编解码器 –    AAC.MPEG-3.Ogg Vorbis ?     视频编解码器 –    H.

我的启蒙--HTML5 第二章 音频视频

音频视频 标签如下 (1)audio音频 (2)video视频 媒体元素属型 controls : 显示或隐藏用户控制界面 autoplay : 媒体是否自动播放 loop : 媒体是否循环播放 currentTime : 开始到播放现在所用的时间 duration : 媒体总时间(只读) volume : 0.0-1.0的音量相对值 muted : 是否静音 paused : 媒体是否暂停(只读) ended : 媒体是否播放完毕(只读) error : 媒体发生错误的时候,返回错误代码 (只

HTML5(简介、视频、音频、画布)

HTML5(简介.视频.音频.画布) HTML5目标是替换1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到匹配当代的网络需求.HTML5将成为HTML\XHTML\HTML DOM的新标准. 广义论及HTML5时,实际指的是包括HTML.CSS和JavaScript在内的一套技术组合.它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务(Plug-in-Based Rich Internet Application,RIA),例如

HTML5学习之视频与音频(三)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <!-- 当

HTML5(二)音频视频画布

HTML5 Audio(音频) 定义和用法 <audio src="someaudio.wav" controls="controls"> 您的浏览器不支持 audio 标签. </audio> 提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息. 音频格式的MIME类型 Format MIME-type MP3 audio/mpeg Ogg audio/ogg Wav audio/wav 属性 属性

css总结16:HTML5 多媒体音频(Audio)视频(video )

1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3">  2 HTML5 <audio> 音频播放属性: 2-1 audio  常用属性: autoplay 自动播放   loop 循环 controls 控制器 例子: <audio controls>  <source src="horse.mp3" ty

HTML5之音频audio知识

HTML总结(二)[HTML5之音频] HTML5重点知识之音频 audio标签兼容性: Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <audio> 标签. 注释:Internet Explorer 8 以及更早的版本不支持 <audio> 标签. audio的常用属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 dura