（本内容部分节选自《HTML 5从入门到精通》)
就是新增了audio和video，它们有很多属性，我也不想在此一一探究，不过可以看一下下面的示例：
效果图：
代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>多媒体</title> 6 </head> 7 <!--In html4--> 8 <object width="100" height="80"> 9 <param name="movie" value="http://v.youku.com/v_show/id_XMTM0Nzg4OTA1Ng==.html?tpa=dW5pb25faWQ9MTAzNjY3XzEwMDAwMV8wMV8wMQ" /> 10 <param name="allowFullScreen" value="true"/> 11 <param name="allowscriptaccess" value="always"/> 12 <embed src="http://v.youku.com/v_show/id_XMTM0Nzg4OTA1Ng==.html?tpa=dW5pb25faWQ9MTAzNjY3XzEwMDAwMV8wMV8wMQ" type="application/x-shockwave-flash" allowscriptaccess="always" allowFullScreen="true" width="425" height="344"> 13 </embed> 14 </object> 15 <hr color="#93080A" size="+1"> 16 <!--音频播放,如果没有controls这项，可能不会显示控件--> 17 <audio controls="controls" autoplay="autoplay" perload="auto" loop="loop" 18 src="http://i.96x.cn/2015/7yue_2651.cn/%E9%BB%98%20%28Live%29%20-%20%E5%91%A8%E6%9D%B0%E4%BC%A6.mp3">a ou 您的浏览器不支持audio</audio> 19 <hr color="#93080A" size="+1"> 20 <video src="video/Frozen.Fever.mkv" controls="controls" width="425" height="344" poster="images/无法加载.jpg"></video> 21 </html> 22
多媒体
————————————————————————————————————————————————————————
当然，很麻烦的是，不是所有浏览器支持的功能都足够多，所以我们可以通过以下方法试试：
canPlayType(type)方法测试浏览器是否支持指定的媒介类型，该方法的定义如下所示。。
var support=videoElement.canPlayType(type);
语法解释：videoElement表示页面上的video元素或audio元素。
参数说明：type参数，指定方法与source元素的type参数的指定方法相同，都用播放文件的MIME类型来指定，可以在指定的字符串中加上表示媒体编码格式的codes参数。该方法返回3个可能值（均为浏览器判断的结果）：
空字符串：浏览器不支持此种媒体类型；
maybe：浏览器可能支持此种媒体类型；
probably：浏览器确定支持此种媒体类型.
————————————————————————————————————————————————————————
如果人为想要控制事件呢？
比如，人为加入暂停或播放键（测试，在IE下格式有效）
代码：
1 <video id="testvideo" width="640" height="360" src="video/Frozen.Fever.mov"> 2 </video> 3 <pp> 4 <button onClick="play()">播放</button> 5 <button onClick="pause()">暂停</button>
主体代码
涉及函数功能如下：
1 <script language="javascript">
2 var video;
3 <!--使用的时候，要先再body标签 onload-->
4 function init()
5 {
6 video=document.getElementById("testvideo");
7 video.addEventListener("ended", function()
8 {
9 alert("播放结束");
10 }, true);
11 }
12 function play()
13 {
14 video.play();
15 }
16 function pause()
17 {
18 video.pause();
19 }
20 </script>
function
效果图：
————————————————————————————————————————————————————————
当然，多媒体时间不止这么简单的功能。
在利用video元素或audio元素读取或播放媒体数据的时候，会触发一系列的事件，如果用JavaScript脚本来捕捉这些事件，就可以对这些事件进行处理了。对于这些事件的捕捉及其处理，可以按两种方式来进行。
一种是监听的方式：addEventListener(“事件名”,处理函数,处理方式)方法来对事件的发生进行监听，该方法的定义如下所示。
videoElement.addEventListener(type,listener,useCapture);
语法说明：videoElement表示页面上的video元素或audio元素。type为事件名称，listener表示绑定的函数，useCapture是一个布尔值，表示该事件的响应顺序，该值如果为true，则浏览器采用Capture响应方式，如果为false，浏览器采用bubbing响应方式，一般采用false，默认情况下也为false。
另一种是直接赋值的方式。事件处理方式为JavaScript脚本中常见的获取事件句柄的方式。
————————————————————————————————————————————————————————
我们将介绍一下浏览器在请求媒体数据、下载媒体数据、播放媒体数据一直到播放结束这一系列过程中，到底会触发哪些事件。
?loadstart事件：浏览器开始请求媒介；
?progress事件：浏览器正在获取媒介；
?suspend事件：浏览器非主动获取媒介数据，但没有加载完整个媒介资源；
?abort事件：浏览器在完全加载前中止获取媒介数据，但是并不是由错误引起的；
?error事件：获取媒介数据出错；
?emptied事件：媒介元素的网络状态突然变为未初始化；可能引起的原因有两个：1、载入媒体过程中突然发生一个致命错误；2、在浏览器正在选择支持的播放格式时，又调用了load方法重新载入媒体。
?stalled事件：浏览器获取媒介数据异常；
?play事件：即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay（自动播放）属性。
?pause事件：暂停播放，当执行了pause方法时触发。
?loadedmetadata事件：浏览器获取完媒介资源的时长和字节
?loadeddata事件：浏览器已加载当前播放位置的媒介数据；
?waiting事件：播放由于下一帧无效（例如未加载）而已停止（但浏览器确认下一帧会马上有效）；
?playing事件：已经开始播放
?canplay事件：浏览器能够开始媒介播放，但估计以当前速率播放不能直接将媒介播放完（播放期间需要缓冲）；
?canplaythrough事件：浏览器估计以当前速率直接播放可以直接播放完整个媒介资源（期间不需要缓冲）；
?seeking事件：浏览器正在请求数据（seeking属性值为true）；
?seeked事件：浏览器停止请求数据（seeking属性值为false）；
?timeupdate事件：当前播放位置（currentTime属性）改变，可能是播放过程中的自然改变，也可能是被人为地改变，或由于播放不能连续而发生的跳变；
?ended事件：播放由于媒介结束而停止；
?ratechange事件：默认播放速率（defaultPlaybackRate属性）改变或播放速率（playbackRate属性）改变；
?durationchange事件：媒介时长（duration属性）改变
?volumechange事件：音量（volume属性）改变或静音（muted属性）。
————————————————————————————————————————————————————————
利用这些属性，可以做很多行为检测（eventListener）
eg：（好像没成功。。。。）
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>多媒体</title>
6 <script language="javascript">
7 var video = document.getElementById(‘video0‘)[0],
8 <!--通过querySelector方法获取div标签中的class值，然后赋值给变量-->
9 wrapper = document.querySelector(‘.videochrome‘),
10 buffer = document.querySelector(‘.videochrome.controls.buffer‘),
11 playhead = buffer.querySelector(‘.playhead‘),
12 play = wrapper.querySelector(‘.play‘),
13 duration = wrapper.querySelector(‘.duration‘),
14 currentTime = playhead.querySelector(‘span‘);
15
16 video.addEventListener(‘loadeddata‘, canplay, false);//监听准备播放事件
17 function canplay(){
18 initControls();
19 }
20 function initControls(){
21 duration.innerHTML = asTime(video.duration);//播放时间以分和秒的形式输出
22 play.onclick = function(){
23 if(video.ended){//如果播放结束，从0开始，不然，三元运算决定播放还暂停
24 video.currentTime = 0;
25 }
26 video[video.paused ? ‘play‘ : ‘pause‘]();
27 };
28 }
29 function asTime(t){
30 t = Math.round(t);
31 var s = t % 60;
32 var m = ~~(t / 60);
33 return m +‘:‘+ two(s);
34 }
35 function two(s){
36 /*--if(s<10){
37 return "0"+s;
38 }
39 else{
40 return s;
41 }*/
42 s += "";
43 if(s.length<2) s="0"+s;
44 return s;
45 }
46
47 video.addEventListener(‘play‘, playEvent, false);//事件播放监听
48 video.addEventListener(‘pause‘, pausedEvent, false);
49 video.addEvnetListener(‘ended‘, function(){
50 this.pause();
51 },false);
52 function playEvent(){play.innerHTML = ‘暂停‘;}
53 function pausedEvent(){play.innerHTML = ‘播放‘;}
54
55 video.addEventListener(‘durationchange‘, updateSeekable, false);
56 video.addEventListenre(‘timeupdate‘, updatePlayhead, false);
57 function updateSeekable(){duration.innerHTML=asTime(video.duration);}
58 function updatePlayhead(){currentTime.innerHTML=asTime(video.currentTime);}
59 </script>
60 </head>
61 <body>
62 <video controls id="video0" width="425" height="344" src="video/Frozen.Fever.mov"></video>
63 <div class="videochrome paused">
64 <div class="controls">
65 <div class="scrub">
66 <table width="150" border="0" cellpadding="0" cellspacing="0">
67 <tr>
68 <td width="50" scope="row"><button class="play" title="play">播放</button></td>
69 <td width="50" align="center"><div class="duration">0:00</div></td>
70 <td width="50" align="center"><div class="loaded"><div class="buffer"><div class="playhead"><span>0:00</span></div></div></div></td>
71 </tr>
72 </table>
73 </div>
74 </div>
75 </div>
76 </body>
77 </html>
78