Vcastr - 流行的 Flv 播放器介绍与使用

一、Vcastr介绍

Vcastr 是一款 Flv 播放器，可以用于各种内容管理系统（CMS），它拥有众多特点和自定义设置，目前最新版为3.0。

二、功能介绍

可以读取 xml 设置播放列表
可以直接读取出 flv 地址进行播放
多影片连续播放
自定义尺寸，自动适应
简洁播放器风格
自定义循环播放
支持最大化播放
支持直接js嵌入

三、参数说明

以下是详细的参数说明（注：如果想让全屏按钮可以使用，则必须设置 flash 的 allowFullScreen 属性为 true。）

参数名称	参数说明	默认值
vcastr_file	传递影片 flv 文件地址参数，多个使用 \| 分开	空
vcastr_title	影片标题参数，多个使用 \| 分开	空
vcastr_xml	该参数为使用 xml 方式传入影片才使用	vcastr.xml
IsAutoPlay	影片自动播放参数：0表示不自动播放，1表示自动播放	0
IsContinue	影片连续播放参数：0表示不连续播放，1表示连续循环播	1
IsRandom	影片随机播放参数：0表示不随机播放，1表示随机播放	0
DefaultVolume	默认音量参数：0-100 的数值，设置影片开始默认音量大小	100
BarPosition	控制栏位置参数：0表示在影片上浮动显示，1表示在影片下方显示	0
IsShowBar	控制栏显示参数：0表示不显示；1表示一直显示；2表示鼠标悬停时显示；3表示开始不显示，鼠标悬停后显示	2
BarColor	播放控制栏颜色，颜色都以0x开始16进制数字表示	0x000033
BarTransparent	播放控制栏透明度	60
GlowColor	按键图标颜色，颜色都以0x开始16进制数字表示	0x66ff00
IconColor	鼠标悬停时光晕颜色，颜色都以0x开始16进制数字表示	0xFFFFFF
TextColor	播放器文字颜色，颜色都以0x开始16进制数字表示	0xFFFFFF
LogoText	可以添加自己网站名称等信息(英文)	空
LogoUrl	可以从外部读取 logo 图片，注意自己调整 logo 大小，支持图片格式和 swf 格式	空
EndSwf	影片播放结束后,从外部读取 swf 文件，可以添加相关影片信息，影片分享等信息，需自己制作	空
BeginSwf	影片开始播放之前,从外部读取 swf 文件，可以添加广告，或者网站信息，需自己制作	空
IsShowTime	是否显示时间 : 0表示不显示时间，1表示显示时间	1
BufferTime	影片缓冲时间，单位（秒）	2

四、使用方法

1.直接使用网址播放

例如：vcastr2_2.swf?vcastr_file=flv地址1

如果想传递多个参数，可用 & 连接

例如：vcastr2_2.swf?vcastr_file=flv地址1|flv地址2&vcastr_title=文件标题1|文件标题2

在页面中嵌入 flash 推荐使用 SWFObject.js，具体的可以查看>>总结调用Flash的几种方法

2.普通传值方式

HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vcastr Test</title>
</head>
<body>
    <h1>Vcastr Test</h1>
    <h2>使用 SWFObject 方式嵌入</h2>
    <div id="flashCon">当前的浏览器没有安装或者 FlashPlyaer 版本不够高，请从<a href="http://www.adobe.com/go/getflashplayer">这里</a>下载安装最新的FlashPlyaer</div>
    <script src="swfobject.js"></script>
    <script>
    var FlashVars = {
         vcastr_file:"test.flv", //设置影片地址,多个用 | 隔开
         vcastr_title:"title" //设置影片title,多个用 | 隔开
    };
    var params = {
        menu:"false",
        allowFullscreen:"true",
        wmode: "transparent"    
    }
    swfobject.embedSWF("vcastr3_0.swf","flashCon","600","400","9.0.0","",FlashVars,params);
    </script>
</body>
</html>

3.通过 xml 传入影片设置（注：3.0版本在本地测试时需要使用本地Web服务环境）

HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vcastr Test</title>
</head>
<body>
    <h1>Vcastr Test</h1>
    <h2>使用 xml 传入影片设置</h2>
    <div id="flashCon">当前的浏览器没有安装或者 FlashPlyaer 版本不够高，请从<a href="http://www.adobe.com/go/getflashplayer">这里</a>下载安装最新的FlashPlyaer</div>
    <script src="swfobject.js"></script>
    <script>
    var FlashVars = {
         vcastr_xml:"vcastr3_0.xml" //通过 xml 传入影片设置
    };
    var params = {
        menu:"false",
        allowFullscreen:"true",
        wmode: "transparent"    
    }
    swfobject.embedSWF("vcastr3_0.swf","flashCon","600","400","9.0.0","",FlashVars,params);
    </script>
</body>
</html>

XML：

