首頁 > web前端 > H5教程 > 有關HTML5 Video物件的ontimeupdate事件(Chrome上無效)的問題 _html5教學技巧

有關HTML5 Video物件的ontimeupdate事件(Chrome上無效)的問題 _html5教學技巧

WBOY
發布: 2016-05-16 15:49:07
原創
1935 人瀏覽過

日期在做一個視頻播放的頁面,其中用到了HTML5的Video對象,這個是HTML5中新增的一個對象,支持多種不同格式的視頻在線播放,功能比較強大,而且還擴展了許多事件,可以通過JavaScript腳本來控制影片播放。參考下面兩個連結:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465962.aspx
http://www.w3school.com.cn/html5/tag_video .asp

Video物件可以透過ontimeupdate事件來報告當前的播放進度,同時透過該事件還可以根據視訊播放的情況來控制頁面上的其它元素,例如隨著視訊播放的進度來切換章節、顯示額外資訊等。下面是一個例子:

複製代碼
代碼如下:













🎜>poster="./images/videoground1.png"
src="./videoSource/video1.mp4" width="450px" height=" 320px"
ondurationchange="durationChange()" />

Time: 0 of 0 seconds.








當然也可以像在頁面上使用其它元素一樣,為Video物件動態新增屬性或掛事件,如:
複製程式碼

複製程式碼

程式碼如下:

video.ontimeupdate = function () { getCurrentVideoPosition(); };
不過上面這行程式碼看似在ChromeList取代它:

複製程式碼

程式碼如下: >vidvido. ", function () { getCurrentVideoPosition(); }, false); 不知道是什麼原因在Chrome上不能直接將ontimeupdate事件掛在Video元素上,而必須透過addEventListener方法來添加事件。不過addEventListener也相容於IE和Firefox瀏覽器,所以應該是經過的。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板