web开源FlowPlayer视频播放器

现在的位置: 首页 > 综合 > 正文

web开源FlowPlayer视频播放器

2016年02月27日 ⁄ 综合 ⁄ 共 2229字 ⁄ 字号小中大 ⁄ 评论关闭

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

2.针对原作者的代码示例修正！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="flowplayer/flowplayer-3.2.11.min.js" type="text/javascript"></script>
</head>
<body>
<!--第一种方法-->
  <!-- <a href="video/story.flv" style="display: block; width: 670px; height: 450px" id="tl_player">
    </a>
    <script>
        flowplayer("tl_player", "flowplayer/flowplayer-3.2.12.swf");
    </script>-->

    <br />
    第二种方法
      <div id="tl_player" style="width: 670px; height: 450px;">
    </div>
    <script>
        flowplayer("tl_player", "flowplayer/flowplayer-3.2.12.swf", { clip: { url: "video/story.flv", autoPlay: false, autoBuffering: true} });
    </script>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

最近项目中需要添加播放视频的功能，视频文件是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>