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