MyException - 我的异常网
当前位置:我的异常网» HTML5 » HTML5中Video跟Audio

HTML5中Video跟Audio

www.MyException.Cn  网友分享于:2013-12-05  浏览:0次
HTML5中Video和Audio

相关属性

src属性

该属性指定媒体数据的URL地址。

autoplay属性

在该属性中指定是否在页面加载后自动播放,使用方法:

  1. <video src="test.mov" autoplay></video>

preload属性

在该属性中指定视频或音频数据是否预加载。如果使用预加载的话,浏览器会预先将视频或音频进行缓冲,这样可
以加快播放的速度,因为播放时数据已经预先缓冲完毕。

该性情有三个可选值:none,metadata与auto,默认值为auto.

  • none表示不进行预加载。
  • metadata表示只预加载媒体的元数据(媒体字节数、第一帧、播放列表、持续时间等)。
  • auto表示预加载全部视频或音频。

该属性的使用方法

  1. <video src="test.mov" preload="auto"></video>

poster (video元素独有属性)

当视频的不可用时,可以使用该元素向用户展示一幅替代用的图片,使用方法:

  1. <video src="test.mov" poster="CannotUse.jpg"></video>

loop属性

在该属性中指定是否循环播放视频或音频,使用方法:

  1. <video src="test.mov" autuplay loop></video>

controls属性

该属性中指定是否为视频或音频添加浏览器自带的播放用的控制条。控制条中具有播放、暂停等按钮。

  1. <video src="test.mov" controls></video>

开发者也可以在脚本中自定义控制条,而不使用浏览器默认的控制条。

with与height(video独有属性)

在该属性中指定视频的宽度与高度(以像素为单位)使用方法:

  1. <video src="test.mov" width="500" height="300"></video>

error属性

在读取、使用媒体数据的过程中中,正常情况下,video元素或audio元素的error属性为null,但是任何时候只要出
现错误,error属性将返回一个MediaError对象,该对象的code返回对应的错误状态,错误状态共有4个可能值,如
下所示。

  • MEDIA_ERR_ABORTED(数字值为1):媒体数据的下载过程由于用户的操作原因而被中止。
  • MEDIA_ERR_NETWORK(数字值为2):确认媒体资源可用,但是在下载时出现网络错误,媒体数据下载过程被中止。
  • MEDIA_ERR_DECODE(数字值为3):确认媒体资源可能,但是解码时发生错误。
  • MEDIA_ERR_SRC_NOT_SUPPORTED(数字值为4):媒体格式不被支持。
  • error为只读属性。

读取错误状态的代码如下:

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

networkState属性

在媒体数据加载过程中可以使用networkState属性读取当前的网络状态,共有如下所示的4个可能值:

  • NETWORK_EMPTY(数字值为0):元素牌初始状态。
  • NETWORK_IDLE(数字值为1):浏览器已选择好用什么编码格式来播放媒体,但尚未建立网络连接。
  • NETWORK_LOADING(数字值为2):媒体数据加载中。
  • NETWORK_NO_SOURCE(数字值为3):没有支持的编码格式,不执行加载。
  • error为只读属性。

读取错误状态的代码如下:

  1. <video id="videoElement" src="test.mov">
  2. <script>
  3. var video = document.getElementById("videoElement");
  4. video.addEventListener("progess", function(e)
  5. {
  6. var networkStateDisplay = document.getElementById("networkState");
  7. //根据networkState属性的值来执行处理
  8. if(video.networkState == 2)
  9. {
  10. //计算已加载的字节数与总字节数。
  11. networkStateDisplay.innerHTML = "加载中...[" + e.loaded + "/" + e.total + "bype]";
  12. }
  13. else if(video.networkState == 3)
  14. {
  15. networkStateDisplay.innerHTML = "加载失败";
  16. }
  17. },false);
  18. </script>

currentSrc属性

可以使用currentSrc属性来读取播放中媒体数据的URL地。
currentSrc属性为只读属性。

buffered属性

