紀(jì)翠竹
摘要:本文利用HTML5的
關(guān)鍵詞:HTML5;富媒體;視頻;播放器;JavaScript
中圖分類號:TP393 文獻(xiàn)標(biāo)識碼:A 文章編號:1007-9416(2017)04-0195-01
大數(shù)據(jù)時代,富媒體元素早已突破了傳輸?shù)钠款i,成為互聯(lián)網(wǎng)的重要組成部分。本文從提升用戶體驗出發(fā),兼顧各瀏覽器對視頻文件的支持情況,介紹基于HTML5的自定義控制欄的視頻播放器技術(shù)的應(yīng)用。
1
2 HTML DOM Video對象
HTML5為Video對象提供了用于DOM操作的方法、屬性和事件,下面,我們用一個簡單的例子說明一下如何使用JavaScript代碼操作Video對象。如圖1所示,定義了一個用于控制播放或暫停的按鈕,然后為該按鈕的onclick事件定義方法playPause(),使用JavaScript的條件語句進(jìn)行狀態(tài)的判斷,當(dāng)該播放器的狀態(tài)為暫停時調(diào)用play()方法,切換為播放,這個按鈕是個反復(fù)鍵,在播放或暫停狀態(tài)下進(jìn)行切換。
3 網(wǎng)頁的部分
該頁面由一個
4 用JavaScript代碼實現(xiàn)功能
控制視頻播放或暫停:playPause(),在該方法中需要判斷Video對象的狀態(tài),如果為paused狀態(tài),則調(diào)用play()方法,否則調(diào)用paused方法;控制視頻快進(jìn)、快退:goBack(val),在該方法中通過控制currentTime的值來實現(xiàn)效果;控制視頻音量:volume(val),在該方法中通過控制volume的屬性值來實現(xiàn)效果;控制是否靜音:isMuted(),在該方法中需要判斷Video對象的muted狀態(tài)。代碼如圖3所示。