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