国内优酷分享API一些坑

Youtube分享API功能很全，今天客户需要多个视频在放在国内优酷平台的要求。
过程遇到了一些坑【忠告各位远离优酷】：

1.iframe分享是可以的，但是不能做很多扩展功能，所以需要JS加载，但是client_id必须要有，所以需要申请API账号，但是不支持个人申请(wqnmd)。

2.申请好了，之后，我看了一下官方文档,咦，很简单嘛。

<div id="youkuplayer"style="width:580px;height:326px"></div>
<script type="text/javascript" src="//player.youku.com/jsapi"></script>
<script type="text/javascript">
var player = new YKU.Player('youkuplayer',{
styleid: '0',
client_id: 'YOUR YOUKUOPENAPI CLIENT_ID',
vid: '替换成优酷视频ID',
newPlayer: true
});
</script>

一目了然，我贴上去，是在循环里面写的加了一些参数

<div id="youkuplayer-<?php echo $i;?>" style="width: 862px!important; height: 445px!important;"></div>
<script type="text/javascript">
var player_<?php echo $i;?> = new YKU.Player('youkuplayer-<?php echo $i;?>',{
client_id: 'XXX',                    
vid: '<?php echo substr($video_link,30,-5); ?>',
});
function pauseVideo_<?php echo $i;?>(){
player_<?php echo $i;?>.pauseVideo(); 
}
</script>

3.我特意加了暂停视频按钮事件pauseVideo（客户需求是切换或者播放一个视频，再播放另一个视频的话，已经播放的暂停【优酷不支持！！】），一切大功告成，然后我测试，暂停功能不行，我以为我写错了，排查发现没有，怎么测试都没找到问题，查阅了很多文档，百度了很多，没有人提过这个问题。

4.我灵光一现，移动端试试。我去，移动端没有问题，我苦恼PC端问题出现在哪里，我最好找到了，在<script type="text/javascript" src="//player.youku.com/jsapi"></script>后面加一个<script type="text/javascript">YKP.isPC = false;</script>，这个意思是PC端也跟移动端一样效果。

5.然后又有问题了，在视频里面点击播放，ok没问题，再点击一次就不能暂停了。。。原来是PC端也跟移动端一样效果，但是移动端是触摸的啊，所以我在视频DIV加了一个点击事件。

var j = 0;
$('#youkuplayer-<?php echo $i;?>').click(function () {
if (j == 0) {
player_<?php echo $i;?>.playVideo();
j = 1;
} else {
player_<?php echo $i;?>.pauseVideo();
j = 0;
}
});

6.期间遇到视频外层DIV(youkuplayer-),宽度和高度都是0（明明css和行内都给了值，最后2个都加上!important才行）

以上是我遇到国内优酷分享API一些坑，还有分享视频播放居然要广告，感觉很麻烦，优酷偌大的公司，代码写的水平跟我一样差，也是醉了。

贴上我的Demo:

<script type="text/javascript" src="//player.youku.com/jsapi"></script>
<script type="text/javascript">YKP.isPC = false;</script>
<?php if( have_rows('home_slider',89) ):?>
<?php while( have_rows('home_slider',89) ): the_row();?>
<?php if( have_rows('video_link',89) ): ?>
<div class="modal fade bd-example-modal-xl" id="myModal-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog-centered" role="document">
<div class="modal-dialog modal-xl">
<div class="home-modal-video modal-content">
<button type="button" class="close home-modal-video-close" data-dismiss="modal" aria-hidden="true">&times;</button>
<div class="tabs-vertical">
<ul>
<?php $i=0; while( have_rows('video_link',89) ): the_row();
$video_title = get_sub_field('video_link_title');
?>
<li><a onclick="pauseVideo_<?php echo $i+2;?>()" data-index="<?php echo $i;?>" href="#"> <?php echo $video_title;?></a></li>
<?php $i++; endwhile; ?>
</ul>
<div class="tabs-content-placeholder">
<?php $i=1; while( have_rows('video_link',89) ): the_row();
$video_content = get_sub_field('video_link_content');
$video_link = get_sub_field('video_link_link');
$i++;
?>
<div class="youkuplayer-youku">
<p><?php echo $video_content;?></p>
<div id="youkuplayer-<?php echo $i;?>" style="width: 862px!important; height: 445px!important;"></div>
<script type="text/javascript">
var player_<?php echo $i;?> = new YKU.Player('youkuplayer-<?php echo $i;?>',{
client_id: 'XXX',                    
vid: '<?php echo substr($video_link,30,-5); ?>',
});
function pauseVideo_<?php echo $i;?>(){
player_<?php echo $i;?>.pauseVideo(); 
}
var j = 0;
$('#youkuplayer-<?php echo $i;?>').click(function () {
if (j == 0) {
player_<?php echo $i;?>.playVideo();
j = 1;
} else {
player_<?php echo $i;?>.pauseVideo();
j = 0;
}
});
</script>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>