可以使用video元素或audio元素的buffered属性来返回一个对象,该对象实现TimeRanges接口,以确认浏览器是否已缓存媒体数据。TimeRanges对象表示一段时间范围,在大多数情况下,TimeRanges对象表示的时间范围是一个单一的以0开始的范围,但是如果浏览器发出Range Requests请求,这时TimeRanges对象表示的时间范围是多个时间范围。

TimeRanges对象对象具有一个length属性,表示有多少个时间范围,大多数情况下存在时间范围是,该值为1;不存在时间范围是,该值为0。TimeRanges对象还具体两个方法,TimeRanges.start(index)与TimeRanges.end(index),大多数情况下将index值设为0就可以了。当用videoElement.buffered语句来实现TimeRanges接口时,TimeRanges.start(0)表示当前缓存区内从媒体数据的什么时间开始进行缓存,TimeRanges.end(0)表示当前缓存区内的结束时间。

readyState属性

可以使用video元素或audio元素的readyState属性返回媒体当前播放位置的就绪状态,共有5个可能的值。

  • HAVE_NOTHING(数字值为0):没有获取到媒体的任何信息,当前播放位置没有可播放数据。
  • HAVE_METADATA(数字值为1):已经获取到足够的媒体数据,但是当前播放位置没有有效的媒体数据(也就是说,获取到的媒体数据无效,不能播放)。
  • HAVE_CURRENT_DATA(数字值为2):当前播放位置已经有数据可以播放,但没有获致到可以让播放器前进的数据。当媒体为视频时,意思是当前帖的数据已获取,但没有获取到下一帧的数据,或者当前帧已经是播放的最重一帧。
  • HAVE_FUTURE_DATA(数字值为3):当前播放位置已经有数据可以播放,而且也获取到了可以让播放器前进的数据。当媒体为视频时,意思是当前帧的数据已获取,而且也获取到了下刺目贩数据,当前帧是播放的最后一帧时,readyState属性不可能为HAVE_FUTURE_DTAT。
  • HAVE_ENOUGH)DATA(数字值为4):当前播放位置已经有数据可以播放,同时也获取到了可以让播放器前进的数据,而且浏览器确认媒体以某一种速度进行加载,可以保证有足够的后续数据进行播放。

readyState属性为只读属性。

seeking属性与seekable属性

可以使用video元素或audio元素的seeking属性返回一个布尔值,表示浏览器是否正在请求某一特定播放位置的数
据,true表示浏览器正在请求数据,false表示浏览器已停止请求。

可以使用video元素或audio元素的seekable属性来返回一个TimeRanges对象,该对象表示请求到的数据时间范围。

当媒体为视频时,开始时间为请求到视频数据的第一帧的时间,结束时间为请求到视频数据的最后一帧的时间。

seeking属性与seekable属性只读属性

currentTime属性、startTime属性与duration属性

可以使用video元素或audio元素的currentTime属性来读取媒体的当前播放位置,也可以通过修改currentTime性情
为修改当前的播放位置。如果修改的位置上没有可用的媒体数据时,将抛出INVALID_STATE_ERR异常;如果修改的
位置超出了浏览器在一次请求中可以请求的数据范围,将抛出INDEX_SIZE_ERR异常。

可以使用video元素或audio元素的startTime属性来读取媒体播放的开始时间,通常为0。

可以使用video元素或audio元素的dutation属性来读取媒体文件总的播放时间。

三者的时间、单位均为秒,currentTime为可读与属性,其余两个均为只读属性。

played属性、paused属性、ended属性

可以使用video元素或audio元素的played属性来返回一个TimeRanges对象,该对象中可以读取媒体文件的已播放部份的时间段。开始时间为已播放部份的开始时间,结束时间为已播放部份的结束时间。

可以使用video元素或audio元素的paused属性来返回一个布尔值检测是否处于暂停状态,true表示暂停播放,
false表示正在播放。

可以使用video元素或audio元素的end属性来返回一个布尔值检测是否播放完毕,true表示已播放完毕,false表示
还未播放完毕。

三者均为只读属性。

defaultPlayRate属性与playbackRate属性

defaultPlayRate属性读取或修改媒体的播放速率。

