视频播放器 vcastr 使用详解

HTML5 herman 1165浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

我在 CSDN 写过一篇关于 HTML5视频播放器 video.js 的使用。但是后来还有很多网友问我关于 vcastr 播放器的使用,于是我这里在整理一下关于 vcastr 播放器的相关知识,大家共勉!

vcastr 和 video.js 比较起来说,还是 video.js 好用。它简单,而且在flash将要淘汰的时代,它更加被人们所推荐。

vcastr 是开发源代码的。源代码和官方实例都在:http://code.google.com/p/vcastr/

vcastr播放器 xml配置参数说明

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”:影片充满播放器,保持比例,可能会被裁剪

Vcastr 插件设置参数

plugIns:中每一个子节点代表一个插件,可以设置多个插件
plugIns.logoPlugIn:显示logo插件的参数设置
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”
plugIns.javaScriptPlugIn:javaScript控制插件的参数设置
plugIns.javaScriptPlugIn.url:插件的地址,可以使用绝对地址,也可以使用相对地址,绝对地址需要http://开始

vcastr3.swf 播放器播放效果

vcastr3.swf 播放器播放视频效果

vcastr 播放器使用方法

<object type="application/x-shockwave-flash"
    data="http://ttvod.91tata.com/vcastr3.swf" width="620"
    height="380" id="vcastr3">
    <param name="movie" value="http://ttvod.91tata.com/vcastr3.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="FlashVars"
        value="xml=
        {vcastr}
            {channel}
                {item}
                    {source}http://ttvod.91tata.com/xiakexing2.flv{/source}
                {/item}
            {/channel}
            {config}
                {isAutoplay}false{/isAutoplay}
                {isLoadBegin}false{/isLoadBegin}
            {/config}
        {/vcastr}" />
</object>

插件下载地址

http://download.csdn.net/detail/daidaineteasy/9720332

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 视频播放器 vcastr 使用详解