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

日期在做一個視頻播放的頁面，其中用到了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瀏覽器，所以應該是經過的。