适用于pc的优酷api调用方式和适用触屏端的api调用方式

写在前面

因为公司有需求需要用到视频播放，以前的需求只是需要视频可以播放，可以暂停即可，并不需要对视频的播放情况进行记录。新的需求下来，我马上去寻找优酷的api，然而我以此关键词搜索了百度，全是各大论坛的使用优酷api的方法，点进去，有的也贴了 优酷api 的官方文档地址。我开心的点开： http://open.youku.com/tools/ ，404了解下。我想会不会是youku倒闭了，我颤抖的点开www.youku.com,还可以看。想了想算了，就用论坛介绍的方法吧。因为公司有pc和触屏2端服务，我先拿触屏练手，全程轻松且随意，因为pc端开发在内网，连不上jsapi，我想既然论坛都没区别，那么写法应该都一样。照着触屏潇洒的写完了pc的代码。当我以为这一切都太简单了时候，bug就像人的欲望一样，接踵而至。

主要问题就是：pc端的视频回调不执行，在我骂街论坛小伙伴坑爹的时候，触屏版竟然走回调。额，好吧。看来有2端有不同的写法，我接着找遍全百度的论坛，额。统一的都是一样的写法。没有一点点区别。头很疼！这样不行，那好吧，就看源码吧，不看不行，一看吓一跳。http://player.youku.com/jsapi 这个组件，在判断浏览器不同的不同确实是不执行的方法，对于pc是生成一个iframe，点开这个iframe发现里面引的是另一个组件。http://player.youku.com/iframeapi 上面的注释是这样的：

/*** iframe* iframe 2019-02-25* for pc*/

是不是我用这个cdn就行了，然后试了下。很明显不行，应该还是使用 http://player.youku.com/jsapi 这个cdn，但这个api的注释是这样的：

/*** dispatch * dispatch 2019-02-25* for phone*/

还是继续翻源码吧，看他生成的iframe 下面又是一次调用youku的对象，写法是这样的：

