HTML5自制網(wǎng)頁視頻播放器的實(shí)現(xiàn)
2017-06-02 23:28:29紀(jì)翠竹
數(shù)字技術(shù)與應(yīng)用 2017年4期
關(guān)鍵詞：視頻
紀(jì)翠竹
摘要：本文利用HTML5的
關(guān)鍵詞：HTML5；富媒體；視頻；播放器；JavaScript
中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1007-9416（2017）04-0195-01
大數(shù)據(jù)時(shí)代，富媒體元素早已突破了傳輸?shù)钠款i，成為互聯(lián)網(wǎng)的重要組成部分。本文從提升用戶體驗(yàn)出發(fā)，兼顧各瀏覽器對視頻文件的支持情況，介紹基于HTML5的自定義控制欄的視頻播放器技術(shù)的應(yīng)用。
1
2 HTML DOM Video對象
HTML5為Video對象提供了用于DOM操作的方法、屬性和事件，下面，我們用一個(gè)簡單的例子說明一下如何使用JavaScript代碼操作Video對象。如圖1所示，定義了一個(gè)用于控制播放或暫停的按鈕，然后為該按鈕的onclick事件定義方法playPause（），使用JavaScript的條件語句進(jìn)行狀態(tài)的判斷，當(dāng)該播放器的狀態(tài)為暫停時(shí)調(diào)用play（）方法，切換為播放，這個(gè)按鈕是個(gè)反復(fù)鍵，在播放或暫停狀態(tài)下進(jìn)行切換。
3 網(wǎng)頁的部分
該頁面由一個(gè)
4 用JavaScript代碼實(shí)現(xiàn)功能
控制視頻播放或暫停：playPause（），在該方法中需要判斷Video對象的狀態(tài)，如果為paused狀態(tài)，則調(diào)用play（）方法，否則調(diào)用paused方法；控制視頻快進(jìn)、快退：goBack（val），在該方法中通過控制currentTime的值來實(shí)現(xiàn)效果；控制視頻音量：volume（val），在該方法中通過控制volume的屬性值來實(shí)現(xiàn)效果；控制是否靜音：isMuted（），在該方法中需要判斷Video對象的muted狀態(tài)。代碼如圖3所示。
猜你喜歡
藝術(shù)與設(shè)計(jì)·理論(2016年4期)2017-01-16 02:06:32
中國新通信(2016年22期)2017-01-13 09:47:47
亞太教育(2016年33期)2016-12-19 04:44:01
考試周刊(2016年94期)2016-12-12 13:10:56
中國記者(2016年9期)2016-12-05 02:24:38
科技視界(2016年25期)2016-11-25 08:45:10
新媒體研究(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
