youkuplayer
v0.5.0
Published
a powerful Youku video player
Downloads
6
Readme
优酷主站播放器
优酷主站播放器是基于 ku-h5player 播放核心进行二次开发的适用于 优酷全站的 H5 播放器项目, 项目集成 广告,UPS , 日志等服务。
开始
git clone [email protected]:ku/youkuplayer.git
最新的代码一般在 dev
分支上,建议切到该分支;
代码切到本地后,进入项目 切记使用 tnpm 安装依赖;
tnpm install
关于 tnpm 的安装可以 点击 这里
安装
tnpm instal @ali/[email protected] --save
npm scripts
支持的 npm 命令
# 运行 example 下面的页面,进行开发 指定端口 --port 80
npm run dev
# 使用 webpack 打包到浏览器支持的版本, 目标文件在 browser 下面
npm run build-browser
# 打包成 amd 的形式,需要 使用 require.js 支持
npm run build-browser-amd
# 使用 rollup 打包成 node 模块, 目标文件在 dist 下面
npm run build
运行 demo
进入项目输入 npm run dev
,然后如果端口被占用可以使用其他端口进行尝试;
在浏览器输入 htpp://localhost:8088/example/test.html 查看运行效果。
项目支持 webpack2, rollup, less, es2015, 你可以在 build 目录下修改配置或者自行添加命令支持
初始化配置
var container = document.querySelector('.js-player')
var player = new YoukuPlayer(container,{
ccode: "0590", //业务识别码 大的业务都有自己的业务识别码,以前flash使用04开头,h5使用05开头[必选]
vid:_vid,//视频ID,建议使用加密之后的,不要使用数字[必选]
autoplay: true,//是否自动播放[可选]
quality:'480p', //优先使用清晰度 (320p/480p/720p/1080p)[可选]
loop:false,//是否循环播放 [可选]
language:'guoyu'//默认播放语言[可选]
isShowRelatedVideo:false,//是否显示播后推荐[可选]
playmode:1,//播放模式 1-普通视频 2-专辑播放 3-节目播放 4-播放播放[可选] 默认为1
skip:false //是否默认跳过片头片尾 [可选]
title: '标题内容'//不传默认走服务返回的标题 [可选]
windType:'interior',//广告播放器类型 interior站内,exterior站外,BDskin合作,popup弹出窗口,index首页,adshow广告,touch安卓播放器, tudoupartner土豆拂晓,html5 [可选]
fid: 1, //专辑id,playmode=Folder的时候必传[可选]
ob: 1 ,//专辑排序 0|1 playType=Folder的时候必传[可选]
pt: 1 ,//专辑中的位置 playType=Folder的时候必传[可选]
hasWatermark: true, //是否需要水印
watermark: null, //自定义水印 图片地址
hasWatermark:false,
supportType:'mp4',//默认播放支持类型,非优酷域名下请传入该参数
limitVideo:2,//播放器启用vidoe个数
adext:1, //广告指定扩展参数
upsRequestType:'jsonp',//服务请求方式 站外,非主站使用,建议都使用jsonp
customParam:{ //云视频扩展参数
client_id:'',
password:'',
atm:''
}
});
customeEvents说明
playerReady //播放是数据服务已经完备,可以触发play()接口
onPlayerStart // 开始播放
PlayerPlayNext // 播放下一个
onTrialEnd 试看结束
onPlayerComplete // 结束播放
onTimeUpdate //播放器进度更新
onPlayerPreAdInit // 播放器前贴广告
onPlayerLastAdInit // 播放器后贴广告
onPlayerMidAdInit, // 播放器中插广告
PlayerInteract,// 互动交互接口
playerSubscribe // 播放器订阅按钮点击
onFullscreen //全屏状态改变
dashboardStateChange //播放控制条状态改变 展示或者隐藏
播放器实例支持的 Api
在获取 player 的实例后,你可以对它做下面这些操作
setMiniWin
设置固定小窗revertMiniWin
还原固定小窗
关于底层播放核心使用和二次开发 详见 ku-h5player