1. 程式人生 > >幾乎相容所有瀏覽器的html5視訊播放策略

幾乎相容所有瀏覽器的html5視訊播放策略

1:JS方式

使用html5media.js可以在所有瀏覽器上觀看html5視訊和音訊檔案,它彌補了低版本IE瀏覽器不支援<video>和<audio>標籤,只需要載入html5media.js使用<video>和<audio>標籤就能跨瀏覽器播放視訊和音訊。

a:在頁面的head內部加入以下一行程式碼:

<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script> 
b:網頁內容裡新增以下程式碼(video標籤的其他屬性設定可自己視情況設定)
<video
 src="video.mp4" width="320" height="200" controls preload></video> 

方式2:程式碼如下:(修改視訊地址為自己有效視訊地址即可)

<video controls="controls" preload="auto" poster="img/websiteIMG/appcat.png" width="683px" height="384px">                     <source src="http://www.wolaizuo/b.mp4 " type="video/mp4">                     <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="100%" height="100%">                    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">                    <param name="allowFullScreen" value="true">                    <param name="wmode" value="transparent">                    <param name="flashVars" value="config={'playlist':['',{'url':'http://www.wolaizuo.com/b.mp4','autoPlay':true}]}">                    <img alt="Big Buck Bunny" src="#" width="683px" height="384px" title="No video playback capabilities, please download the video below">                     </object>                 <video>

注意:即使是MP4格式,也會因為視訊編碼格式問題無法相容;