建站
咨詢
售后
建站咨詢
新聞中心
HTML5支持直接播放視頻，而這背后涉及到復雜的視頻格式之爭，甚至還牽涉到所有的電子影像設備？在過去乃至現(xiàn)在，flash仍是網(wǎng)頁上最好的解決視頻的方法，諸如優(yōu)酷、土豆之流的視頻網(wǎng)站、還有像蝦米那樣的在線音樂網(wǎng)站，仍在使用flash提供播放服務?，F(xiàn)在這種狀況將會隨著 HTML5 的發(fā)展而改變。HTML
成都創(chuàng)新互聯(lián)專業(yè)提供成都主機托管四川主機托管成都服務器托管四川服務器托管，支持按月付款！我們的承諾：貴族品質、平民價格，機房位于中國電信/網(wǎng)通/移動機房，移動服務器托管服務有保障！
HTML5 (視頻)- 如何工作
如需在 HTML5 中顯示視頻，您所有需要的是：
實例
嘗試一下 ?
HTML video視頻教程
在過去，音視頻需要通過第三方插件來處理（這樣引發(fā)的問題是：并不是所有操作系統(tǒng)或者設備都能使用）流覽器與插件之間的通信被局限住了，而且多媒體就像一個黑盒子。HTML5出現(xiàn)之后，所有主流瀏覽器都可以支持本地音視頻了（包括IE瀏覽器），雖然這個過程需要讓您的媒體文件進行雙份的編碼（因為IE 和Safari只支持Royalty-encumbered標準的編碼）。有了HTML5，突然之間，video可以跟CSS一起排樣式了：您可以用半透 明的視頻相互覆蓋，設置邊界與背景圖片，旋轉盤旋等變換，以及其他各種精彩的變形應用。
但是，有一個核心問題，卻沒有得到解決。HTML5沒有規(guī)定，瀏覽器到底應該播放哪一種格式的視頻。瀏覽器廠商可以自行選擇支持的格式。
怎么讓所有瀏覽器支持HTML5 video視頻標簽？
使用 HTML5 的video可以很方便的使用 JavaScript 對視頻內容進行控制等等，功能十分強大，同時代碼比較少加快加載速度。此外跨平臺性比較好，特別是一些平板、手機等。例如蘋果公司的產品不支持flash僅支持HTML5中的video功能。但是 HTML5 的兼容性問題是個硬傷，我們可以在網(wǎng)頁中使用 video 來播放視頻，但使用早期瀏覽器的訪問者可能無法正常觀看這個視頻。此外，由于視頻編碼器的歷史淵源導致各種瀏覽器支持的視頻格式不同。應對這些問題，想在網(wǎng)頁中使用 HTML5 video 功能，可以按照下面三個步驟操作。
1、提前準備好多格式視頻文件
由于編碼器的版權問題，導致不同瀏覽器對視頻格式的兼容性不同。目前沒有一個視頻格式兼容所有瀏覽器，唯一的解決方法就是把視頻轉換成多種格式。
首先要準備一個 mp4 格式的視頻，可以在蘋果設備中使用；其次要準備 ogv 格式的視頻，用在火狐瀏覽器中；最后要準備一下 webm 格式的視頻，這個可以用在谷歌瀏覽器等。webm 是谷歌提出的，開源、免費，很有可能成為兼容所有瀏覽器的視頻格式。
準備多格式瀏覽器的麻煩之處在于轉換格式。視頻轉換工具國內的功能比較少，轉換格式可能沒有上面后兩個，而且質量良莠不齊，往往需要注冊才能使用。推薦一個國外的工具 Online converter ，在線免費視頻轉換工具。甚至不用安裝軟件，直接選擇相應的目標格式，然后上傳視頻，配置一下參數(shù)就可以轉換出來了。沒有合適工具的朋友，可以嘗試一下。
2、編寫對應 HTML5 video 代碼
HTML5 中的 video 實際上就是一個簡單的標簽，包含了一些視頻相關信息等。下面直接給出具體代碼，然后簡單解釋一下：
XML/HTML Code
video 標簽表示這里是一個視頻，width、height 屬性分別表示這個視頻內容的寬高（單位像素）。video 標簽中可以包含 source 標簽，source 標簽用來表示引用的視頻和視頻的格式、類型。為了保證向下的兼容性，我們還在 video 標簽中加了一句提示，這句話在支持 video 標簽的瀏覽器中是不會顯示的，如果不支持就會顯示出來。這里，還增加了一個視頻的下載地址，如果瀏覽器不支持，可以讓用戶選擇下載下來看。
特別需要注意一點，你的主機必須能正確的處理這事些視頻請求。確保你的主機被請求這些視頻的時候會在 Content-Type 頭發(fā)送正確的 MIME 類型。如果你不清楚，可以咨詢一下主機服務商，也可以自己添加。如果主機支持 .htaccess ，可以在 .htaccess 文件中增加下面語句：
代碼如下:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
大體就是這樣，比較簡單，更加具體的關于 video 的使用方法，可以搜索一下，在這里不再贅述。
3、為舊版瀏覽器做兼容
前面說過，如果瀏覽器不支持 video ，將會把 video 中的提示內容顯示出來。那么對付老舊瀏覽器，我們可以用傳統(tǒng)的 flash 來替換這個提示內容。這樣，當瀏覽器不兼容 video 標簽的時候，就會顯示出 flash 版本的視頻。例如：
XML/HTML Code
直接按照原來正常的 flash 引入方法寫進 video 標簽中即可。這樣，我們就實現(xiàn)了跨瀏覽器兼容的 video 功能使用。
html5 video 試看怎么實現(xiàn)？
new個video，指定播放列表的第一個視頻路徑為src。監(jiān)聽end事件，回調里面把video的src改成列表的下一個，再play
代碼示例：
var vList = ['視頻地址url1', 'url2', '...']; // 初始化播放列表
var vLen = vList.length; // 播放列表的長度
var curr = 0; // 當前播放的視頻
var video = new Video();
video.addEventListener('end', play);
play();
function play(e) {
video.src = vList[curr];
video.load(); // 如果短的話，可以加載完成之后再播放，監(jiān)聽 canplaythrough 事件即可
video.play();
curr++;
if (curr >= vLen) curr = 0; // 播放完了，重新播放
}
可以實現(xiàn)html5 播放多個視頻。一個接一個的播放。
怎么實現(xiàn) html5 video 視頻暫停后加載指定的圖片？
用戶播放視頻后，緩沖時間和用戶點暫停后加載指定的圖片必須帶超鏈接功能怎么實現(xiàn)？
先用絕對定位創(chuàng)建一個廣告圖片的圖層,監(jiān)測video的暫停事件,將隱藏的廣告圖片顯示出來出來就好了。
html5 video fullScreen全屏實現(xiàn)方式
在html5中，全屏方法可以適用于很多html元素，不僅僅是video
代碼如下：
html5 video封面poster圖片填充方法
html5的視頻封面尺寸被強制縮小了，需要填充整個播放器的，應該怎么做？
html5的video屬性并沒有支持處理poster的尺寸問題，有一個hacker的方法：The answer is actually quite simple. Instead of providing our poster image as a value to the poster attribute, we define it as a background image for our video element, and use the background-size property to tell the browser that the image is to cover the element in question:
將poster頁面設置為一個透明的圖片或者不存在的值，這樣瀏覽器就會無法顯示poster，然后通過設置播放器的css背景background，將我們需要的背景圖放進去，并且填充背景，并且我們用background-size屬性去告訴瀏覽器，這個播放器或者這個元素被這個圖片覆蓋。
video{
width: 100%;
height: 100%;
background:transparent url('img/1.jpg') 50% 50% no-repeat;
//下面就是background-size，每種瀏覽器都寫一個配置
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
詳細代碼：
< !DOCTYPE html>
網(wǎng)站題目：創(chuàng)新互聯(lián)HTML5教程：
URL標題：http://www.5511xx.com/article/cojspjp.html
