关于优酷视频代码播放的若干事情……

   前几天的时候，根据工作要求，做了一个小小的wap分享站，本以为时隔几天，没听到测试美女同事们的反馈就万事大吉了，只是今天早上的时候，同事突然跟我说从app端分享的文章在Android手机上可以正常播放，但是在iOS手机上却不能正常显示。恰巧今天又是另外一个项目刚部署到测试服务器，各种问题接踵而至，于是趁着cms3.0的项目空闲的时候，认真的推敲了一下之前wap站的视频代码……

   在这里，可以分享一个自己对工作或者生活乐在其中的妙招~~~每次遇到问题，只要是影响心情的事情，自己都会默默的在心里定一个念头，悄悄地告诉自己：如果这个问题或者这个困难一不小心被自己克服了，那就奖励自己一下，可以做顿好吃的饭或者在网上买件心仪的小玩具，这样不仅会让自己的心情超级无限好，也会让自己又get到处理问题的新技能。

   工作以后，基本上做的都是web页面，这次也是第一次接触app端，其兼容性也就随之显现了。因为我们使用的服务器只支持优酷视频（这里貌似是道听途说来的，不太确定哦~，事实就是视频只支持优酷播放），因此优酷开发者平台就成为我们首先使用的选择。

优酷开发者平台官网：

http://open.youku.com/tools/

   下面开始我的心路历程吧：

   拿来id，去数据库对应的表中查出该id下对应的所有信息，统称为data,主要任务就是将内容即data.content显示在页面中，正常情况下在后台查出来的data，只需要在前台{{#data.content}}渲染一下就可得到相应的内容。—— # 为转义符

   只是由于data的content为视频的话，存在数据库中的这个content字段的内容则是酱紫滴：

<p><br/></p><div id="youkuplayer"></div><script type="text/javascript" src="http://player.youku.com/jsapi"></script><script type="text/javascript">player = new YKU.Player('youkuplayer',{styleid: '0',client_id: 'e7e4d0ee1591b0bf',vid: 'XMTg0NDU1MTk4MA',newPlayer: true});</script><p><br/></p><p><br/></p>

   如果还是按照一般文章处理的话，{{#data.content}}根本就播放不出视频文件，最终看页面代码的时候，就发现了一个小秘密：

                                                   

 

   在html页面中引入优酷js文件：

 <script type="text/javascript" src="http://player.youku.com/jsapi">

 

<div id="youkuplayer"></div>
<script type="text/javascript" src="http://player.youku.com/jsapi"></script>
<script type="text/javascript">
     player = new YKU.Player('youkuplayer',{
                                  styleid: '0',client_id: 'e7e4d0ee1591b0bf',vid: 'XMTg0NDU1MTk4MA',newPlayer: true});
</script>

   页面没有执行的那段js代码：

<script type="text/javascript">
     player = new YKU.Player('youkuplayer',{
                                  styleid: '0',client_id: 'e7e4d0ee1591b0bf',vid: 'XMTg0NDU1MTk4MA',newPlayer: true});
</script>

   于是乎，在后台处理数据的时候单独处理了一下这段代码：

...
 let str = data.content;
 let scriptArr = str.match(/<script type="text\/javascript">.*<\/script>/g);//用正则匹配script标签
 if (scriptArr && scriptArr.length > 0) {
      data['scripts'] = scriptArr[0]  //取出那段要在页面执行的js代码
    }

 this.assign("data", data);
 return this.display();

...

   这样在html页面上的时候，就只是单独执行一下这段js即可：

...
<!-- /.container -->
<!--返回-->
<div class="sub_box" id="gotoTop">
    <div class="back_to_top"></div>
</div>
<script src="/static/js/backtop.js"></script>
{{#data.scripts}}
</body>
</html>

    页面上的再次去看的时候：

                                                     

   视频便可以正常播放了~~~

题外话：

   上面这段是处理app端显示视频的，但是自己并没有分Android手机或者iOS手机来测，于是在看ios手机的时候，视频依旧不能播放。在知乎上找到了这样的解释：

在线视频一般都是基于flash和flv来实现的，而众所周知，iOS的safari不支持网页中的flash，但支持html5的video标记（显然这个时代苹果必须以某种方式支持网络视频），对于video标记，会在其区域上显示播放按钮，点按后进入全屏播放。

所以优酷等网站会针对iOS做出兼容性处理：
通过user-agent来判断用户来源，如果是iOS用户，则用video标记来替代传统object，其src的则是源地址（不是flv，而是ts包装的源，m3u8是个文本文件，其中指定了进一步的ts地址，包括一些视频分段参数等）；对于其他用户，则出于兼容性和功能性考虑，依旧使用swf播放器。
可以通过chrome开发者工具，将UA override修改为iOS来自行测试。

<video id="youku-html5-player-video" width="100%" height="100%" x-webkit-airplay="allow" controls="" autoplay="" preload="" src="/player/getM3U8/vid/91861269/type/flv/ts/1332059778/v.m3u8"> </video>

补充一下，一些第三方网站嵌入调用的youku视频在iOS上无法点击播放，这是因为第三方网站没有对其做上述的兼容性判断切换为video标记所致。

   认认真真看了几个小时，却依旧没有理解上面所说的怎样用video标记来替代传统object。。。。。只好再另辟蹊径，

                                                                

<iframe height=498 width=510 src='http://player.youku.com/embed/XMTg1MjAzMTUwMA==' frameborder=0 'allowfullscreen'></iframe>

   使用优酷自带的通用代码，唯一的要求就是获取到类似于 XMTg1MjAzMTUwMA -——> 视频id，只是我不会用正则来截取vid。。。。。因此这种方法就被搁置了……

。。。。

。。。。

。。。。

   中间省略无数字，，，，，，，真的是百感交集。

   叶叶有一个缺点：有点心急。通俗点就是性子急，只是深知自己的工作需要足够的淡定，虽然自己也足够踏实，但是欠缺的就是沉下心来……找了很久bug，最终感觉自己还是不能凭一己之力解决问题，还是把自己遇到的情况反映给了大神同事CZ，可是我说的情况令他也是丈二和尚摸不着头脑，接着郡哥过来了，就演变成我们拿着手机去找测试，让她们复现遇到的问题，居然就发现了端倪：是因为在后台添加视频的时候没有添加类似于导语的文字，才使得分享出来的页面播放不出视频。大家异口同声的说，不是我这边的问题，而是DX大神在处理分享那段代码的时候，因为截取的时候，没有判断是否为视频，就直接截取，导致视频播放不出来的结果。

   看到这里，聪明的你是不是也觉得这件事跟我就没多大关系了？

   但是，但是，我要说的是但是！叶叶还有一个缺点：倔强。因为在心里，我并不认为这是DX大神那边分享的问题，而问题的确是在我这里。于是乎，一遍又一遍的拿着测试ios手机，重复着同样的操作，可是真的只想敲自己，都从数据库把两篇文章的content拿出来作对比，除过发现vid不相同外，其他的都一样，也跟有没有导读完全没有关系。。。。至此，只能去把自己所有的状况反映给老大。幸好是下班时间，也是他不太忙的时候，最终的原因真的就是令我啼笑皆非了：就是因为vid的问题。我们只能使用优酷自己的视频，因为这样才算有版权，而测试的美女们用的都是不支持优酷在第三方播放的视频，这样肯定在页面中显示不出来了。至此，困扰自己大半天的问题终于解决了，而心里的那块石头似乎也消失的无影无踪。

   经验不足，遇到特殊情况太少！！！！！