HTML5 Audio/Video 标签,属性,方法,事件汇总

缺乏、安全感 2022-08-26 14:12 408阅读 0赞

  • src：音乐的URL
  • preload：预加载
  • autoplay：自动播放
  • loop：循环播放
  • controls：浏览器自带的控制条

Html代码

  • src：视频的URL
  • poster：视频封面，没有播放时显示的图片
  • preload：预加载
  • autoplay：自动播放
  • loop：循环播放
  • controls：浏览器自带的控制条
  • width：视频宽度
  • height：视频高度

Html代码

获取HTMLVideoElement和HTMLAudioElement对象

Js代码

  1. //audio可以直接通过new创建对象
  2. Media = new Audio(“http://www.abc.com/test.mp3″);
  3. //audio和video都可以通过标签获取对象
  4. Media = document.getElementByIdx_x(“media”);

Media方法和属性：

HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement

Js代码

  1. //错误状态
  2. Media.error; //null:正常
  3. Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
  5. //网络状态
  6. Media.currentSrc; //返回当前资源的URL
  7. Media.src = value; //返回或设置当前资源的URL
  8. Media.canPlayType(type); //是否能播放某种格式的资源
  9. Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
  10. Media.load(); //重新加载src指定的资源
  11. Media.buffered; //返回已缓冲区域，TimeRanges
  12. Media.preload; //none:不预载 metadata:预载资源信息 auto:
  14. //准备状态
  15. Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
  16. Media.seeking; //是否正在seeking
  18. //回放状态
  19. Media.currentTime = value; //当前播放的位置，赋值可改变位置
  20. Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
  21. Media.duration; //当前资源长度 流返回无限
  22. Media.paused; //是否暂停
  23. Media.defaultPlaybackRate = value;//默认的回放速度，可以设置
  24. Media.playbackRate = value;//当前播放速度，设置后马上改变
  25. Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
  26. Media.seekable; //返回可以seek的区域 TimeRanges
  27. Media.ended; //是否结束
  28. Media.autoPlay; //是否自动播放
  29. Media.loop; //是否循环播放
  30. Media.play(); //播放
  31. Media.pause(); //暂停
  33. //控制
  34. Media.controls;//是否有默认控制条
  35. Media.volume = value; //音量
  36. Media.muted = value; //静音
  38. //TimeRanges(区域)对象
  39. TimeRanges.length; //区域段数
  40. TimeRanges.start(index) //第index段区域的开始位置
  41. TimeRanges.end(index) //第index段区域的结束位置

事件：

Js代码

  1. eventTester = function(e){
  2. Media.addEventListener(e,function(){
  3. console.log((new Date()).getTime(),e);
  4. });
  5. }
  7. eventTester(“loadstart”); //客户端开始请求数据
  8. eventTester(“progress”); //客户端正在请求数据
  9. eventTester(“suspend”); //延迟下载
  10. eventTester(“abort”); //客户端主动终止下载（不是因为错误引起），
  11. eventTester(“error”); //请求数据时遇到错误
  12. eventTester(“stalled”); //网速失速
  13. eventTester(“play”); //play()和autoplay开始播放时触发
  14. eventTester(“pause”); //pause()触发
  15. eventTester(“loadedmetadata”); //成功获取资源长度
  16. eventTester(“loadeddata”); //
  17. eventTester(“waiting”); //等待数据，并非错误
  18. eventTester(“playing”); //开始回放
  19. eventTester(“canplay”); //可以播放，但中途可能因为加载而暂停
  20. eventTester(“canplaythrough”); //可以播放，歌曲全部加载完毕
  21. eventTester(“seeking”); //寻找中
  22. eventTester(“seeked”); //寻找完毕
  23. eventTester(“timeupdate”); //播放时间改变
  24. eventTester(“ended”); //播放结束
  25. eventTester(“ratechange”); //播放速率改变
  26. eventTester(“durationchange”); //资源长度改变
  27. eventTester(“volumechange”); //音量改变

================================

在以前，网页没有显示视频的一个标准，所以基本都要借助插件来实现视频的播放，插件过多或者插件自身问题，很容易引起浏览器的假死，造成用户体验不佳。html5 video标签的出现改变了这一局面，可以让用户在不用安装任何插件的情况下轻松的观看视频。

　　vedio和audio的使用技巧基本相同，本文仅以vedio作示例。先引用一段别人介绍的vedio标签

　　大多数用户已经安装了Flash插件（事实上，大概95%的上网用户都装有Flash的某个版本），但HTML 5的支持者正在推动一个开放的，不需要任何插件的视频标准。这就是HTML 5的新标签

我们来看看video标签具体是怎么使用的以及它有哪些属性和方法。

使用方法：

  1. <video width="320" height="240" controls="controls">
  3. 　　<source src="movie.ogg" type="video/ogg">
  5. 　　<source src="movie.mp4" type="video/mp4">
  7. Your browser does not support the video tag.
  9. </video>

各浏览器目前对html5视频格式的支持：










































浏览器 | 影音格式 Ogg Theora MP4(H.264) WebM
Microsoft Internet Explorer9 × √ ×
Mozilla Firefox5+ √ × √
Google Chrome13+ √ √ √
Apple Safari5+ × √ ×
Opera11+ √ × √

属性列表：












































属性

值

描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。默认为false
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。这些控件是由浏览器来提供的，样式也可能因为不同浏览器而不一样
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload none、metadata、auto

如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用”autoplay”，则忽略该属性。



  • auto - 当页面加载后载入整个视频


  • meta - 部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等） 


  • none - 不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求
src url 要播放的视频的URL。
 poster  url  预览图

媒介属性

　　一般用于js操作


















































































































属性 可读状态 描述
error 只读

使用media.error返回一个MediaError对象表明当前的错误状态，如果没有出错，返回null，共有4个可能值。



  • MEDIA_ERR_ABORTED（数字值为1）：媒体资源获取异常；

  • MEDIA_ERR_NETWORK（数字值为2）：网络错误；

  • MEDIA_ERR_DECODE（数字值为3）：媒体解码错误；

  • MEDIA_ERR_SRC_NOT_SUPPORTED（数字值为4）：视频格式被不支持。
currentSrc 只读 返回该媒介标签的src属性值
networkState  只读 返回媒介的网络状态，共有4个可能值。

  • NETWORK_EMPTY（数字值为0）：尚未初始化；

  • NETWORK_IDLE（数字值为1）：加载完成，网络空闲；

  • NETWORK_LOADING（数字值为2）：视频加载中；

  • NETWORK_NO_SOURCE（数字值为3）：加载失败。
 preload  可读写  可获取或改变媒介标签的preload属性值
 buffered  只读  返回一个TimeRanges对象，确认浏览器已缓存媒介文件
 readyState  只读  

返回媒介当前播放位置的就绪状态，共有5个可能值。



  • HAVE_NOTHING（数字值为0）：当前播放位置无有效媒介资源；

  • HAVE_METADATA（数字值为1）：加载中，媒介资源确认存在，但当前位置没有能够加载到有效媒介数据进行播放；

  • HAVE_CURRENT_DATA（数字值为2）：已获取到当前播放数据，但没有足够的数据进行播放；

  • HAVE_FUTURE_DATA（数字值为3）：已获取到后续播放数据，可以进行播放；

  • HAVE_ENOUGH_DATA（数字值为4）：可以进行播放，且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放，而不会使浏览器的播放进度赶上加载数据的末端。
 seeking  只读  返回一个布尔值，表明浏览器是否正在请求数据，ture表示浏览器正在请求数据，false表示浏览器已停止请求。
 seekable  只读 发挥一个TimeRanges对象，表明可以对当前媒介资源进行请求。
 currentTime  可读写  获取或改变视频的播放位置。单位为秒
 startTime  只读  返回媒介文件播放的开始时间，通常为0
 duration  只读  返回媒介文件总的播放时长
 played  只读  返回一个TimeRanges对象，标明浏览器已播放的媒介资源范围
paused 只读 返回一个布尔值，表明媒介是否暂停播放，ture表示媒介暂停播放，false表示媒介正在播放。
ended 只读 返回一个布尔值，表明媒介是否已结束，ture表示媒介已经播放完毕，false表示还未播放完毕。
defaultPlaybackRate 可读写 返回媒介默认的播放速率，或对其赋值，改变媒介的默认播放速率。
playbackRate 可读写 返回当前的媒介播放速率，或对其赋值，改变当前的媒介播放速率
autoplay 可读写 返回一个布尔值，表明当前媒介是否设置了自动播放，ture表示当前媒介为自动播放，false表示非自动播放，或对其赋值，设置是否自动播放。
loop 可读写 返回一个布尔值，表明当前媒介是否设置了循环播放，ture表示当前媒介设置了循环播放，false表示没有设置循环播放，或对其赋值，设置是否循环播放。
controls 可读写 返回一个布尔值，表明当前媒介是否使用了浏览器默认的播放控制栏，ture表示加载了，false表示没有加载，或对其赋值，设置是否使用浏览器默认的播放控制栏
 volume 可读写 返回当前媒介的音量值，或对其赋值，改变媒介的播放音量，范围为0到1，0相当于静音，1为最大音量。
 muted 可读写 返回一个布尔值，表明当前媒介播放是否开启静音，ture表示没有开启静音，false表示静音，或对其赋值，设置播放是否静音。

很简单，那我们来做一个demo。(很奇怪，chrome拖动进度条到最后视频有几率就死掉，自动播放到最后没有问题，这是bug？还是我自己的问题？)

2011121517203336.jpg

代码如下：

复制代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>html5 视频标签学习</title>
  5.         <meta http-equiv="Content-Type" content="text/html;charset=utf-8;">
  6.     </head>
  7.     <body>
  9.         <header>
  10.             <h1>自定义视频播放器</h1>
  11.             <div >
  12.                 当前播放 ：《<span id="currentMovie">movie1</span>》<br>
  13.                 当前播放速度 ： <span id="currentSpeed">1X</span><br>
  14.                 当前声音大小为 ：<span id="currentVolume">100</span><br>
  15.             </div>
  16.         </header>
  17.         <section>
  18.         <article>
  19.             <video style="float:left;" id="testVideo" preload="metadata" src="movie.ogg" height="300"  controls>
  20.                 你的浏览器不支持html5视频
  21.             </video>
  22.             <div style="float:left;margin-left:10px;">
  23.                 <h3>播放列表</h3>
  24.                 <ul>
  25.                     <li><a>movie1</a></li>
  26.                     <li><a>movie2</a></li>
  27.                     <li><a>movie3</a></li>
  28.                     <li><a>movie4</a></li>
  29.                 </ul>
  30.             </div>
  31.         </article>
  32.         <article style="clear:both;">
  33.             <br/>
  34.             <button id="play">播放</button>
  35.             <button id="pause">暂停</button>
  36.             <button id="stop">停止</button>
  37.             <button id="prev">前一个</button>
  38.             <button id="next">后一个</button>
  39.             <button id="upVolume">音量+</button>
  40.             <button id="downVolume">音量-</button>
  41.             <button id="fastFoward">快进</button>
  42.             <button id="fastBackward">快退</button>
  43.             <br/>
  44.             从<input type="text" id="min" style="width:20px;" value="0"/>分跳转到<input type="text" id="sec"  style="width:20px;" value="0"/>播放 
  45.             <button id="locate">确认</button>
  46.         </article>
  47.         <section>
  48.         <script type="text/javascript">
  49.             var $  = function(id){
  50.      return document.getElementById(id);};
  51.             var _video = $("testVideo");
  53.             //视频列表
  54. 　　　　　　　var playList = {
  55.                 current : 0,
  56.                 list : ["movie.ogg","war3.ogg","movie.ogv","trailer.webm","trailer.ogv"]
  57.             }
  59.             var videoUtil = {
  60.                 //播放
  61.                 play : function(){
  62.                     _video.play();
  63.                 },
  64.                 //暂停
  65.                 pause : function(){
  66.                     _video.pause();
  67.                 },
  68.                 //停止
  69.                 stop : function(){
  70.                     _video.currentTime = 0;
  71.                     _video.pause();
  72.                 },
  73.                 //下一个视频
  74.                 next : function(){
  75.                     if(playList.current == playList.list.length-1){
  76.                         playList.current = 0;
  77.                     }else{
  78.                         playList.current++;
  79.                     }
  80.                     _video.src=playList.list[playList.current];
  81.                     _video.play();
  82.                 },
  83.                 //前一个视频
  84.                 prev : function(){
  85.                     if(playList.current == 0){
  86.                         playList.current = palyList.list.length-1;
  87.                     }else{
  88.                         playList.current--;
  89.                     }
  90.                     _video.src=playList.list[playList.current];
  91.                     _video.play();
  92.                 },
  93.                 //加大声音,每次加大1/10
  94.                 upVolume : function(){
  95.                     _video.volume += 0.1;
  96.                 },
  97.                 //减小声音，每次减小1/10
  98.                 downVolume : function(){
  99.                     _video.volume -= 0.1;
  100.                 },
  101.                 //翻倍加快播放速度
  102.                 fastFoward : function(){
  103.                     //FF不支持playbackRate
  104. 　　　　　　　　　　　　if(_video.playbackRate){
  105.                         _video.playbackRate = _video.playbackRate*2;
  106.                     }else{
  107.                         alert("对不起，你的浏览器不支持改变播放速度！");
  108.                     }
  110.                 },
  111.                 //降低播放速度
  112.                 fastBackward : function(){
  113.                     if(_video.playbackRate){
  114.                         _video.playbackRate = _video.playbackRate/2;
  115.                     }else{
  116.                         alert("对不起，你的浏览器不支持改变播放速度！");
  117.                     }
  118.                 },
  119.                 //跳转到指定时间点播放
  120.                 locate : function(){
  121.                     var min = $("min").value;
  122.                     var sec = $("sec").value;
  123.                     var time = parseInt(min)*60+parseInt(sec);
  124.                     _video.currentTime = time;
  125.                     _video.play();
  126.                 },
  127.                 bindEvent : function(){
  128.                     var self = this;
  130.                     //绑定页面上各个按钮的事件
  131. 　　　　　　　　　　　　var btns = document.getElementsByTagName("button");
  132.                     for(var i = 0 ;i < btns.length ; i++){
  133.                         var el = btns[i];
  134.                         el.onclick = self[el.id];
  135.                     }
  137.                     //播放完毕自动播放下一个
  138.                     _video.onended = function(){
  139.                          var event = document.createEvent("HTMLEvents");
  140.                         event.initEvent('click', true, true);
  141.                         $("next").dispatchEvent(event);
  142.                     }
  144.                     //循环检查视频的当前状态
  145.                     setInterval(function(){
  146.                         var speed = _video.playbackRate||1;
  147.                         var movie = "movie"+playList.current;
  148.                         var volume = parseInt(_video.volume*100);
  149.                         $("currentMovie").innerHTML = movie;
  150.                         $("currentSpeed").innerHTML = speed+"X";
  151.                         $("currentVolume").innerHTML = volume;
  152.                     },200);
  154.                 }
  155.             };
  157.             window.onload = function(){
  158.                 videoUtil.bindEvent();
  159.             }
  161.         </script>
  162.     </body>
  163. </html>

复制代码

发表评论

表情：
评论列表 （有 0 条评论，408人围观）

还没有评论，来说两句吧...

相关阅读

    相关 HTML5新增标签属性

    关于h5 兜兜转转终于学完CSS开始接h5了！其实h5没有大家想的那么复杂！我们之前学的pc端就是以h5的标准来的 只是那些标签是 html4.01之前就有的！我们后

    傷城~傷城~/ 0 赞/ 496 阅读

    相关 HTML5 事件属性

    全局事件属性 `HTML 4` 增加了通过事件触发浏览器中行为的能力，比如当用户点击某个元素时启动一段 JavaScript。 如果需要学习更多有关使用这些事件进行编程

    矫情吗；*矫情吗；*/ 0 赞/ 571 阅读