好友团

24小时服务电话

134-2860-6060

查看: 599|回复: 0

[综合教程] video++ web网站接入播放器教程

[复制链接]
发表于 2017-5-16 22:27:45 | 显示全部楼层 |阅读模式
填写您的邮件地址,订阅我们的精彩内容:
[受理编号:SL-2532]
填写您的邮件地址,订阅我们的精彩内容:
video web网站接入播放器教程



Video 技术作为互动视频播放器嵌入到视频播放的页面中。您可以根据您的建站方式选择接入模式。
如果您直接编写代码建站,请选择开发者模式;如果使用wordpress、织梦、帝国等CMS工具建站,请选用插件模式接入。
开发者模式
开发者模式适用于直接用代码开发的网站


第一步:引用资源文件


第二步:新建一个div


第三步:在div中接入代码
1、我们推荐您使用Video 官方最新的CDN地址,可以保证您的播放器更新更加及时。
点播模式
引用资源文件,将脚本文件插入到网页的合适位置:
  1. <!-- 如需要实时推送消息功能,请先引用客户端的socket库 -->
  2. <script type="text/javascript" src="http://7xl3wn.com2.z0.glb.qiniucdn.com/socket.io.min.js"></script>
复制代码
  1. <script type="text/javascript" src="http://7xjfim.com2.z0.glb.qiniucdn.com/Iva.js"></script>
复制代码
  • 新建一个div作为视频播放的窗口,建议div的宽高在640px*480px以上,如果小于此宽高的话,视频会以弹窗形式播放。
  • 在网页合适位置写入如下代码,并对参数进行相应的设置,即可创建互动视频实例:

  1. /**

  2. *创建Iva实例,以下参数值是时间的均以秒为单位

  3. */

  4. var ivaInstance = new Iva(
  5. '父容器',//父容器id或者父容器DOM对象,给父容器设置宽高640px*480px以上可以获得最佳的浏览体验;如果宽高在640px*480px以下,Iva会以弹窗形式呈现
  6. {
  7.    appkey: '应用标识',//必填,请在控制台查看应用标识
  8.    live: false,//选填,是否是直播流,默认为false
  9.    video: '视频地址url',//必填,播放地址([url]http://www.tudou.com/programs/view/tM_vZCQy2uM/[/url])或者资源地址([url]http://7xi4ig.com2.z0.glb.qiniucdn.com/shapuolang_ts.mp4[/url])
  10.    title: '小视频',//选填,视频标题
  11.    cover: '视频封面url',//选填,视频封面url
  12.    videoStartPrefixSeconds: 0,//选填,跳过片头,默认为0
  13.    videoEndPrefixSeconds: 0,//选填,跳过片尾,默认为0
  14.    /* 以下参数可以在“控制台->项目看板->应用管理->播放器设置”进行全局设置,前端设置可以覆盖全局设置 */
  15.    skinSelect: 0,//选填,播放器皮肤,可选0、1、2,默认为0,
  16.    autoplay: false,//选填,是否自动播放,默认为false
  17.    rightHand: true,//选填,是否开启右键菜单,默认为false
  18.    autoFormat: false,//选填,是否自动选择最高清晰度,默认为false
  19.    bubble: true,//选填,是否开启云泡功能,默认为true
  20.    jumpStep: 10,//选填,左右方向键快退快进的时间
  21.    tagTrack: false,//选填,云链是否跟踪,默认为false
  22.    tagShow: false,//选填,云链是否显示,默认为false
  23.    tagDuration: 5,//选填,云链显示时间,默认为5秒
  24.    tagFontSize: 16//选填,云链文字大小,默认为16像素
  25. }
  26. );
复制代码
  • 如果要销毁实例,可以调用实例的destroy方法 ivaInstance.destroy();
    直播模式
  • 引用资源文件,将脚本文件插入到网页的合适位置:
  1. <font size="2"><div><span style="line-height: 1.5;"><!-- 播放直播流,且需要实时推送消息功能,请先引用客户端的socket库 --></span></div><div><span style="line-height: 1.5;"><script type="text/javascript" src="http://7xl3wn.com2.z0.glb.qiniucdn.com/socket.io.min.js"></script></span></div></font>
复制代码
  1. <font size="2"><script type="text/javascript" src="http://7xjfim.com2.z0.glb.qiniucdn.com/Iva.js"></script></font>
复制代码
新建一个div作为直播视频播放的窗口,建议div的宽高在640px*480px以上,如果小于此宽高的话,视频会以弹窗形式播放。

在网页合适位置写入如下代码,并对参数进行相应的设置,即可创建互动直播视频实例:
直播模式参数live必须为true

  1. <font size="2">/**

  2. *创建Iva实例,以下参数值是时间的均以秒为单位

  3. */

  4. var ivaInstance = new Iva(
  5. '父容器',//父容器id或者父容器DOM对象,给父容器设置宽高640px*480px以上可以获得最佳的浏览体验;如果宽高在640px*480px以下,Iva会以弹窗形式呈现
  6. {
  7.    appkey: '应用标识',//必填,请在控制台查看应用标识
  8.    live: true,//是否是直播流,默认为false(直播模式为true)
  9.    video: '视频地址url',//必填,播放地址(http://www.tudou.com/programs/view/tM_vZCQy2uM/)或者资源地址(http://7xi4ig.com2.z0.glb.qiniucdn.com/shapuolang_ts.mp4)
  10.    title: '小视频',//选填,视频标题
  11.    cover: '视频封面url',//选填,视频封面url
  12.    videoStartPrefixSeconds: 0,//选填,跳过片头,默认为0
  13.    videoEndPrefixSeconds: 0,//选填,跳过片尾,默认为0
  14.    /* 以下参数可以在“控制台->项目看板->应用管理->播放器设置”进行全局设置,前端设置可以覆盖全局设置 */
  15.    skinSelect: 0,//选填,播放器皮肤,可选0、1、2,默认为0,
  16.    autoplay: false,//选填,是否自动播放,默认为false
  17.    rightHand: true,//选填,是否开启右键菜单,默认为false
  18.    autoFormat: false,//选填,是否自动选择最高清晰度,默认为false
  19.    bubble: true,//选填,是否开启云泡功能,默认为true
  20.    jumpStep: 10,//选填,左右方向键快退快进的时间
  21.    tagTrack: false,//选填,云链是否跟踪,默认为false
  22.    tagShow: false,//选填,云链是否显示,默认为false
  23.    tagDuration: 5,//选填,云链显示时间,默认为5秒
  24.    tagFontSize: 16//选填,云链文字大小,默认为16像素
  25. }
  26. );</font>
复制代码
如果要销毁实例,可以调用实例的destroy方法 ivaInstance.destroy();



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复
〖销售站〗一站式品质服务平台. 一体化商城系统.【www.xiaoshouzhan.com】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

销售站-一体化商城系统!
 
 
Q Q|技术部
销售|销售部
客服|销售站实体店
分流|销售站实体店
视频解析群:
好记吧
产品售后群:
站长源码(交易平台)
域名拍卖群:
域名拍卖群
产品维权群:
藤县站
微信客服中心:
/images/niwota00000000300.jpg
工作时间:
8:00-18:00
 
版权所有:好友团

QQ|关于我们|手机版|( 桂ICP备19008987号|网站地图  | Sponsor: Friends group