HTML5判斷瀏覽器是否支持video元素
在HTML5下檢測(cè)瀏覽器是否支持video元素,最常用的方法是使用腳本來動(dòng)態(tài)創(chuàng)建video標(biāo)簽,并檢測(cè)特定函數(shù)是否存在。 以下是一個(gè)示例腳本: var hasVideo !!('video').
在HTML5下檢測(cè)瀏覽器是否支持video元素,最常用的方法是使用腳本來動(dòng)態(tài)創(chuàng)建video標(biāo)簽,并檢測(cè)特定函數(shù)是否存在。
以下是一個(gè)示例腳本:
var hasVideo !!('video').canPlayType;
這段腳本會(huì)動(dòng)態(tài)創(chuàng)建一個(gè)video標(biāo)簽,并利用canPlayType()函數(shù)來檢測(cè)瀏覽器是否支持該函數(shù)。通過"!!"運(yùn)算符將結(jié)果轉(zhuǎn)換成布爾值,就可以判斷出瀏覽器是否支持video元素。
如果檢測(cè)結(jié)果顯示瀏覽器不支持video元素,我們可以采用另外一套腳本來向頁面中引入其他媒體標(biāo)簽,比如Flash等其他播放技術(shù)。
在video元素中插入備選內(nèi)容
為了保證在瀏覽器不支持video元素時(shí)仍然能夠顯示內(nèi)容,我們可以在video標(biāo)簽中插入備選內(nèi)容,這些內(nèi)容將在瀏覽器不支持video元素時(shí)顯示出來。
例如,我們可以將以Flash插件方式播放相同視頻的代碼作為備選內(nèi)容。這樣,如果瀏覽器不支持video元素,備選內(nèi)容將顯示在視頻的位置上。
顯示文本形式提示信息
如果只希望顯示一條文本形式的提示信息來替代原本應(yīng)該顯示的內(nèi)容,這也是可行的。
在audio元素或video元素中,您可以按照以下方式插入提示信息:
lt;video src"video.ogg" controlsgt;
Your browser does not support HTML5 video.
lt;/videogt;
在這個(gè)例子中,如果瀏覽器不支持HTML5視頻,則會(huì)顯示"Your browser does not support HTML5 video."的提示信息。
為不支持HTML5媒體的瀏覽器提供備選方式
如果要為不支持HTML5媒體的瀏覽器提供備選方式來顯示視頻,同樣可以使用上述方法。
將以插件方式播放視頻的代碼作為備選內(nèi)容,在相同的位置插入即可。
lt;video src"video.ogg"gt;
lt;object data"videoplayer.swf" type"application/x-shockwave-flash"gt;
lt;param name"movie" value"video.swf"/gt;
lt;/objectgt;
lt;/videogt;
在這個(gè)例子中,如果瀏覽器不支持HTML5視頻,會(huì)顯示備選內(nèi)容中的Flash播放器對(duì)象。