function QS() {var args = {};var result = window.location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+", "g"));if (result != null) {for (var i = 0; i < result.length; i++) {var ele = result[i];var inx = ele.indexOf("=");var key = ele.substring(1, inx);var val = ele.substring(inx + 1);try {val = decodeURI(val);} catch (e) {}val == "true" ? val = true : (val == "false" ? val == false : isNaN(val) ? val = parseJsonStr(val) : val = +val);if ('undefined' == typeof args[key]) {args[key] = val;} else {if (args[key] instanceof Array) {args[key].push(val);} else {args[key] = [args[key], val];}}}}return args;}var _QS = QS();var arr = window.location.pathname.split('/');var _vid = 0;if (arr.length == 3 && arr[1] == 'embed' && arr[2].charAt(0) == 'X') {_vid = arr[2];}if (_QS.target == null) _QS.target = "youku-playerBox";if (_QS.client_id == null) _QS.client_id = "0edbfd2e4fc91b72"; //"youkuind_";if (_QS.autoplay != true) _QS.autoplay = false;//var _collina;// document.onreadystatechange = function(){//   if(document.readyState == 'complete'){//// window.onload = function(){//   _collina = new PlayerCollina({callback:function(ckey){//   var player = new YKU.Player('youku-playerBox',{//    styleid: '0',//     client_id: _QS.client_id,//     vid: _vid,//    autoplay:_QS.autoplay,//    password:_QS.password,//  //  newPlayer: true//   //  events:_QS.events,//      onPlayStart:_QS.onPlayStart,//      onPlayEnd:_QS.onPlayEnd,//      doubleSpeed:_QS.doubleSpeed,//      ckey:_collina.getCkey()//         });//   }});// };window.onload = function() {var player = new YKU.Player('youku-playerBox', {styleid: '0',client_id: _QS.client_id,vid: _vid,autoplay: _QS.autoplay,password: _QS.password,//  newPlayer: true//  events:_QS.events,onPlayStart: _QS.onPlayStart,onPlayEnd: _QS.onPlayEnd,doubleSpeed: _QS.doubleSpeed,//ckey:_collina.getCkey()});};//当页面加载状态改变的时候执行这个方法.

大家看这个一定有点昏，我给大家解释一下，Qs这个方法获取url，然后截取需要的参数，像vid之类的参数，但是根本没有对onPlayStart，onPlayEnd,这两种方法进行处理。what？他只是往里面放却没有处理。难道优酷的人没写完？继续看http://player.youku.com/iframeapi 这个组件，发现下面的代码：

pcPlayer.testPlay = function(){pcPlayer.play();}pcPlayer.on('onPlayerStart', function(data) {obj = {msg: 'onPlayStart'}window.parent.postMessage(obj, '*');});pcPlayer.on('PlayerPlayNext', function(data) {console.log('------PlayerPlayNext');});pcPlayer.on('onTrialEnd', function() {console.log('------onTrialEnd');});pcPlayer.on('onPlayerSet', function(obj) {});pcPlayer.on('onPlayerComplete', function(data) {obj = {msg: 'onPlayEnd'}window.parent.postMessage(obj, '*');});

当触发开始，结束这一类事件后往父层发了信息， window.parent.postMessage(obj, ‘*’); 那我就可以在父页面，监听message

代码如下：

window.addEventListener('message',function(e){var data = e.data;console.log(data)；
}）；

打出这些数据后，果然如此。当在页面里触发了默些操作后，会在message 显示出来。

改版后：

window.addEventListener('message',function(e){var data = e.data;if（data.msg == 'onPlayStart'）{//当点击播放按钮后触发事件}
}）；

嗯，不错这样就完美了。

但是我又发现一个问题，既然那边接口都写好了，肯定是有文档的，果然：

链接如下： https://cloud.youku.com/tools

写法差不多，不过在官方文档pc端写法，有处写错了。自己找吧！

适用于pc的优酷api调用方式和适用触屏端的api调用方式相关推荐

优酷视频手机上能发现投屏设备，但投屏失败？
1.投屏失败的提醒如果是文件格式不兼容,则按文件格式不兼容解决; 2.并不是文件格式难题,移动端提醒连接失败,TV端无反映,提议在电视机或小盒子端安裝CIBN酷喵影视App,起动CIBN酷喵影视App ...
转载的优酷视频不能自动播放和全屏的解决方法
http://sou.52miui.com 也许你也会出现把优酷视频嵌入自己的网站后不能全屏的烦恼,其实只要修改一下播放器代码即可: <embed type="application/ ...
(Web、触屏)微信支付功能调用以及QQ回调地址配置、以及遇到的一些坑
/** * (触屏版)跳转游记支付二维码页 (接口返回表单如下) * <form id="lolapaysubmit" name="lolapaysubmit&qu ...
php 实时更新内容_亿级视频内容如何实时更新？优酷视频背后的技术揭秘
简介: 优酷视频内容数据天然呈现巨大的网络结构,各类数据实体连接形成了数十亿顶点和百亿条边的数据量,面对巨大的数据量,传统关系型数据库往往难以处理和管理,图数据结构更加贴合优酷的业务场景,图组织使用包 ...
优酷鸿蒙开发实践｜多屏互动开发实践
作者:玉追 & 以绳优酷与华为长期保持着良好的战略合作关系,旨在为消费者带来优质的影音娱乐体验.鸿蒙操作系统的流转特性为多屏互动带来了全新的玩法,本文以优酷播放中心的技术储备为切入点,结合鸿 ...
优酷端侧弹幕穿人技术实战之：PixelAI移动端实时人像分割
一. 业务背景随着各大视频平台相继推出弹幕穿人功能,广受好评.在大众消费视频的同时,大大增加了观看的娱乐互动性.接着,其他视频.动漫.阅读等内容平台也都增加了弹幕功能.弹幕已经成为一种重要的内容互动 ...
如何得到优酷网mp4格式视频文件url
源地址(需翻墙): http://jerryjobsguo.blogspot.com/2012/12/mp4url.html#!/2012/12/mp4url.html 前言众所周知,视频在网页中使 ...
手机优酷缓存的视频在哪找
很多人都喜爱在优酷视频上看剧或是影片,有时出门度假旅游或是乘火车等特殊情况,大家必须用手机优酷来下载好一些自身喜爱看的电视连续剧或是影片,便捷那时候没有网络,还可以在手机优酷上看电视剧,进而消磨无趣的 ...
多角度解读优酷土豆合并的深意
优酷和土豆3月12日宣布将以100%换股方式合并,土豆网将因此退市.一石激起千层浪,这一震惊互联网的消息曝出后,网络掀起了"合并热",各种"合并体"开始走红,各 ...

适用于pc的优酷api调用方式和适用触屏端的api调用方式

写在前面

适用于pc的优酷api调用方式和适用触屏端的api调用方式相关推荐

最新文章

热门文章