视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > 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> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器