兼容各种版本浏览器网页视频播放制作路程

今天主要是分享一些关于做视频广告的心得，我们大家都知道，现在h5有个标签——<video>是支持视频播放的，在主流的浏览器支持h5的情况下，这是可行的，但是往往需求要求支持低版本浏览器要兼容，如IE9以下浏览器、GeckoBrowser内核浏览器等，在这些浏览器上使用<video>标签是无法正常运行的，那该如何解决视频播放兼容不同版本的浏览器呢，今天我推荐的是jquery-1.8.0.min.js+flowplayer-3.2.11.min.js+flowplayer-3.2.12.swf来实现。

首先先准备需要用到的文件，jquery-1.8.0.min.js(http://www.veryhuo.com/down/html/jquery1.8.html)，flowplayer-3.2.11.min.js(http://down.51cto.com/data/433764)，flowplayer-3.2.12.swf（http://www.kuaixiazai.com/fileview_2811772.html），准备好后创建项目，项目大概是这样：

VideoProject

js文件夹->jquery-1.8.0.min.js、flowplayer-3.2.11.min.js、flowplayer-3.2.12.swf

video文件夹->放对应的视频

video.html

页面将jquery-1.8.0.min.js和flowplayer-3.2.11.min.js引用进来，

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="js/flowplayer-3.2.11.min.js" type="text/javascript"></script>

在页面添加一个div,<div id="tl_player" style="width: 645px; height: 500px;"></div>

初始化视频：

<script language="javascript">
            var currNum = 0;
            var api = flowplayer("tl_player", "../../js/lib/video/flowplayer-3.2.12.swf",
   {
       clip:
   {
       autoPlay: false,
       autoBuffering: true,
       loop: true
   },
       playlist: [
   {
       url: "video/aa.mp4",
       autoPlay: true
   },
   {
       url: "video//minneapolis_cedarlake.mov",
       autoPlay: true
   }
       ],
       onFinish: function () {
           if (currNum == 1)
           {
               currNum = -1;
               this.play(0, { autoPlay: true }); 
           }
           
           currNum++;
       }
   });
        </script>

这边主要讲解下这段代码的一些属性的使用：flowplayer（）初始化视频播放器播放配置，上面第一个参数“tl_player”对应div中的id即可，第二个参数是播放器的皮肤（这个皮肤你可以在网上另外找也行），具体要讲的是第三个参数配置，playlist->播放视频列表，主要结构含视频播放的Url，当然里面还可以加相应视频播放的一些其他参数，这里加了autoPlay，设置为true，即播放器加载视频后自动播放，onFinish->视频播放后事件，这里可以操作视频播放完毕后相应操作，上面t this.play(0, { autoPlay: true });是指视频播放完毕后重新播放第一个视频，效果如下：