視頻網站設計與研究范文

本站小編為你精心準備了視頻網站設計與研究參考范文，愿這些范文能點燃您思維的火花，激發您的寫作靈感。歡迎深入閱讀并收藏。

1video標記

1.1video標記的屬性下面對HTML5的新標記video相關屬性的用法進行詳細介紹，常用屬性有6個[5]。

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

1.1.2preload屬性[7]該屬性定義視頻文件是否要進行預加載處理。在標記中若設置了該屬性，在頁面加載時會自動加載視頻，準備播放。若標記中同時設置了"autoplay"屬性，則該屬性無效。

1.1.3loop屬性屬性值是BOOL型[8]。設置是否要循環播放視頻文件。

1.1.4autoplay屬性屬性值是BOOL型。如果video標記添加了該屬性并設置為true，表示頁面將自動播放視頻文件，否則表示視頻不自動播放。

1.1.5width屬性與height屬性兩個外觀屬性，width屬性設置video標記的寬度，height屬性設置video標記的高度。

1.1.6controls屬性[9]如果設置了該屬性，video標記會顯示視頻控制按鈕，包含播放按鈕，全屏控制，音量調整按鈕。

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

2視頻網站設計

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

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

3結束語

HTML5作為一個推出不久的Web標準規范，具有很多新的功能和特性，更進一步的增強了網頁的性能和展示體驗，特別是在三維、圖形和特效方面改進明顯[11]。隨著互聯網技術的進步，網絡交互的內容變得越來越豐富，迫切需要一種新標準與當前網頁應用需求相適應。HTML5很好的滿足了這一需求。它改變了HTML前幾個版本的設計習慣，顯著減少了網頁開發的工作量，并提供了更優秀的圖形和特效體驗。本文探討與總結了傳統視頻網站存在的不足，討論了采用HTML5技術解決視頻網站中存在的若干主要問題，對HTML5視頻網站的整體框架結構、功能模塊等進行了深入的探討和設計，并進行了仔細的研究。

作者：梁曉婭 張恒 單位：武漢軟件工程職業學院