區(qū)煥恒
摘要: 伴隨著科技的不斷進(jìn)步,在人們物質(zhì)生活得到滿足的情況下,更多的人開始追求精神上的需求。例如人們會更希望利用很短的時間就可以通過小短片學(xué)處理生活中技巧等等。通過一些微視頻將需要傳達(dá)的內(nèi)容進(jìn)行儲存,播放來滿足人們的生活需求。本文就是基于HTML5的video的微視頻播放網(wǎng)站的一些關(guān)鍵問題進(jìn)行了闡述和說明。
關(guān)鍵詞: 微視頻;意義;功能
中圖分類號: TP393.092?? ?文獻(xiàn)標(biāo)識碼: A?? ?文章編號: 1672-9129(2018)09-0067-01
Abstract: ?With the continuous advancement of science and technology, more people begin to pursue spiritual needs when people's material life is satisfied. For example, people will want to use a short period of time to learn life skills and so on in a short period of time. Through some micro-videos, the content that needs to be conveyed is stored and played to meet people's living needs. This article is based on HTML5 video of the micro video playback site of some key issues were elaborated and explained.
Keywords: micro video;meaning;function
1 HTML5的意義與特征
1.1 HTML5的意義。HTML5更多的是一系列項(xiàng)目,而非完備的單一標(biāo)準(zhǔn),至少現(xiàn)在如此。HTML5是多種技術(shù)的集合,其中大多數(shù)技術(shù)都在不斷發(fā)展。早在Web開發(fā)社區(qū)認(rèn)識到HTML4和關(guān)聯(lián)的XHT-ML有很多不足之處時人們便已開始醞釀HTML5,這些不足之處包括從小小的句法不連貫到對多媒體演示的支持不足。HTML5旨在解決廣泛的缺陷問題。然而,為了盡快取得最大的進(jìn)步,HTML5被分成多個小部分進(jìn)行標(biāo)準(zhǔn)化:首先是較簡單、爭議較少的部分,如新的輸人定義,然后是更復(fù)雜的部分,如WebSockets和微視頻。同時HTML5把本地的多媒體引人到瀏覽器。
1.2 HTML5的特征。隨著網(wǎng)絡(luò)的發(fā)展,web的內(nèi)容越來越多的是用音微視頻的形式來體現(xiàn)了,考慮一下有些用戶無法聽到音軌,或者其母語并不是英語的情況,抑或用戶希望用他們自己的語言來閱讀字幕和內(nèi)容的時候。在你的標(biāo)題和子標(biāo)題附近很快就會出現(xiàn)了,通過HTMIS
2 基于HTML5的微視頻播放器的創(chuàng)建
在HTML5中使用video標(biāo)簽來提供了微視頻播放器的最初的原型,我們可以通過使用js的樣式來控制video,利用video.js來創(chuàng)建微視頻播放器,,video.js提供插件API,以便將不同類型的微視頻傳遞給本地微視頻元素,同時跨瀏覽器統(tǒng)一本地微視頻API而且提供可擴(kuò)展和可編程的用戶界面,可以確保鍵盤和屏幕閱讀器用戶的可訪問性。另外還有一組核心插件提供對其他微視頻格式的支持。
2.1 檢測瀏覽器是否支持HTML5的video標(biāo)簽。因?yàn)殡m然主流的瀏覽器都支持video標(biāo)簽,但是仍存在一些瀏覽器仍不支持video標(biāo)簽(比如IE)雖說基于HTML5的微視頻播放器的創(chuàng)建但是當(dāng)不能使用video標(biāo)簽時我們還是可以選用flash插件的,首先我們需要讓主流的瀏覽器都支持video標(biāo)簽。
2.2 創(chuàng)建HTML5的微視頻播放器。瀏覽器支持HTML5的vide。標(biāo)簽,就可以使用video.js來裝飾標(biāo)準(zhǔn)
2.3獲取或設(shè)置HTML5微視頻播放器中微視頻的相關(guān)參數(shù)。當(dāng)下web應(yīng)用程序變得很普通加載一次完成的頁面就要能夠管理整個微視頻播放器的整個生存周期,同時可以改變播放器的音量、讓播放器全屏顯示,退出出全屏?xí)?、?dāng)前的播放的位置、正在播放微視頻的總時間以及緩沖的時間百分比。
3 基于HTML5Video的微視頻播放器的功能的實(shí)現(xiàn)
3.1微視頻播放器的外觀。我們可以看到不同的微視頻網(wǎng)站的播放器的外觀都不一樣,我們創(chuàng)建的微視頻播放器沒有任何的修飾,只有有一些簡單的樣式,這樣看起來有時會不舒服,我們?yōu)榱诉_(dá)到更好的用戶體驗(yàn),當(dāng)我們加人video-js.min.css這個樣式的時候微視頻播放器會默認(rèn)的樣式,當(dāng)我們使用框架的時候可能會影響微視頻播放器的效果。
3.2 視頻播放器資源文件的編碼。由于HTML5的video標(biāo)簽支持的微視頻格式很少,總共就支持這三種格式Ogg,MPEG4,WebMo。MP4= MPEG4文件使用H264微視頻編解碼器和AAC音頻編解碼器WebM=WebM文件使用VP8微視頻編解碼器和Vorbis音頻編解碼器Ogg二Ogg文件使用Theora微視頻編解碼器和Vorbis音頻編解碼器。我們需要將上傳的微視頻統(tǒng)統(tǒng)轉(zhuǎn)換為MPEG4格式。
3.3 通過上傳微視頻來動態(tài)的獲取圖片。由于我們上傳的微視頻往往不需要用戶自己來截取一張圖片來上傳,所以我們就需要自己服務(wù)器自己獲取到上傳的微視頻的圖片我們?nèi)匀煌ㄟ^FFPMPEG.exe的插件來獲取。
4 總結(jié)
綜上所述,對于許多游戲開發(fā)者經(jīng)常說,F(xiàn)LASH技術(shù)殘留下來就是為他們提供聲音的,正如許多瀏覽器可以需要兩秒鐘來加載HTML5音頻文件。隨著網(wǎng)絡(luò)的發(fā)展,web的內(nèi)容越來越多的是用音微視頻的形式來體現(xiàn)了,考慮一下有些用戶無法聽到音軌,或者其母語并不是英語的情況,抑或用戶希望用他們自己的語言來閱讀字幕和內(nèi)容的時候。這時候我們的HTML5就可以很好的解決這樣的問題,所以說我們選擇使用HTML5的vide是一個明確的選擇。
參考文獻(xiàn):
[1]岳鵬磊,李連民,李昌清,范伊紅. 基于HTM L5的網(wǎng)絡(luò)地圖研究與實(shí)現(xiàn)[J]. 無線互聯(lián)科技,2015,(2):38-40.doi:10.3969/j.issn.1672-6944.2015.02.016.
[2]侯旭諾,翟天慈. html5技術(shù)應(yīng)用現(xiàn)狀與發(fā)展趨勢分析[J]. 數(shù)碼世界,2017,(8).