playbackRate属性读取或修改媒体当前的播放速率。

volume属性和muted属性

volume属性读取或修改媒体的的播放音量,范围从0到1,0为表单,1为最大音量。

muted属性读取或修改媒体的表单状态,该值为布尔值,true表示静音状态,false表示非静音状态。

 

相关事件

在利用video元素或audio元素读取或播放媒体数据的时候,会触发一系的事件,如果使用JavaScript脚本来捕捉这些事件,就可以对这些事件进行处理了。对这些事件的捕捉及处理,可以按两种方式来进行。

第一种是监听的方式,使用video元素或audio元素的addEventListener方法来对事件的发生进行监听,该方法的定义如下所示。

videoElement.addEventListener ( type,listener,useCapture);

videoElement表示页面上的video元素或audio元素。type为事件名称,listener表示绑定的函数,useCapture是一个布尔值,表示该事件的响应顺序,该值如果为true,则浏览器采用Capture(捕获)响应方式,如果为false,浏览器采用bubbing(冒泡)响应方式,一般采用fase,默认情况下也为false,如下使用方法。

  1. video.addEventListener("error",function(){
  2. /******代码段******/
  3. },false);

第二种事件处理方式为JavaScript脚本常见的获取事件句柄的方式,如下例所示。

  1. <video id="video1" src="test.mov" onplay="begin_playing();"></video>
  2. function begin_playing(){
  3. /******代码段******/
  4. }

事件介绍

事件描述
loadstart 浏览器开始在网上寻找媒体数据
progress 浏览器正在获取媒体数据
suspend 浏览器暂停获取媒体数据,但是下载过程并滑正常结束
abort 浏览器在下载完全部媒体数据之前中止获取媒体数据,但是并不是由错误引起的
error 获取媒体数据过程中出错
emptied video元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误

 

2.在浏览器正在选择支持的播放格式时,又调用 了load方法重新载入媒体

stalled 浏览器尝试获取媒体数据失败
play 即将开始播放,当执行了play方法时触发,或数据下载后元素被设为autoplay属性
pause 播放暂停,当执行了pause方式时触发
loadedmetadata 浏览器获取完毕媒体的时间长和字节数
waiting 播放过程由于得不到下一帧而暂停播放(例如下一帧尚未加载完毕),但很快就能够得到下一帧
canplay 浏览器能够播放媒体,但估计以当前的播放速率不能直接播放完毕,播放期间需要缓冲
canplaythrough 浏览器能够播放媒体,而且以当前播放速率能够将媒体播放完毕,不再需要进行缓冲
seeking seeking属性变为true,浏览器正在请求数据
seeked seeking属性变为false,浏览器停止请求数据
timeupdate 由于播放位置被改变,可能是播放过程中的自然改变,也可能是被人为的改变,或由于播放不能连续而发生的跳变
ended 播放结束后停止播放
ratechange defaultplaybackRate属性(默认播放速率)或playbackRate属性(当前播放速率)被改变
druationchange 播放时长被改变
volumechange volume属性(音量)被改变或muted属性(静音状态)被改变

事件捕捉示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>事件捕捉</title>
  6. <script type="text/javascript">
  7. function playOrPauseVideo(){
  8. var videoUrl = document.getElementById("videoUrl").value;
  9. var video = document.getElementById("video");
  10. //使用事件监听方式捕捉事件
  11. video.addEventListener("timeupdate",function(){
  12. var timeDisplay = document.getElementById("time");
  13. //用秒数来显示当前播放进度
  14. timeDisplay.innerHTML = Math.floor(video.currentTime) + "/" + Math.floor(video.duration) + " 秒";
  15. },false);
  16. if(video.paused){
  17. if(videoUrl != video.src){
  18. video.src = videoUrl;
  19. video.load();
  20. }else{
  21. video.play();
  22. }
  23. document.getElementById("playButton").value= "暂停";
  24. }else{
  25. video.pause();
  26. document.getElementById("playButton").value = "播放";
  27. }
  28. }
  29. </script>
  30. </head>
  31. <body>
  32. <video id="video" width="400" height="300" autoplay loop="loop"></video>
  33. <br/>
  34. 视频地址:<input type="text" id="videoUrl"/>
  35. <input type="button" id="playButton" onClick="playOrPauseVideo()" value="播放"/>
  36. <span id="time"></span>
  37. </body>
  38. </html>

