flowplayer视频播放插件

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/

本文首发博客园，版权归作者跟博客园共有。

转载必须保留本段声明，并在页面显著位置给出本文链接，否则保留追究法律责任的权利。

 

分类: JavaScript, 开发笔记