INTRO

企业网站应用教程

通过酷播云后台自带的调用代码或Html5播放器 ( Html5播放器>> ) 调用代码,可以在用户自己的企业网站中,进行视频调用并实现跨平台的视频播放。

酷播云客户演示

图:客户案例 ( 客户演示>> )

酷播云客户演示

图:客户案例 ( 客户演示>> )

 

STEP1

注册帐号

使用酷播云产品,您需要注册酷播云用户帐号。

参考如下( 图1-1 ),按照提示填入您的注册信息,再点击下方的"注册"按钮,完成酷播云用户帐号的注册。

1. 如果您没有帐号,可点此注册:http://my.cuplayer.com/register

2. 如果您已帐号,可点此登录:http://my.cuplayer.com/login

酷播云_注册帐号

图1-1:酷播云_注册帐号 ( 如果您没有帐号,可点此注册>> )

酷播云_注册帐号

图1-2:酷播云_帐号登录 ( 如果您已有帐号,可点此登录>> )

 

STEP2

上传视频

注册帐号之后,即可登录酷播云平台来上传您的视频。

1. 从导航条中打开“上传视频”页面,选择您本地的视频进行上传,如图2-1。

2. 用户上传的视频文件格式支持:*.avi;*.f4v;*.mpg;*.mp4;*.flv;*.wmv;*.mov;*.3gp;*.rmvb;
*.mkv; *.asf;*.264;*.ts; *.mts;*.dat;*.vob;*.mp3;*.wav;*.m4v;*
3. 特别提示:严禁上传违反国家法律法规的内容,或侵犯他人版权和涉及政治相关内容 ( 上传说明参见>> )

酷播云_上传视频的图片

图2-1:选择本地视频文件

酷播云_上传视频文件的图片

图2-2:上传后视频列表

STEP3

获取视频代码

1. 登录酷播云管理平台后,点击【视频列表】,点选一个视频,右侧就会显示该视频的一些操作,如下图,依次分别为“设定视频参数区块”、“设定播放参数区块”、“视频代码区块”。

酷播云_酷播云平台提供四种代码的图片

 

2. 找到右侧的“视频代码区块”,复制代码后,就可以将该视频添加到您的网页中,或您网站后台中,代码有多种形式,介绍如下:

[多终端]:(推荐建议)自动适配支持PC、安卓Android、苹果iOS、微信端观看,适用于跨平台浏览器自适应播放场景
[HTML]:(由于部分浏览器不再支持flash,不建议使用)Html代码适用于可插入或编辑源代码的网页、编辑器
[Flash]:(由于部分浏览器不再支持flash,不建议使用)Flash地址适用于在编辑器里直接插入使用,也可以直接输入到浏览器进行播放
[预览代码]:适用于播放视频一部分,实现预览效果
[iframe]:iframe框架,也是一种比较常用的调用方式

3. 纯HTML5播放器调用

[纯HTML5播放器调用]:(强烈推荐使用)相关教程,请访问 Html5播放器>>

STEP4

将代码添加到企业网站中

1.开发人员,可以将代码添加到网页代码中,稍调整播放器宽高即可;

2.可以将代码添加企业网站后台编辑器中(注意:请确认您网站后台编辑器支持JS代码);

酷播云_酷播云平台提供四种代码的图片

图:网站后台编辑器中,可以选用代码模式后,再添加播放器代码 

酷播云客户演示

图:客户案例 ( 客户演示>> )

STEP5

Html5播放器代码调用范例

D1. HTML5播放器调用范例

说明:本代码为Html5播放器调用,对各终端的适配性更好,故强力推荐使用。(Flash调用受限于adobe的flash插件,不推荐使用)

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
width: 800,
height: 533,
vid: 'e785b2c81c9e018296671a1287e99615_e',
});
</script>

TIPS:
wrap: '#player' //warp为引用的容器
width: 800 //播放器的宽度
height: 533 //播放器的高度
vid: 'e785b2c81c9e018296671a1287e99615_e' //酷播云视频vid

查看演示

 

D2. 播放器与JS之间交互

说明:html5的自动播放与循环播放,各浏览器的支持并不一致,存在部分浏览器不支持的情况。

TIPS:
autoplay:'true' //是否自动播放
loop:'true' //是否循环播放

查看演示

 

D3. 多终端适配范例

说明:本代码适配PC电脑端、手机端,您可以扫演示页面中的二维码进行观看。

提示:适配跟用户端自身页面写法有较大关系,不能适配、宽度超出等,大多是用户自身页面设定的因素引起,建议参考本范例。初步总结有如下几点需注意:

1. 页面中的viewport属性需要用户按自身的实际情况做考虑;

2. 播放器的宽度和高度,不能设为固定值,建议设为width: '100%',height: 0 。

查看演示

 

D4. 视频跑马灯防录屏演示

说明:本代码为Html5播放器调用,跑马灯防录屏主要适配PC端。

1. 防录屏跑马灯功能为【单独付费】功能,通过设定文字内容(一般是观众的身份ID信息)在视频上不规则滚动,以此来警示盗版者,达到视频版权保护的效果;

2. 目前跑马灯功能不支持在移动端H5播放器上使用。

查看演示

 

D5. 视频切换范例

说明:本代码为Html5播放器视频切换范例,实现同一个页面中做不同视频的切换。

查看演示

 

 

D6. 视频列表连播演示

说明:本代码为Html5播放器视频列表连播范例,实现同一个页面中视频自动切换连播。

查看演示

 

常见问题

1. 酷播云付费套餐如何购买
您可以联系在线客服进行购买。大致流程是这样: 签订合同(可以是电子合同或纸质合同) -> 转帐至公司帐号 -> 开通业务 -> 开具正规增值税发票
2. 免费版用户可以直接购买流量包吗
目前暂时不能,需要先购买任意付费套餐,才能购买流量包;流量包在套餐有效期内一直有效,用完为止,当月不会清零,流量包1T=1024G。
3. 空间与流量
酷播云免费版(提供5G空间,12G流量/月),对于存储空间、流量有更高要求的用户,也提供付费业务。通过不断创新,酷播云为用户提供一站式视频云服务,让用户更简单、更高效的应用视频服务。
4. 酷播云免费版
酷播云为中小用量的用户提供无广告、全终端适配的一站式视频云服务,让用户更简单、更高效的应用视频。 其中酷播云免费版 提供 5G空间、12G流量/月
5. 12G流量够看多少次?我没有概念
流量的消耗只和视频的观看时长和清晰度相关。以10分钟的视频为例,完整观看完标清消耗30M,高清消耗66M,超清消耗111M,考虑到用户观看不同清晰度和观看的完成度,建议您选择高清进行估算会比较合适 详细介绍>>
6. 空间和流量是什么意思
空间:视频所占服务器的存储空间。
流量:流量用于视频在播放过程中CDN加速,通过CDN分发,可以有效的保障视频稳定、流畅的观看。流量消耗与视频的时长与清晰度有关,详细介绍>>

咨询 & 求助,请联系酷播云客服微信号:Cuplayercloud

酷播云HTML5播放器_效果图

开始免费使用酷播云