<?xml version="1.0" encoding="utf-8" ?>
<vcastr>
    <channel>
        <item>
            <source>test.flv</source>
            <duration></duration>
            <title>title</title>
            <link></link>
        </item>
    </channel>
    <config>
        <bufferTime>4</bufferTime>
        <contralPanelAlpha>0.75</contralPanelAlpha>
        <controlPanelBgColor>0xff6600</controlPanelBgColor>
        <controlPanelBtnColor>0xffffff</controlPanelBtnColor>
        <contralPanelBtnGlowColro>0xffff00</contralPanelBtnGlowColro>
        <controlPanelMode>normal</controlPanelMode>
        <defautVolume>0.7</defautVolume>
        <isAutoPlay>true</isAutoPlay>
        <isLoadBegin>true</isLoadBegin>
        <isShowAbout>true</isShowAbout>
        <scaleMode>showAll</scaleMode>
        <isRepeat>false</isRepeat>
    </config>
</vcastr>

XML 详细参数说明：(适用于3.0版本，3.0版本之前的参数较简单，故不作特别说明)

参数	说明
影片信息设置
channel.item	影片信息，可以设置多个影片
channel.itme.source	flv 影片地址参数，此参数是唯一必须要有的参数，其他参数都可以不要，播放器有默认参数
channel.itme.duration	对应影片的总时间, 单位是秒，由于有些影片在制作过程中时间信息丢失，可以通过这里来设置
channel.itme.tilte	对应影片的标题
channel.itme.link	对应影片点击后的链接
播放器设置
config.bufferTime	在缓存区影片的时间,单位是秒
config.contralPanelAlpha	控制栏的透明度，在0—1之间
config.controlPanelBgColor	控制栏背景的颜色
config.controlPanelBtnColor	控制按钮的颜色
config.contralPanelBtnGlowColro	控制按钮光晕的颜色
config.defautVolume	默认的声音大小,最大为1,最小为0
config.controlPanelMode	控制栏的显示模式： “float”: 默认的浮动模式,鼠标移除播放器就会隐藏掉 “normal”: 正常模式，任何时候都在影片的下部浮动显示 “bottom”: 下部模式，不浮动在影片之上，而是显示在影片下方 “none”: 不显示播放器控制栏
config.isAutoPlay	是否影片自动开始播放,默认是true
config.isLoadBegin	是否一开始就读取影片,默认是true
config.isRepeat	是否循环播放影片,默然是false
config.isShowAbout	是否显示关于信息
config.scaleMode	影片缩放模式： “showAll”: 可以看到全部影片,保持比例,可能上下或者左右 “exactFil”: 缩放影片到播放器的尺寸,可能比例失调 “noScale”: 影片的原始尺寸,无缩放 “noBorder”: 影片充满播放器,保持比例,可能会被裁剪
插件设置
Logo 插件
plugIns.logoPlugIn	显示logo插件的参数设置（需logoPlugIn.swf）
plugIns.logoPlugIn.url	插件的地址，可以使用绝对地址，也可以使用相对地址，绝对地址需要http://开始
plugIns.logoPlugIn.logoText	logo文字，注意之可以使用英文和英文标点，不支持中文，如果想放中文，就把中文做成文字png透明图片，用plugIns.logoPlugIn.logoClipUrl参数设置
plugIns.logoPlugIn.logoTextAlpha	文字的透明度
plugIns.logoPlugIn.logoTextLink	文字的连接
plugIns.logoPlugIn.logoTextFontSize	文字字体的大小
plugIns.logoPlugIn.logoTextColor	文字的颜色
plugIns.logoPlugIn.textMargin	文字的位置，用了css的margin概念，四个数值代表上右下左相对于播放器的距离，四个数值用空格分开，不需具体数值用”auto”填写，比如左上对齐并都有10像素的距离可以写 “10 auto auto 10″, 右下角对齐是”auto 10 10 auto”
plugIns.logoPlugIn.logoClipUrl	图片logo的url，可以使用绝对地址，也可以使用相对地址，绝对地址需要http://开始
plugIns.logoPlugIn.logoClipAlpha	图片logo的透明度
plugIns.logoPlugIn.logoClipLink	图片logo的连接
plugIns.logoPlugIn.clipMargin	图片logo的位置，用了css的margin概念，四个数值代表上右下左相对于播放器的距离，四个数值用空格分开，不需具体数值用”auto”填写，比如左上对齐并都有10像素的距离可以写 “10 auto auto 10″, 右下角对齐是”auto 10 10 auto”
JavaScript 插件
plugIns.javaScriptPlugIn	javaScript控制插件的参数设置（需javaScriptPlugIn.swf）
plugIns.javaScriptPlugIn.url	插件的地址，可以使用绝对地址，也可以使用相对地址，绝对地址需要http://开始
其它插件
beginEndImagePlugIn	影片开始和结尾需要加载外部资源(可以是图片或者swf)的插件
beginEndImagePlugIn.logoPlugIn.url	插件的地址，可以使用相对或者绝对地址，绝对地址需要http://开始
beginEndImagePlugIn.logoPlugIn.source	开始的图片或者swf的地址
beginEndImagePlugIn.logoPlugIn.type	显示方式，有3种显示方法，begin:在开始的显示，end:结尾部分显示，beginEnd:在开始和结尾部分同时显示
beginEndImagePlugIn.logoPlugIn.scaleType	“showAll”: 可以看到全部影片,保持比例,可能上下或者左右 “exactFil”: 放缩影片到播放器的尺寸,可能比例失调 “noScale”: 影片的原始尺寸,无放缩 “noBorder”: 影片充满播放器,保持比例,可能会被裁剪

