日前在做一個視訊播放的頁面,其中用到了HTML5的Video對象,這個是HTML5中新增的一個對象,支援多種不同格式的視訊線上播放,功能比較強大,而且還擴充了許多事件,可以通過JavaScript腳本來對視訊播放進行控制。參考下面兩個連結:
<a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465962.aspx">http://msdn.microsoft.com/en-us/library/windows/apps/hh465962.aspx</a>
<a href="http://www.w3school.com.cn/html5/tag_video.asp">http://www.w3school.com.cn/html5/tag_video.asp</a>
Video對象可以通過ontimeupdate事件來報告目前的播放進度,同時通過該事件還可以根據視訊播放的情況來控制頁面上的其它元素,例如随着視訊播放的進度來切換章節、顯示額外資訊等。下面是一個例子:
<a></a>
當然你也可以像在頁面上使用其它元素一樣,給Video對象動态添加屬性或者挂事件,如:
不過上面這行代碼貌似在Chrome上無效,可以使用addEventListener來代替它:
不知道是什麼原因在Chrome上不能直接将ontimeupdate事件挂在Video元素上,而必須通過addEventListener方法來添加事件。不過addEventListener也相容IE和Firefox浏覽器,是以應該是通過的。
本文轉自Jaxu部落格園部落格,原文連結:http://www.cnblogs.com/jaxu/p/3155915.html,如需轉載請自行聯系原作者