HTML5自制網(wǎng)頁視頻播放器的實現(xiàn)
2017-06-02 23:28:29紀(jì)翠竹
數(shù)字技術(shù)與應(yīng)用 2017年4期
紀(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所示。
猜你喜歡
家庭影院技術(shù)(2019年11期)2019-12-09 09:14:32
電子制作(2019年9期)2019-05-30 09:41:44
家庭影院技術(shù)(2018年11期)2018-12-26 12:55:09
新媒體研究(2016年19期)2016-11-18 20:01:10
電腦知識與技術(shù)(2016年25期)2016-11-16 13:03:34
讀寫算·素質(zhì)教育論壇(2016年22期)2016-11-14 07:35:17
電子技術(shù)與軟件工程(2016年18期)2016-11-14 00:01:37
中國塑料(2015年8期)2015-10-14 01:10:55