Logo 插件设置例子：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vcastr Test</title>
</head>
<body>
    <h1>Vcastr Test</h1>
    <h2>Logo 插件</h2>
    <div id="flashCon">当前的浏览器没有安装或者 FlashPlyaer 版本不够高，请从<a href="http://www.adobe.com/go/getflashplayer">这里</a>下载安装最新的FlashPlyaer</div>
    <script src="swfobject.js"></script>
    <script>
    var FlashVars = {
         xml:"<vcastr><plugIns><logoPlugIn><url>logoPlugIn.swf</url><logoText>testdomain.com</logoText></logoPlugIn></plugIns><channel><item><source>test.flv</source></item></channel></vcastr>" //也可以通过外调的方式传 xml 设置，例子如上面的 xml 设置
    };
    var params = {
        menu:"false",
        allowFullscreen:"true",
        wmode: "transparent"    
    }
    swfobject.embedSWF("vcastr3_0.swf","flashCon","600","400","9.0.0","",FlashVars,params);
    </script>
</body>
</html>

JavaScript 插件设置例子：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vcastr Test</title>
</head>
<body>
    <h1>Vcastr Test</h1>
    <h2>JavaScript 插件</h2>
    <div id="flashCon">当前的浏览器没有安装或者 FlashPlyaer 版本不够高，请从<a href="http://www.adobe.com/go/getflashplayer">这里</a>下载安装最新的FlashPlyaer</div>
    <script src="swfobject.js"></script>
    <script>
    var FlashVars = {
         xml:"<vcastr><plugIns><javaScriptPlugIn><url>javaScriptPlugIn.swf</url></javaScriptPlugIn></plugIns><channel><item><source>test.flv</source></item></channel></vcastr>" //也可以通过外调的方式传 xml 设置，例子如上面的 xml 设置
    };
    var params = {
        menu:"false",
        allowFullscreen:"true",
        wmode: "transparent"    
    }
    swfobject.embedSWF("vcastr3_0.swf","flashCon","600","400","9.0.0","",FlashVars,params);
    
    //javascript 控制
    function vcastrEvent(type,state,playHeadTime,loadPersent) {//事件、状态、当前播放时间、下载百分比（值为0-1）
        var oResult=document.getElementById('result');
        oResult.innerHTML="当前事件:"+type+"　状态:"+state+"　播放时间:"+playHeadTime+"　下载百分比:"+loadPersent;
    }
    function getVcastr(id) {
        if (navigator.appName.indexOf("Microsoft") != -1) {
            return window[id];
        } else {
            return document[id];
        }
    }
    </script>
    <p>
        <a href="javascript:getVcastr('flashCon').playPause();">播放/暂停</a>
        <a href="javascript:getVcastr('flashCon').videoPlay();">播放</a>
        <a href="javascript:getVcastr('flashCon').pause();">暂停</a>
        <a href="javascript:getVcastr('flashCon').videoStop();">停止</a>
        <a href="javascript:getVcastr('flashCon').ff();">快退</a>
        <a href="javascript:getVcastr('flashCon').rew();">快进</a>
        <a href="javascript:getVcastr('flashCon').next();">下一个</a>
        <a href="javascript:getVcastr('flashCon').prev();">上一个</a>
        <a href="javascript:getVcastr('flashCon').volumeTo(0.2);">音量控制</a>
        <a href="javascript:getVcastr('flashCon').seek(20);">影片跳转</a>
        <a href="javascript:getVcastr('flashCon').playerSizeTo(400,200);">播放器大小</a>
        <a href="javascript:getVcastr('flashCon').playerMoveTo(300,200);">播放器移动</a>
    </p>
    <p id="result"></p>
</body>
</html>

Vcastr项目主页>>https://code.google.com/p/vcastr/

本篇用到的例子下载>>Vcastr-Sample（案例中包含本地小型Web服务环境，方便本地测试3.0版本，同时个人觉得2.2版本的全屏按钮比较好看，故同时保含该版本案例）

注：腾讯电脑管家会对压缩包中的 aws.exe 报毒。Update：2013/11/29

posted @ 2013-03-23 17:26 Milly 阅读(2313) 评论(1) 编辑收藏举报

刷新页面返回顶部

前端笔记

关注开源/记录工作/学习分享/