我们看一个事件捕捉示例,在播放过程中会经常触发timeupdat事件来通知当前的播放位置的改变,在该示例中,我们捕捉这个timeupdate事件来显示当前的播放进度。

 

相关方法

play方法

使用play方法来播放媒体,自动将元素的paused属性变为false。

pause方法

使用pause方法来暂停播放,自动将元素的paused属性变为true。

load方法

使用load方法来重新载入媒体进行播放,自动将元素的playbackRate属性值变为defaultPlaybackRate属性的值,自动将元素的error的值变为null.

下面先来看一个媒体播放的示例。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>video test</title>
  6. <script type="text/javascript">
  7. var video;
  8. function init(){
  9. video = document.getElementById("video1");
  10. //监听视频播放结束事件
  11. video.addEventListener("ended",function(){
  12. alert("播放结束。");
  13. },true);
  14. //发生错误
  15. video.addEventListener("error",function(){
  16. switch(video.error.code){
  17. case MediaError.Media_ERROR_ABORTED:
  18. alert("视频的下载过程被中止。");
  19. break;
  20. case MediaError.MEDIA_ERR_NETWORK:
  21. alert("网络发生故障,视频的下载过程被中止。");
  22. break;
  23. case MediaError.MEDIA_ERR_DECODE:
  24. alert("解码失败。");
  25. break;
  26. case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
  27. alert("不支持播放的视频格式。");
  28. break;
  29. }
  30. },false);
  31. }
  32.  
  33. function play(){
  34. //播放视频
  35. video.play();
  36. }
  37.  
  38. function pause(){
  39. //暂停视频
  40. video.pause();
  41. }
  42. </script>
  43. </head>
  44. <body onLoad="init()">
  45. <!--可以添加controls属性来显示浏览器自带的播放控制条-->
  46. <video id="video1" src="test.gov"></video>
  47. <br/>
  48. <button onClick="play()">播放</button>
  49. <button onClick="pause()">暂停</button>
  50. </body>
  51. </html>

canPlayType方法

使用canPlayType方法来测试浏览器是否支持指定的媒体类型,该方法定义如下所示。

  1. var support = vodeElement.canPlayType(type);

videoElement表示页面上的video元素或者audio元素,该方法使用一个参数type,该参数的指定方法与soruce元素的type参数相同,都用播放文件的MIME类型来指定,可以在指定的字符串中加上表示媒体编码格式的codes参数。

该方法返回3个可能值:

  • 空字符串:表示浏览器不支持此种媒体类型。
  • maybe:表示浏览器可能支持此种媒体类型。
  • probably:表示浏览器确定支持此种媒体类型。

 

文章评论

为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
程序员必看的十大电影
程序员必看的十大电影
程序员应该关注的一些事儿
程序员应该关注的一些事儿
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
 程序员的样子
程序员的样子
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
总结2014中国互联网十大段子
总结2014中国互联网十大段子
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
一个程序员的时间管理
一个程序员的时间管理
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
老程序员的下场
老程序员的下场
我的丈夫是个程序员
我的丈夫是个程序员
为什么程序员都是夜猫子
为什么程序员都是夜猫子
旅行,写作,编程
旅行,写作,编程
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
中美印日四国程序员比较
中美印日四国程序员比较
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序员都该阅读的书
程序员都该阅读的书
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
代码女神横空出世
代码女神横空出世
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
Java程序员必看电影
Java程序员必看电影
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
我是如何打败拖延症的
我是如何打败拖延症的
编程语言是女人
编程语言是女人
漫画:程序员的工作
漫画:程序员的工作
鲜为人知的编程真相
鲜为人知的编程真相
那些争议最大的编程观点
那些争议最大的编程观点
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员和编码员之间的区别
程序员和编码员之间的区别
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有