2015-03-11 15:12:00
一、Flowplayer介绍：
flowplayer是一款开源的WEB视频播放器，可以将它集成到任何网页中，并可以个性化设置一些参数，达到预设效果。
二、Flowplayer下载：
官网主页：http://flowplayer.org
下载地址：http://flowplayer.org/download/index.html
下载RTMP：http://flowplayer.org/plugins/streaming/rtmp.html#download
api：http://www.flowplayer.org/docs/api.html#methods
http://flash.flowplayer.org/documentation/api/player.html
例子：http://blog.sina.com.cn/s/blog_5f0583ab010106fw.html
三、Flowplayer使用：
说明：
flowplayer-3.2.18.swf： 用于播放器主体的flash文件
flowplayer.controls-3.2.16.swf：控制条文件，是个可选的插件
flowplayer-3.1.1.min.js： 播放器的api文件，也用来装载整个播放器
在项目目录夹下，将flowplayer.controls-3.2.16.swf文件和flowplayer-3.2.18.swf文件放在同一目录。
1、引入源文件：
<script type="text/javascript" sr c="js/flowplayer-3.2.13.min.js"></script>
<link rel="stylesheet" type="text/css" hre f="css/style.css">
2、HTML代码：
<a
hre f="videoSources/flowplayer-700.flv"
style="display:block;width:520px;height:330px"
id="player">
</a>
href:要播放的视频文件
3、javascript加载播放器：
<script type="text/javascript">
flowplayer("player", "videoSources/flowplayer-3.2.18.swf");
</script>
flowplayer函数的第一个参数为：<a>标签的ID，第二个参数为：加载播放器的SWF文件
这样，就可以播放本地视频了。
四、高级设置：
1、初始化时显示图片：
<html>
<head>
<base hre f="<%=basePath%>">
<title>初始化显示图片</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" sr c="js/jquery-1.8.0.min.js"></script>
<!-- Begin 使用Flowplayer -->
<script type="text/javascript" sr c="js/flowplayer-3.2.13.min.js"></script>
<link rel="stylesheet" type="text/css" hre f="css/style.css">
<!-- End 使用Flowplayer -->
</head>
<body>
<a
hre f="videoSources/age.f4v"
style="display:block;width:520px;height:330px"
id="player2">
<img sr c="images/age.jpg"/><!-- 加入img节点 -->
</a>
<script type="text/javascript">
flowplayer("player2", "videoSources/flowplayer-3.2.18.swf");
</script>
</body>
</html>
2、视频播放器加载到div中：
<html>
<head>
<base hre f="<%=basePath%>">
<title>将视频放在div中</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" sr c="js/jquery-1.8.0.min.js"></script>
<!-- Begin 使用Flowplayer -->
<script type="text/javascript" sr c="js/flowplayer-3.2.13.min.js"></script>
<link rel="stylesheet" type="text/css" hre f="css/style.css">
<!-- End 使用Flowplayer -->
</head>
<body>
<div style="width:425px;height:300px;margin:0 auto;" id="player"></div>
<script>
flowplayer(
"player",
"htt p://releases.flowplayer.org/swf/flowplayer-3.2.18.swf",
"htt p://stream.flowplayer.org/flowplayer-700.flv"
);
</script>
</body>
</html>
3、使用RTMP协议，实现直播：
<html>
<head>
<base hre f="<%=basePath%>">
<title>Flowplayer直播流配置</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" sr c="js/jquery-1.8.0.min.js"></script>
<!-- Begin 使用Flowplayer -->
<script type="text/javascript" sr c="js/flowplayer-3.2.13.min.js"></script>
<link rel="stylesheet" type="text/css" hre f="css/style.css">
<!-- End 使用Flowplayer -->
</head>
<body>
<div id="live" style="width: 600px; height: 400px"></div>
<script>
$f("live","videoSources/flowplayer-3.2.18.swf",
{
clip : {
url : '27062669',//视频文件名
live : true,
provider : 'rtmp'//定义插件名
},
// 流插件配置在 plugins节点下
plugins : {
// 插件配置
rtmp : {
url : "videoSources/flowplayer.rtmp-3.2.13.swf",
// netConnectionUrl ：视频流的路径
netConnectionUrl : 'rtmp://xxx.com.cn/live'
}
}
});
</script>
</body>
</html>
4、更多参数设置：
<html>
<head>
<base hre f="<%=basePath%>">
<title>个性化定制播放器</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" sr c="js/jquery-1.8.0.min.js"></script>
<!-- Begin 使用Flowplayer -->
<script type="text/javascript" sr c="js/flowplayer-3.2.13.min.js"></script>
<link rel="stylesheet" type="text/css" hre f="css/style.css">
<!-- End 使用Flowplayer -->
</head>
<body>
<a
hre f="videoSources/age.swf"
style="display:block;width:520px;height:330px"
id="player2">
</a>
<script type="text/javascript">
flowplayer("player2", "videoSources/flowplayer-3.2.18.swf",
{
clip: {
autoPlay: false,//主动播放
autoBuffering:true//是否开启缓冲
},
plugins: {
controls: {
bottom: 0,//功能条距底部的间隔
height: 24, //功能条高度
zIndex: 1,
fontColor: "#000000",
timeFontColor: "#333333",
playlist: true,//上一个、下一个按钮
play:true, //开端按钮
volume: true, //音量按钮
mute: true, //静音按钮
stop: true,//停止按钮
fullscreen: true, //全屏按钮
scrubber: true,//进度条
url: "videoSources/flowplayer.controls-3.2.16.swf",
time: true, //是否显示时候信息
autoHide: true, //功能条是否主动隐蔽
backgroundColor: "#000000", //靠山色彩
//靠山色彩渐变度（等分的点渐变）
backgroundGradient: [5.1, 5.1, 5.1],
opacity: 0.5, //功能条的透明度
borderRadius: "30",//功能条边角
tooltips: {
buttons: true,//是否显示
//全屏按钮，鼠标指上时显示的文本
fullscreen: "全屏",
stop:"停止",
pause:"暂停",
play:"开始",
volume:"音量",
mute: "静音",
next:"下一个",
previous:"上一个"
}
}
}
});
</script>
</body>
</html>