Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > 视频播放器 vcastr 使用详解

    视频播放器 vcastr 使用详解

    HTML5 herman 3921浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    我在 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）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

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

    相关文章推荐