换种姿势学习HTML5之四：多媒体播放-职坐标

换种姿势学习HTML5之四：多媒体播放

沉沙 2018-10-31 来源：阅读 1445 评论 0

摘要：本篇教程探讨了换种姿势学习HTML5之四：多媒体播放，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了换种姿势学习HTML5之四：多媒体播放，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

就是新增了audio和video，它们有很多属性，我也不想在此一一探究，不过可以看一下下面的示例：

效果图：

image

image

代码：
复制代码

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>多媒体</title>
  6 </head>
  7 
  8 <object width="100" height="80">
  9  <param name="movie" value="//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="//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 
17 <audio controls="controls" autoplay="autoplay" perload="auto" loop="loop"
18 src="//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 
  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>

复制代码

效果图：

image

————————————————————————————————————————————————————————

当然，多媒体时间不止这么简单的功能。

在利用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 
  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