h5 video元素

haibao 笔记 2015-04-09 15:25 1429
君子惠而不费,劳而不怨,欲而不贪,泰而不骄,威而不猛。——尧曰

欢迎您,我猜是来自美国的朋友! 本文共2506个字,预计阅读时间需要7分钟。

首先得了解video具有哪些属性。

1. src:在该属性中指定媒体数据的url地址。

2. autoplay:在该属性中指定媒体是否在页面加载后自动播放。

1
如:<video src="sample.mov" autoplay></video>

3. preload:在该属性中指定视频或音频数据是否预加载。该属性有3个可选择的值:none/metadata/auto,默认auto。

1
如:<video src="sample.mov" preload="auto"></video>

4. poster:当视频不可用时,可以使用该元素向用户展示一副替代用的图片。

1
如:<video src="sample.mov" poster="cannotuse.jpg"></video>

5. loop:在该属性中指定是否循环播放视频或音频。

1
如:<video src="sample.mov" loop></video>

6. controls:在属性中指定是否为视频或音频添加浏览器自带的播放用的控制条。

1
如:<video src="sample.mov" controls></video>

7. width和height:在该属性中指定视频的宽度与高度(以像素为单位)。

1
如:<video src="sample.mov" width="500" height="400"></video>

8. error:在正常读取/使用媒体数据的过程中,video元素或audio元素的error属性为null,但是任何时候只要出现错误,error属性将返回一个MediaError对象,该对象的code返回对应的错误状态。错误状态共有4个可能值:
(1)MEDIA_ERR_ABORTED(数字值为1):媒体数据的下载过程由于用户的操作原因而被中止。
(2)MEDIA_ERR_NETWORK(数字值为2):确认媒体资源可用,但是在下载时出现网络错误,媒体数据的下载过程被中止。
(3)MEDIA_ERR_DECODE(数字值为3):确认媒体资源可用,但是解码时发生错误。
(4)MEDIA_ERR_SRC_NOT_SUPPORTED(数字值为4):媒体资源不可用或媒体格式不被支持。

示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<video src="sample.mov" width="500" height="400" id="videoElement"></video>
<script>
   var video = document.getElementById("videoElement");
   video.addEventListener("error", function(){
   var error = video.error;
   switch(error.code){
        case 1:
          alert("视频的下载过程被中止。");
        break;
        case 2:
          alert("网络发生故障,视频的下载过程被中止。");
        break;
        case 3:
          alert("解码失败。");
        break;
        case 4:
          alert("媒体资源不可用或媒体格式不被支持。");
        break;
     }
   }, false);
</script>

9. networkState:在媒体数据加载过程中可以使用video或audio元素的networkState属性读取当前网络的状态,共有如下4个可能值。
(1)NETWORK_EMPTY(数字值为0):元素处于初始状态。
(2)NETWORK_IDLE(数字值为1):浏览器已选择好用什么编码格式来播放媒体,但尚未建立网络连接。
(3)NETWORK_LOADING(数字值为2):媒体数据加载中。
(4)NETWORK_NO_SOURCE(数字值为3):没有支持的编码格式,不执行加载。

示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <video src="sample.mov" width="500" height="400" id="videoElement"></video>
 <div id="networkState"></div>
 <script>
   var video = document.getElementById("videoElement");
   video.addEventListener("progress", function(){
   var networkStateDisplay = document.getElementById("networkState");
       if(video,networkState == 2){
          networkStateDisplay.innerHTML = "加载中...["+e.loaded+ " / " +e.total+ " byte]";
       }
       else if(video,networkState == 3){
          networkStateDisplay.innerHTML = "加载失败";
       }
   }, false);
</script>

10. currentSrc:读取播放中的媒体数据的url地址。

11. buffered:返回一个对象,该对象实现TimeRanges接口,以确认浏览器是否已缓存媒体数据。

12. seeking与seekable:返回一个布尔值,表示浏览器是否正在请求某一特定播放位置的数据,true表示浏览器正在请求数据,false表示浏览器已停止请求。

13. currentTime,startTime与duration: currentTime属性读取媒体的当前播放位置;startTime属性读取媒体播放的开始时间,通常为0;duration属性读取媒体文件总的播放时间。三者的值均为时间,单位为秒。

14. played,paused与ended:played属性返回一个TimeRanges对象,从该对象中可以读取媒体文件的已播放部分的时间段。开始时间为已播放部分的开始时间,结束时间为已播放部分的结束时间;paused属性返回一个布尔值,表示是否处于暂停播放中,true表示媒体暂停播放,false表示媒体正在播放; ended属性返回一个布尔值,表示是否播放完毕,true表示媒体播放完毕,false表示没有播放完毕。

15. defaultPlaybackRate与playbackRate:读取或修改媒体默认或当前的播放速率。

16. volume与muted: volume属性读取或修改媒体的播放音量,范围为0-1,0为静音,1为最大音量。 muted属性读取或修改媒体的静音状态,该值为布尔值,true表示处于静音状态,false表示非静音状态。

还有,需要会用哪些方法?

video与audio都具有以下四种方法。

(1)play方法:使用play方法来播放媒体,自动将元素的paused属性的值变为false。如:video.play();
(2)pause方法:使用pause方法来暂停播放,自动将元素的paused属性的值变为true。如:video.pause();
(3)load方法:使用load方法来重新载入媒体进行播放,自动将元素的playbackRate属性的值变为defaultPlaybackRate属性的值,自动将元素的error的值变为null。
(4)canPlayType方法:测试浏览器是否支持指定的媒体类型。可能返回的值有:空字符串,maybe和probably。

还有很多事件,本文就不介绍了。打字真累``

本文标题:h5 video元素

本文地址:http://www.hehaibao.com/h5-video/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>