YOUKU播放器研究

kgbook 发布于2019-08-21 10:22 / 2553人阅读

摘要：本文基于优酷开放平台撰写。优酷本身提供去广告的接口可惜需要钱但是也提供了免费试用次页面刷新次也就相当于用完了以上基本播放器基本工作准备就绪。

写在前面的话：
昨天晚上无意间在土豆首页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遮住了，但是要设置

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

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

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

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

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

超融合服务器混合云 youku youku视频人脑研究研究

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85416.html

[Android]使用MediaPlayer播放m3u8地址遇到的问题

摘要：起因是的拼接地址方式失效了，经过抓包分析版本的播放地址，发现其使用的地址为以下对应不同的清晰度。结束后调用播放视频重新计算播放窗口大小此处获得的以及均为。反编译其他类似应用后，发现问题出在方法。获得视频高宽后播放。已经失效了, 请自行解析m3u8文件获得真实视频地址进行播放. 请参考 http://www.denghaojie.cn/android-youku-url-m3u8-m...

yhaolpz 2019-06-24 18:49 评论0 收藏0
WebView实现全屏播放的一种方法

摘要：今天来介绍一种简单易行粗暴的方式来实现的视频全屏播放。通过在一些主流视频网站上的测试，在爱奇艺，土豆，芒果，等可正常全屏，在腾讯，乐视，等网站仍然无法全屏。经测试，腾讯和没有问题了，乐视和仍然不可以全屏，即使已经找到了全屏按钮的标识。　　用过WebView的开发者们肯定都知道这里面的坑数不胜数，加载缓慢，内存泄露，文件选择......没错，全屏播放视频，这又是一个大坑。一个没有修饰过...

baoxl 2019-08-16 10:27 评论0 收藏0
WebView实现全屏播放的一种方法

摘要：今天来介绍一种简单易行粗暴的方式来实现的视频全屏播放。通过在一些主流视频网站上的测试，在爱奇艺，土豆，芒果，等可正常全屏，在腾讯，乐视，等网站仍然无法全屏。经测试，腾讯和没有问题了，乐视和仍然不可以全屏，即使已经找到了全屏按钮的标识。　　用过WebView的开发者们肯定都知道这里面的坑数不胜数，加载缓慢，内存泄露，文件选择......没错，全屏播放视频，这又是一个大坑。一个没有修饰过...

jzzlee 2019-07-16 16:03 评论0 收藏0
WebView实现全屏播放的一种方法

摘要：今天来介绍一种简单易行粗暴的方式来实现的视频全屏播放。通过在一些主流视频网站上的测试，在爱奇艺，土豆，芒果，等可正常全屏，在腾讯，乐视，等网站仍然无法全屏。经测试，腾讯和没有问题了，乐视和仍然不可以全屏，即使已经找到了全屏按钮的标识。　　用过WebView的开发者们肯定都知道这里面的坑数不胜数，加载缓慢，内存泄露，文件选择......没错，全屏播放视频，这又是一个大坑。一个没有修饰过...

red_bricks 2019-06-21 16:13 评论0 收藏0
前端排序算法总结；前端面试题2.0；JavaScript异步编程

摘要：与异步编程按照维基百科上的解释独立于主控制流之外发生的事件就叫做异步。因为的存在，至少在被标准化的那一刻起，就支持异步编程了。然而异步编程真正发展壮大，的流行功不可没。在握手过程中，端点交换认证和密钥以建立或恢复安全会话。 1、前端排序算法总结排序算法可能是你学编程第一个学习的算法，还记得冒泡吗？当然，排序和查找两类算法是面试的热门选项。如果你是一个会写快排的程序猿，面试官在比较...

aaron 2019-08-01 17:38 评论0 收藏0