本站小編為你精心準(zhǔn)備了視頻網(wǎng)站設(shè)計(jì)與研究參考范文，愿這些范文能點(diǎn)燃您思維的火花，激發(fā)您的寫作靈感。歡迎深入閱讀并收藏。

1video標(biāo)記

1.1video標(biāo)記的屬性下面對(duì)HTML5的新標(biāo)記video相關(guān)屬性的用法進(jìn)行詳細(xì)介紹，常用屬性有6個(gè)[5]。

1.1.1src屬性用于設(shè)置視頻文件地址，并可以和另外兩個(gè)屬性搭配使用[6]：1)type屬性，指定src屬性視頻的類型。2)media屬性，默認(rèn)值為all，表示支持所有視頻文件。該屬性表示媒體在何種媒介中使用，可以不設(shè)置該屬性。

1.1.2preload屬性[7]該屬性定義視頻文件是否要進(jìn)行預(yù)加載處理。在標(biāo)記中若設(shè)置了該屬性，在頁(yè)面加載時(shí)會(huì)自動(dòng)加載視頻，準(zhǔn)備播放。若標(biāo)記中同時(shí)設(shè)置了"autoplay"屬性，則該屬性無效。

1.1.3loop屬性屬性值是BOOL型[8]。設(shè)置是否要循環(huán)播放視頻文件。

1.1.4autoplay屬性屬性值是BOOL型。如果video標(biāo)記添加了該屬性并設(shè)置為true，表示頁(yè)面將自動(dòng)播放視頻文件，否則表示視頻不自動(dòng)播放。

1.1.5width屬性與height屬性兩個(gè)外觀屬性，width屬性設(shè)置video標(biāo)記的寬度，height屬性設(shè)置video標(biāo)記的高度。

1.1.6controls屬性[9]如果設(shè)置了該屬性，video標(biāo)記會(huì)顯示視頻控制按鈕，包含播放按鈕，全屏控制，音量調(diào)整按鈕。

1.2video標(biāo)記的基本用法上述網(wǎng)頁(yè)在IE中打開后，會(huì)馬上加載視頻文件，并自動(dòng)播放該文件。當(dāng)播放結(jié)束后，頁(yè)面會(huì)立即重新播放。Video標(biāo)記語法還可以用子標(biāo)記source元素來指定視頻源文件。每個(gè)source元素可以設(shè)置獨(dú)立的視頻源文件，source元素的個(gè)數(shù)不受限制。此例中，video標(biāo)記沒有設(shè)置src屬性，但添加了兩個(gè)source元素。source元素設(shè)置源文件分別為"1.avi"與"1.mp4"，網(wǎng)頁(yè)將自動(dòng)加載第一個(gè)能夠被識(shí)別的文件格式。

2視頻網(wǎng)站設(shè)計(jì)

視頻網(wǎng)站將以HTML5的新標(biāo)記video為基礎(chǔ)，保證視頻網(wǎng)站實(shí)現(xiàn)起來簡(jiǎn)潔，高效。此外，網(wǎng)站設(shè)計(jì)將按照網(wǎng)頁(yè)設(shè)計(jì)的基本原則，以用戶需求為基礎(chǔ)，充分尊重用戶的使用習(xí)慣，同時(shí)還應(yīng)具有使用簡(jiǎn)便、交互友好和前瞻性等特征。而基于HTML5的視頻網(wǎng)站能夠很好的滿足上述需要。目前，HTML5技術(shù)不僅具有先進(jìn)性，而且還能體現(xiàn)以用戶為中心的網(wǎng)站設(shè)計(jì)理念。普通用戶無需像傳統(tǒng)視頻網(wǎng)站那樣，安裝視頻插件來完成視頻播放，而只需用一個(gè)支持HTML5的瀏覽器，就能夠直接播放視頻，獲得更佳的用戶體驗(yàn)[10]。通過分析設(shè)計(jì)，本文研究的視頻網(wǎng)站采用B/S三層架構(gòu)模式，分為數(shù)據(jù)層、業(yè)務(wù)邏輯層和表示層。通過分層劃分，可以降低網(wǎng)站開發(fā)的復(fù)雜度，更好的控制進(jìn)度，維護(hù)與測(cè)試也更方便，同時(shí)提高了網(wǎng)站的可擴(kuò)展性。該視頻網(wǎng)站分為三個(gè)主要模塊，分別為：數(shù)據(jù)提供模塊、后臺(tái)管理模塊和前端展示模塊。

