【转】flowplayer视频播放插件

      最近项目中需要添加播放视频的功能,视频文件是flv格式的。在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些。特将使用方法记录一下。

flowplayer也有html5版本的,但由于网站为了支持IE较低版本,还是选择了flash版本的。

flowplayer官网:http://flowplayer.org/

一. 介绍:Flowplayer支持播放flv、swf等流媒体以及图片文件,能够非常流畅的播放视频文件,支持自定义配置和扩展。

二. 调用:

    1. 在页面头部Head标签内添加引用 (我使用的是3.2.12免费版,最新版可从官网下载)

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

    2. 在页面中添加播放器实例化代码:

   这里介绍两种调用方法

   方法一:

    <a href="/Video/story.flv" style="display: block; width: 670px; height: 450px" id="tl_player">
    </a>
    <script>
        flowplayer("tl_player", "/js/flowplayer/flowplayer-3.2.12.swf");
    </script>

 说明:

将a标签的href属性指向要播放的视频地址,设置播放器显示时的宽度和高度,设置a标签为display:block,并为a标签指定id,该id用于flowplayer的js调用。

 

方法二:

    <div id="tl_player" style="width: 670px; height: 450px;">
    </div>
    <script>
        flowplayer("tl_player", "/js/flowplayer/flowplayer-3.2.12.swf", { clip: { url: "/Video/story.flv", autoPlay: false, autoBuffering: true} });
    </script>

说明:

也可以用div或者span 等其他标签来作为播放器的容器,但要给定其style的高度,宽度且为块级元素。

一些设置参数:clip方法里的url:表示视频文件的真实地址,autoPlay:表示是否自动播放,默认是true,autoBuffering:表示是否自动缓冲,即当视频文件设置为不自动播放时,播放器仍然预先下载视频文件内容。

三. 免费版的缺点:

    1. 播放器在刚开始加载时,左下角会有一个logo,不过是一闪而过,正常播放时没有。

     

 

    2. 播放器在全屏时右上角会有一个大的logo标,不过在非全屏模式下不会显示。

     全屏模式下效果:

      

      非全屏模式下:

      

      3. 右键菜单:

      

 

附:我使用的3.2.12免费版及测试时的 Demo代码


原文地址:http://www.cnblogs.com/babycool/p/3172303.html

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值