视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

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

html5视频标签video中ontimeupdate事件

时间:2018-11-22 11:11阿酷
html5视频标签video中ontimeupdate事件

html5视频标签video中ontimeupdate事件，实例：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>菜鸟教程(runoob.com)</title>  
  6. </head> 
  7. <body> 
  8.  
  9. <p>该实例中，我们使用了 HTML DOM 为 video 元素添加 "ontimeupdate" 事件。 
  10. 在用户开始播放视频，或者移动视频的播放位置时触发函数，并显示视频的播放位置。</p> 
  11.  
  12. <video id="myVideo" width="320" height="176" controls> 
  13.   <source src="mov_bbb.mp4" type="video/mp4"> 
  14.   <source src="mov_bbb.ogg" type="video/ogg"> 
  15.   您的浏览器不支持 HTML5 video 标签。 
  16. </video> 
  17.  
  18. <p>播放位置: <span id="demo"></span></p> 
  19.  
  20. <script> 
  21. // 获取 id="myVideo" 的 video 元素 
  22. var vid = document.getElementById("myVideo"); 
  23.  
  24. // 为 video 元素添加 ontimeupdate 事件，如果当前播放位置改变则执行函数   
  25. vid.ontimeupdate = function() {myFunction()}; 
  26.  
  27. function myFunction()  
  28. { 
  29.     // 显示 id="demo" 的 p 元素中视频的播放位置  
  30.     document.getElementById("demo").innerHTML = vid.currentTime; 
  31. } 
  32. </script> 
  33.  
  34. </body> 
  35. </html> 

定义和用法

ontimeupdate 事件在视频/音频（audio/video）当前的播放位置发送改变时触发。

该事件通过以下方式调用：

  • 播放视频/音频（audio/video）
  • 重新定位视频/音频（audio/video）的播放位置。

提示： 该事件通常与 Video 对象的 currentTime 属性一起使用，该属性返回视频/音频（audio/video）的当前播放位置。

热门文章推荐

请稍候...

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

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