flowplayer(html5和flash)播放器

官网：https://flowplayer.org

1.flash版，最新版本：flowplayer-3.2.18

<script type="text/javascript" src="../flowplayer-3.2.18.min.js"></script>

实现方式一：

          <a

             href="http://v.jinlanmeng.cn:8080/jingjieyuzhihui/jjzh.mp4"

             style="display:block;width:520px;height:330px"

             id="player1">

        </a>

        <script>

            flowplayer("player1", "../flowplayer-3.2.18.swf");

        </script>

实现方式二：

          <div id="player2"  style="display:block;width:520px;height:330px">

        </div>

        <script type="text/javascript">

            flowplayer(

                "player2",

                "../flowplayer-3.2.18.swf",{

                clip: {

                    url: "http://v.jinlanmeng.cn:8080/tiebandi/1.mp4",

                    autoPlay: false,     //自动播放

                    autoBuffering: true  //自动缓存

                    }

                 }

            );

        </script>

2 html5版

实现方式一

      //html

        <div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167" >

            <video controls autoPlay >

                <source id="videosource" type="video/mp4" src="http://v.jinlanmeng.cn:8080/tiebandi/1.mp4" >

            </video>

        </div>

//javascript

       $(document).ready(function(){

             $(".flowplayer").flowplayer({

                  cuepoints: [2,5] //播放时间断点

             });

             flowplayer().bind("load", function (e,api,cuepoint) {

                  //do something

             });

             flowplayer().bind("ready", function (e,api,cuepoint) {

                  //do something

                  var time=100;

                  api.seek(time);

              });

             flowplayer().bind("cuepoint", function (e,api,cuepoint) {

                 alert(cuepoint.time);

             });

        });

实现方式二：

//html

         <div id="player" class="fixed-controls"></div>

         <script type="text/javascript">

              var playapi;

              $(document).ready(function(){

                   playapi=$("#player").flowplayer({

                       playlist:[

                          [

                              {mp4:"http://v.jinlanmeng.cn:8080/edu/season1/zhuguangwen-8dbg.mp4"}

                          ]

                       ],

                       ratio: 0.4167,

                       swf:"flowplayer.swf",

                       cuepoints: [1005,1010]

                   }).one('ready', function(ev, api) {

                       api.seek(1000);

                       api.resume();//自动播放

                   });

                   playapi.bind("cuepoint",function (e,api,cuepoint){

                       alert(cuepoint.time);

                   });

                   setInterval("getvideotime()",5000);

              });

              function getvideotime(){

                  var time = flowplayer().ready?flowplayer().video.time:0;

                  alert(parseInt(time));

              }

         </script>

注:

各路神仙 若有错误 请留言！！！