向HTML中插入視頻的方法有兩種:
1、使用古老的object標(biāo)簽(兼容性良好,但使用比較麻煩)
2、使用Html5中的video標(biāo)簽(使用比較簡(jiǎn)單,但兼容性令人頭疼)
雖然后者的兼容性存在很多問題,但是因?yàn)槭褂闷饋肀容^方便,符合未來網(wǎng)頁(yè)設(shè)計(jì)發(fā)展的趨勢(shì),因此我們以后者作為頁(yè)面插入視頻的主要方法,又考慮到兼容性的問題,故前者作為輔助。
代碼如下:
注:當(dāng)前video元素支持三種視頻格式:Ogg\MPEG4\WebM
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
在這種情況下,如果視頻格式正確,大部分瀏覽器的兼容性結(jié)果我們還算滿意,但是IE678不支持它??紤]到用戶群的問題,就必須想到另外的解決方案:
代碼如下:
注:這里面引入了一些文件,除了flv格式的視頻,還有幾個(gè)swf或js文件,都是用DW軟件生成的,不想研究<object></object>標(biāo)簽的朋友去DW軟件生成就行,如果可以巧妙的融合這兩段代碼就可以得到兼容所有主流瀏覽器的終極代碼了。
于是我們可以這樣:
用jquery判斷瀏覽器是否為IE(不用判斷具體IE版本,因?yàn)榉?wù)器的原因IE很可能高版本也不通過,暫且IE全部用<object></object>標(biāo)簽),根據(jù)版本加載不同的標(biāo)簽,代碼如下:
到此為止,就可以編寫兼容所有瀏覽器的HTML視頻代碼了。