html5的video標簽只有部分瀏覽器支持,對于IE只有9.0+以上的版本才支持,所以對于視頻播放要做兼容,下載所需要的源文件:html5media.min.js,flowplayer.controls.swfflowplayer.swf即可解決。詳細步驟:
創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、香格里拉網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5響應式網(wǎng)站、成都商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站建設公司、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務,價格優(yōu)惠性價比高,為香格里拉等各大城市提供網(wǎng)站開發(fā)制作服務。
1、首先下載所需要的源文件:html5media.min.js,flowplayer.controls.swfflowplayer.swf。
2、然后將解壓后的js文檔和swf文檔放在同一目錄下,在head部分引入js文檔,
3、然后在要引入視頻的位置放入video標簽,通常放置在div內(nèi)
4、width:為視頻播放寬度,height:為視頻播放高度,如果視頻大笑適中這里可以不設置,播放器會自動加載視頻的原始大小。
如果視頻原始大小太大,但不清楚比例,可以只設置高度或者寬度。另外一個設置為auto自動適應,這樣視頻不會變形。
如果想要視頻自動播放,可在video標簽中加入autoplay標簽。
5、src為視頻源文件的路徑,poster為視頻播放前顯示的圖片。為播放切換的自然,這里可以設置成視頻播放的第一個畫面截圖。
preload:為預加載視頻,設置為auto代表自動加載。
source標簽可以省略,但是video標簽內(nèi)的src屬性不能省略,如果省略,在IE瀏覽器中會報錯。
所以最后精簡后的源碼可以如下圖所示這樣。
6、如果調(diào)試過程中,其他瀏覽器沒有問題,但是ie總是有問題的話,清空ie瀏覽器的緩存再調(diào)試。清空緩存步驟如下,先找到Internet工具
7、進入后,點擊瀏覽歷史下面的刪除按鈕。
8、清除如下內(nèi)容即可,完成后,再用IE刷新頁面。
網(wǎng)頁提示瀏覽器不支持HTML5是設置錯誤造成的,解決方法為:
1、打開IE,選擇“工具”-“Internet選項”。
2、選擇“安全”選卡,選擇下面的“自定義級別”。
3、將Activex控件和插件下的啟用和禁用單選按鈕選擇啟用;將腳本下的啟用和禁用單選按鈕選擇啟用。
4、點擊開始菜單,選擇控制面板,點擊“卸載程序”。
5、點擊左上角的“查看已安裝的更新”。
6、在右上角搜索框中搜索“KB3034196”,在搜索結(jié)果“KB3034196”補丁上單擊右鍵,選擇卸載,完成后按提示重啟計算機即可。
第一種方法:IE9以下版本的IE將創(chuàng)建HTML5標簽, 非IE瀏覽器會忽略這段代碼,因此不會發(fā)生http請求,也就不影響網(wǎng)頁執(zhí)行效率。
!--[if lt IE9]
script
(function() {
if (!
/*@cc_on!@*/
0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
})()
/script
![endif]--
第二種方法:在你的網(wǎng)頁中引入Google的html5shiv包(推薦)
!--[if lt IE9]
script src=""/script
![endif]--
但是不管使用以上哪種方法,都要初始化新標簽的CSS.因為HTML5在默認情況下表現(xiàn)為內(nèi)聯(lián)元素,對這些元素進行布局我們需要利用CSS手工把它們轉(zhuǎn)為塊狀元素方便布局
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
但是如果ie6/7/8 禁用腳本的用戶,那么就變成了無樣式的"白板"網(wǎng)頁,我們該怎么解決呢?
我們可以參照facebook的做法,即引導用戶進入帶有noscript標識的 “/?_fb_noscript=1”頁面,用 html4 標簽替換 html5 標簽,這要比為了保持兼容性而寫大量 hack 的做法更輕便一些。
!--[if lte IE 8]
noscript
style.html5-wrappers{display:none!important;}/style
div class="ie-noscript-warning"您的瀏覽器禁用了腳本,請a href=""查看這里/a來啟用腳本!或者a href="/?noscript=1"繼續(xù)訪問/a.
/div
/noscript
![endif]--
引導用戶開啟腳本,或者直接跳轉(zhuǎn)到HTML4標簽設計的界面。
HTML5 標準是新的網(wǎng)頁語言標準,html5原生的video更靈活更好用顯示更美觀,雖然現(xiàn)在很多瀏覽器都在擁抱html5標準,但是html5的標準還未正式發(fā)布。所以有些舊瀏覽器不支持html5的新標簽或者一些新瀏覽器支持不全html5的新標簽新特性,導致一些html5網(wǎng)頁中的特性發(fā)揮不出來作用或者出錯了。
等標準的完善慢慢就會好的,你這種情況應該是當前瀏覽器不支持瀏覽網(wǎng)頁中的video造成的,目前對html5最好的瀏覽器我個人認為是ch ome瀏覽器,360的瀏覽器其中的極速模式對html5支持也不錯,兼容模式要看ie的版本了,如果是ie11那還行。
最簡單的解決辦法就是,你多更換幾個瀏覽器,選擇一個合適并且你習慣使用的即可解決問題了。