视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[html5]Audio/Video的durationchange事件

时间:2015-12-14 16:11酷播
[html5]Audio/Video的durationchange事件

实例

提示视频的时长已改变：

  1. myVid=document.getElementById("video1"); 
  2. myVid.ondurationchange=alert("The video duration has changed"); 


定义和用法

当指定音频/视频的时长数据发生变化时，发生 durationchange 事件。

当音频/视频加载后，时长将由 "NaN" 变为音频/视频的实际时长。

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

loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough


浏览器支持

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

注释：Internet Explorer 8 或更早的浏览器不支持该事件。
语法

在 HTML 中：

<audio|video ondurationchange="SomeJavaScriptCode">

在 JavaScript 中：

audio|video.ondurationchange=SomeJavaScriptCode;

使用 addEventListener()：

audio|video.addEventListener("durationchange", function()
{
//SomeJavaScriptCode
}
);

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.  
  5. <video id="video1" controls="controls"> 
  6.   <source src="/example/html5/mov_bbb.mp4" type="video/mp4"> 
  7.   <source src="/example/html5/mov_bbb.ogg" type="video/ogg"> 
  8.   Your browser does not support HTML5 video. 
  9. </video> 
  10.  
  11. <script> 
  12. myVid=document.getElementById("video1"); 
  13. myVid.addEventListener("durationchange", function() 
  14.   { 
  15.   alert("cuplayer.com提示：The video duration has changed"); 
  16.   } 
  17. ); 
  18. </script>  
  19.  
  20. </body>  
  21. </html> 

 

热门文章推荐

请稍候...

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

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