网页设计与开发第6章多媒体播放技术.ppt

function play() { video.play(); // 播放视频 } function pause() { video.pause(); //暂停播放 } /script /head body onload=init() !—可以添加controls属性来显示浏览器自带的播放用的控制条。 -- video id=video1 src=2.ogv /videobr/ button onclick=play()播放/button button onclick=pause()暂停/button /body /html 本例的运行效果如图6-2所示。 图6-2 媒体播放实例 使用canPlayType(type)方法测试浏览器是否支持指定的媒介类型，该方法的定义如下。 var support=videoElement.canPlayType(type); videoElement表示页面上的video元素或audio元素。该方法使用一个参数type，该参数的指定方法与source元素的type参数的指定方法相同，都用播放文件的MIME类型来指定，可以在指定的字符串中加上表示媒体编码格式的codes参数。 该方法返回3个可能值（均为浏览器判断的结果）。 空字符串：浏览器不支持此种媒体类型； maybe：浏览器可能支持此种媒体类型； probably：浏览器确定支持此种媒体类型。 6.3.2 canPlayType(type)方法 6.4 多媒体元素重要事件 6.4.1 事件处理方式 6.4.2 事件介绍 6.4.3 事件示例 在利用video元素或audio元素读取或播放媒体数据的时候，会触发一系列的事件，如果JavaScript脚本来捕捉这些事件，就可以对这些事件进行处理了。对于这些事件的捕捉及其处理，可以按两种方式来进行。 一种是监听的方式：addEventListener(“事件名”,处理函数,处理方式)方法来对事件的发生进行监听，该方法的定义如下。 videoElement.addEventListener(type,listener,useCapture); videoElement表示页面上的video元素或audio元素。type为事件名称，listener表示绑定的函数，useCapture是一个布尔值，表示该事件的响应顺序，该值如果为true，则浏览器采用Capture响应方式，如果为false，浏览器采用bubbing响应方式，一般采用false，默认情况下也为false。 另一种是直接赋值的方式。事件处理方式为JavaScript脚本中常见的获取事件句柄的方式，如下例所示。 video id=video1 src=mrsoft.mov onplay=begin_playing()/video function begin_playing() { (省略) }; 6.4.1 事件处理方式 接下来，我们将介绍一下浏览器在请求媒体数据、下载媒体数据、播放媒体数据一直到播放结束 这一系列过程中，到底会触发哪些事件。 loadstart事件：浏览器开始请求媒介； progress事件：浏览器正在获取媒介； suspend事件：浏览器非主动获取媒介数据，但没有加载完整个媒介资源； abort事件：浏览器在完全加载前中止获取媒介数据，但是并不是由错误引起的； error事件：获取媒介数据出错； emptied事件：媒介元素的网络状态突然变为未初始化；可能引起的原因有两个： 载入媒体过程中突然发生一个致命错误； 在浏览器正在选择支持的播放格式时，又调用了load方法重新载入媒体。 stalled事件：浏览器获取媒介数据异常； play事件：即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay（自动播放）属性。 pause事件：暂停播放，当执行了pause方法时触发。 loadedmetadata事件：浏览器获取完媒介资源的时长和字节 loadeddata事件：浏览器已加载当前播放位置的媒介数据； waiting事件：播放由于下一帧无效（例如未加载）而已停止（但浏览器确认下一帧会马上有效）； 6.4.2 事件介绍 playing事件：已经开始播放 canplay事件：浏览器能够开始媒介播放，但估计以当前速率播放不能直接将媒介播放完（播放期间需要缓冲）； canplaythrough事件：浏览器估计以当前速率直接播放可以直接播放完整个媒介资源（期间不需要缓冲）； seeking事件：浏览器正在请求数据（seeking属性