html5的video標籤只有部分瀏覽器支持,對於IE只有9.0+以上的版本才支持,所以對於視頻播放要做兼容,很多地方已有這種方法,但是介紹的不夠詳細,下邊的步驟教大家這樣設置的原理及詳解。
方法/步驟
首先下載所需要的源文件:html5media.min.js,flowplayer.controls.swfflowplayer.swf,我的雲盤裡已打包,大家可以去下載如果鏈接被屏蔽,請私信我,留下郵箱,我發給你們。
然後將解壓後的js文檔和swf文檔放在同一目錄下,在head部分引入js文檔,
然後在要引入視頻的位置放入video標籤,通常放置在div內
width:為視頻播放寬度,height:為視頻播放高度,如果視頻大笑適中這裡可以不設置,播放器會自動加載視頻的原始大小。
如果視頻原始大小太大,但不清楚比例,可以只設置高度或者寬度。另外一個設置為auto自動適應,這樣視頻不會變形。
如果想要視頻自動播放,可在video標籤中加入autoplay標籤
src為視頻源文件的路徑,
poster為視頻播放前顯示的圖片。為播放切換的自然,這裡可以設置成視頻播放的第一個畫面截圖。
preload:為預加載視頻,設置為auto代表自動加載。
source標籤可以省略,但是video標籤內的src屬性不能省略,如果省略,在IE瀏覽器中會報錯。
所以最後精簡後的源碼可以如下圖所示這樣
如果調試過程中,其他瀏覽器沒有問題,但是ie總是有問題的話,清空ie瀏覽器的緩存再調試。清空緩存步驟如下,先找到Internet工具
進入後,點擊瀏覽歷史下面的刪除按鈕
清除如下內容即可,完成後,再用IE刷新頁面。