·您当前的位置:主页 > 技术教程 > Html5技术 >

[html5]HTML5音频/视频loadedmetadata事件用法

时间:2017-12-01 11:28酷播
当指定的音频/视频的元数据已加载时,会发生 loadedmetadata 事件。音频/视频的元数据包括:时长、尺寸(仅视频)以及文本轨道。

提示视频的元数据已加载:

  1. myVid=document.getElementById("video1"); 
  2. myVid.onloadedmetadata=alert("Meta data for video loaded"); 
定义和用法
当指定的音频/视频的元数据已加载时,会发生 loadedmetadata 事件。音频/视频的元数据包括:时长、尺寸(仅视频)以及文本轨道。

当音频/视频处于加载过程中时,会依次发生以下事件:

    loadstart
    durationchange
    loadedmetadata
    loadeddata
    progress
    canplay
    canplaythrough

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 loadedmetadata 事件。

注意:Internet Explorer 8 及之前的版本不支持该事件。

  1. <!DOCTYPE html> 
  2. <html> 
  3.  
  4. <body> 
  5.  
  6.     <video id="myVideo" width="320" height="176" controls> 
  7.         <source src="mov_bbb.mp4" type="video/mp4"> 
  8.             <source src="mov_bbb.ogg" type="video/ogg"> 
  9.                 Your browser does not support HTML5 video. 
  10.     </video> 
  11.  
  12.     <script> 
  13.         var vid = document.getElementById("myVideo"); 
  14.         vid.addEventListener("loadedmetadata", function() { 
  15.             alert("Meta data for video loaded"); 
  16.         }); 
  17.     </script> 
  18.  
  19.     <p> <a href="http://www.cuplayer.com/" target="_blank">www.cuplayer.com</a></p> 
  20.  
  21. </body> 
  22.  
  23. </html> 

 

热门文章

请稍候...
  • 锁定云视频大聚惠
  • 相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器