本文主要是介绍js点击弹框优酷视频，并控制视频播放和暂停及重新载入的方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
引子
今天做了弹框显示优酷视频的案例，有点有问题，但是通过其他办法解决了。自己感觉，虽然解决了，但是还是不是很好！不知道大家有没有更好的解决办法！
背景
弹框显示优酷视频，且一个页面中有很多优酷视频，做到效果如下图：
难点
div弹出层是在一个页面当中的，点击关闭，让优酷视频重新载入。（控制优酷视频的播放和暂停，定位指定时间和播放当前时间，优酷当中已经给了API函数，但是重新载入视频没有）
解决方法
js制作弹出层，相信大家应该都会做，今天就不总结js弹出层的效果了，关于js弹出层，后面有时间再讲！
首先，优酷API开发平台的地址: 优酷开放平台-视界开放，大有不同！
激活一下邮箱，进入工具，会生成一个client_id，vid是视频的id，通过浏览器地址或者分享里面可以复制到。
调用视频的代码如下：
<div id="youkuplayer" style="width:480px;height:400px"></div>
<script type="text/javascript" src="http://player.youku.com/jsapi">
player = new YKU.Player('youkuplayer',{
styleid: '0',
client_id: '7ea1dcdd8ea5d799',
vid: '替换成优酷视频ID',
autoplay: true,
show_related: true,
events:{
onPlayEnd: function(){ /*your code*/ },
onPlayStart: function(){ /*your code*/ },
onPlayerReady: function(){ /*your code*/ }
}
});
function playVideo(){
player.playVideo();
}
function pauseVideo(){
player.pauseVideo();
}
function seekTo(s){
player.seekTo(s);
}
function currentTime(){
return player.currentTime();
}
</script>这里就不一一对代码进行解释了，详细大家应该都能看懂，或者去优酷视频API上面有解释。
我在这里要解释的是，优酷里面的script的引用方式比较特别，是这样的
<script type="text/javascript" src="http://player.youku.com/jsapi">然后再在script中写入代码，那换成我们平时用的方式可以吗？通过验证也是可以的。
<div id="youkuplayer" style="width:480px;height:400px"></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: '7ea1dcdd8ea5d799',vid: '替换成优酷视频ID',autoplay: true,show_related: true,events:{onPlayEnd: function(){ /*your code*/ },onPlayStart: function(){ /*your code*/ },onPlayerReady: function(){ /*your code*/ }}});function playVideo(){player.playVideo();}function pauseVideo(){player.pauseVideo();}function seekTo(s){player.seekTo(s);}function currentTime(){return player.currentTime();}</script>这样大家应该都明白了吧。
对于优酷视频重新载入，好在谷歌浏览器，火狐等等，在div设置属性display none之后，会自动重新载入，比较方便，但是在IE浏览器中就不一样了。
IE浏览器的问题
1、要在div中加上 < html>< body>标签
2、在div隐藏之后，视频还是照常播放，只能设置停止，但是不能重新载入！
思路：
1、把视频object隐藏掉，弹出的时候再显示，经过实验，宣布失败！
2、把视频object remove掉，弹出的时候再用html把其放上去，经过实验，有点有问题，没有进行下去！宣布失败！
3、既然其他浏览器都是好的，只有IE有问题，不放对IE进行一个小小的刷新，其他浏览器不刷新，这样解决如何？
你可以参考我之前写的一篇浏览器重载的文章：html-javascript前端页面刷新重载的方法汇总
<!--// 以下只支持ie -->
<a href="javascript:document.URL=location.href;">点击重新载入页面</a>
<a href="javascript:navigate(location);">点击重新载入页面</a>
<a href="javascript:document.execCommand('Refresh');">点击重新载入页面</a>
<!--// 以上只支持ie -->这几种刷新方式只有IE支持啊，果断应用！
document.execCommand('Refresh');
关闭之后，虽然有点小刷新，还是跳转到原来的位置！
自己感觉这种解决方式有点有失用户体验，不过只针对IE，而且也会跳到你点击的位置，所以自我安慰，这种方式还好！
不知道大家有没有更好的解决方案，期待您提出更好的方案和意见，万分感谢！
这篇关于js点击弹框优酷视频，并控制视频播放和暂停及重新载入的方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
