适用于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端写法，有处写错了。自己找吧！