标签：
（本内容部分节选自《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>
效果图：
————————————————————————————————————————————————————————
当然，多媒体时间不止这么简单的功能。
在利用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
标签：
原文地址：http://www.cnblogs.com/puluotiya/p/4858064.html