數(shù)據(jù)提供模塊，主要提供流媒體數(shù)據(jù)服務(wù)，響應(yīng)用戶的請(qǐng)求，提供視頻播放所需的數(shù)據(jù)。首先按規(guī)定流程處理各種視頻數(shù)據(jù)源：對(duì)于采集來的直播型數(shù)據(jù)源，需要進(jìn)行數(shù)據(jù)格式的轉(zhuǎn)換，將數(shù)據(jù)編碼成H.264格式和MP4音頻的格式，再采用加文件頭的形式封裝成MPEG-2TS文件后轉(zhuǎn)入流分割器中進(jìn)行邏輯處理，得到的文件會(huì)按照10秒一段的標(biāo)準(zhǔn)進(jìn)行分割，并生成分割文件的索引。隨著視頻數(shù)據(jù)的不斷增加，索引數(shù)據(jù)也要同步進(jìn)行更新維護(hù)；然后以服務(wù)形式供Web模塊來調(diào)用這些處理好的視頻文件。后臺(tái)管理模塊主要對(duì)保存在服務(wù)器上的視頻文件進(jìn)行維護(hù)和管理，主要包括視頻文件的上傳審核、刪除、權(quán)限分配等功能。前端展示模塊，采用HTML5技術(shù)，特別是video標(biāo)記來完成視頻在頁(yè)面上的顯示。通過頁(yè)面編程控制和URL地址來調(diào)用視頻的索引文件，然后根據(jù)索引文件來查找視頻文件在服務(wù)器上的位置。以上三個(gè)模塊，相互配合，共同完成視頻的所有服務(wù)和反饋。為用戶提供了良好的視頻服務(wù)平臺(tái)。用戶可以隨時(shí)瀏覽視頻節(jié)目信息，選擇自己喜愛的視頻節(jié)目。

3結(jié)束語

HTML5作為一個(gè)推出不久的Web標(biāo)準(zhǔn)規(guī)范，具有很多新的功能和特性，更進(jìn)一步的增強(qiáng)了網(wǎng)頁(yè)的性能和展示體驗(yàn)，特別是在三維、圖形和特效方面改進(jìn)明顯[11]。隨著互聯(lián)網(wǎng)技術(shù)的進(jìn)步，網(wǎng)絡(luò)交互的內(nèi)容變得越來越豐富，迫切需要一種新標(biāo)準(zhǔn)與當(dāng)前網(wǎng)頁(yè)應(yīng)用需求相適應(yīng)。HTML5很好的滿足了這一需求。它改變了HTML前幾個(gè)版本的設(shè)計(jì)習(xí)慣，顯著減少了網(wǎng)頁(yè)開發(fā)的工作量，并提供了更優(yōu)秀的圖形和特效體驗(yàn)。本文探討與總結(jié)了傳統(tǒng)視頻網(wǎng)站存在的不足，討論了采用HTML5技術(shù)解決視頻網(wǎng)站中存在的若干主要問題，對(duì)HTML5視頻網(wǎng)站的整體框架結(jié)構(gòu)、功能模塊等進(jìn)行了深入的探討和設(shè)計(jì)，并進(jìn)行了仔細(xì)的研究。

作者：梁曉婭 張恒 單位：武漢軟件工程職業(yè)學(xué)院