YOUKU播放器研究

写在前面的话：
昨天晚上无意间在土豆首页logo处有个视频弹出，原来是土豆新的推广视频方式。兴趣来了，就模仿了一个。
本文基于优酷开放平台API撰写。介于使用土豆开放平台一个参考。

土豆大概预览图（无沟你们怎么会进来呢？(☆_☆)/~~）

准备工作

优酷开放平台 - 工具箱 http://open.youku.com/tools

如截图所示，YOUKU大大们只提供简单几个配置参数和方法，完全达不到能隐藏控制条和循环播放效果。
于是研究起源码之路。

实例化一个播放器对象

player = new YKU.Player('youkuplayer',{
styleid: '0',
client_id: 'YOUR YOUKUOPENAPI CLIENT_ID',
vid: '替换成优酷视频ID'
});

得到如下所示：(截图)

1、隐藏控制条
于是就找到隐藏控制条方法，调用 player.hideControls() 就行

2、循环播放
优酷播放器开发API没有提供循环播放接口,但是想到一种比较hack写法.
在播放结束的时候，继续播放。但是直接调用继续播放player.playVideo();，视频画面会卡住，影响体验。在结束加一个setTimeout就解决问题，大概意思是，让播放器设置回归初始值就有个时间差的。

player = new YKU.Player('youkuplayer',{
... other
,events:{
//播放器结束播放时调用
onPlayEnd: function () {
// hack 循环播放
setTimeout(function () {
player.playVideo();
}, 4)
}
}
})

3、去掉广告
看到土豆首页是直接播放，没有广告。于是调用优酷免费广告计划。

优酷本身提供去广告的接口,可惜需要钱.
但是也提供了免费试用100次, 页面刷新100次也就相当于用完了.

以上基本播放器基本工作准备就绪。现在就是前端仿写的工作。

4、鼠标移动到土豆网logo,就立马播放.
在测试期间发现，如果未等视频播放器加载完毕，调用mouseenter事件的话，播放器是不会播放的。
并且还隐藏不了控制条player.hideControls()。

player = new YKU.Player('youkuplayer',{
... other
,events:{
//播放器准备就绪调用
onPlayerReady: function () {
// 隐藏控制台
player.hideControls();
// 添加mouseenter.mouseleave事件
$(document).on('mouseenter', '#logo', function(){
// 定位处理不在此撰写。（别砸瓶子过来(^.^)。。
player.playVideo();
})
.on('mouseleave', '#logo', function(){
player.pauseVideo();
})
}
}
})

5、解决div遮住优酷视频flash (FF、IE特有)
本想完成操作很完美，但FF、IE测试不尽如意，不会像土豆视频一样点击进入专题。
也是flash遮住了，但是要设置<param name="wmode" value="transparent">

player = new YKU.Player('youkuplayer',{
... other
// 隐藏设置，我**，能否在API文档写清楚么，害我查半天。
,flashext: '<param name="wmode" value="transparent">'
})

6、视频尺寸问题，视频有上下2条黑边，完全做不到没黑边的效果（像卡片一样精美。）
调整了半天只能达到这效果，估计是制作视频的时候，没符合优酷的完美尺寸吧。

附上播放器隐藏还能记录播放记录的方法 http://note.rpsh.net/posts/2013/07/30/div-flash

只有在visibility:hidden; 或者left:-1000px情况下，视频从隐藏至显示是还能继续播放的。

无耻附上链接（有广告嫌疑，不要秒掉我：htpp://www.youxiake.com