正文

HTML5中Video和Audio

IP云
IP云V管理员/4 阅读
07/27
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

相关属性

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获取媒体数据过程中出错
emptiedvideo元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误

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

stalled浏览器尝试获取媒体数据失败
play即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay属性
pause播放暂停，当执行了pause方式时触发
loadedmetadata浏览器获取完毕媒体的时间长和字节数
waiting播放过程由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧
canplay浏览器能够播放媒体，但估计以当前的播放速率不能直接播放完毕，播放期间需要缓冲
canplaythrough浏览器能够播放媒体，而且以当前播放速率能够将媒体播放完毕，不再需要进行缓冲
seekingseeking属性变为true，浏览器正在请求数据
seekedseeking属性变为false，浏览器停止请求数据
timeupdate由于播放位置被改变，可能是播放过程中的自然改变，也可能是被人为的改变，或由于播放不能连续而发生的跳变
ended播放结束后停止播放
ratechangedefaultplaybackRate属性（默认播放速率）或playbackRate属性（当前播放速率）被改变
druationchange播放时长被改变
volumechangevolume属性（音量）被改变或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. function play(){
  33. //播放视频
  34. video.play();
  35. }
  36. function pause(){
  37. //暂停视频
  38. video.pause();
  39. }
  40. </script>
  41. </head>
  42. <body onLoad="init()">
  43. <!--可以添加controls属性来显示浏览器自带的播放控制条-->
  44. <video id="video1" src="test.gov"></video>
  45. <br/>
  46. <button onClick="play()">播放</button>
  47. <button onClick="pause()">暂停</button>
  48. </body>
  49. </html>

canPlayType方法

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

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

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

该方法返回3个可能值：

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