·您当前的位置:主页 > 技术教程 > 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.     // 显示 id="demo" 的 p 元素中视频的播放位置  
  29.     document.getElementById("demo").innerHTML = vid.currentTime; 
  30. </script> 
  31.  
  32. </body> 
  33. </html> 

定义和用法

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

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

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

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

热门文章推荐

请稍候...