js点击弹框优酷视频，并控制视频播放和暂停及重新载入的方法
19677次浏览
今天做了弹框显示优酷视频的案例，有点有问题，但是通过其他办法解决了。自己感觉，虽然解决了，但是还是不是很好！不知道大家有没有更好的解决办法！
弹框显示优酷视频，且一个页面中有很多优酷视频，做到效果如下图：
div弹出层是在一个页面当中的，点击关闭，让优酷视频重新载入。（控制优酷视频的播放和暂停，定位指定时间和播放当前时间，优酷当中已经给了API函数，但是重新载入视频没有）
js制作弹出层，相信大家应该都会做，今天就不总结js弹出层的效果了，关于js弹出层，后面有时间再讲！
首先，优酷API开发平台的地址:
激活一下邮箱，进入工具，会生成一个client_id，vid是视频的id，通过浏览器地址或者分享里面可以复制到。
调用视频的代码如下：
&div id=&youkuplayer& style=&width:480height:400px&&&/div&
&script type=&text/javascript& src=&/jsapi&&
player = new YKU.Player('youkuplayer',{
styleid: '0',
client_id: '7ea1dcdd8ea5d799',
vid: '替换成优酷视频ID',
autoplay: true,
show_related: true,
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();
这里就不一一对代码进行解释了，详细大家应该都能看懂，或者去优酷视频API上面有解释。
我在这里要解释的是，优酷里面的script的引用方式比较特别，是这样的
&script type=&text/javascript& src=&/jsapi&&
然后再在script中写入代码，那换成我们平时用的方式可以吗？通过验证也是可以的。
&div id=&youkuplayer& style=&width:480height:400px&&&/div&
&script type=&text/javascript& src=&/jsapi&&
&script type=&text/javascript&&
player = new YKU.Player('youkuplayer',{
styleid: '0',
client_id: '7ea1dcdd8ea5d799',
vid: '替换成优酷视频ID',
autoplay: true,
show_related: true,
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();
这样大家应该都明白了吧。
对于优酷视频重新载入，好在谷歌浏览器，火狐等等，在div设置属性display none之后，会自动重新载入，比较方便，但是在IE浏览器中就不一样了。
IE浏览器的问题
1、要在div中加上 & html&& body&标签
2、在div隐藏之后，视频还是照常播放，只能设置停止，但是不能重新载入！
1、把视频object隐藏掉，弹出的时候再显示，经过实验，宣布失败！
2、把视频object remove掉，弹出的时候再用html把其放上去，经过实验，有点有问题，没有进行下去！宣布失败！
3、既然其他浏览器都是好的，只有IE有问题，不放对IE进行一个小小的刷新，其他浏览器不刷新，这样解决如何？
你可以参考我之前写的一篇浏览器重载的文章：
&!--// 以下只支持ie --&
&a href=&javascript:document.URL=location.&&点击重新载入页面&/a&
&a href=&javascript:navigate(location);&&点击重新载入页面&/a&
&a href=&javascript:document.execCommand('Refresh');&&点击重新载入页面&/a&
&!--// 以上只支持ie --&
这几种刷新方式只有IE支持啊，果断应用！
document.execCommand('Refresh');
关闭之后，虽然有点小刷新，还是跳转到原来的位置！
自己感觉这种解决方式有点有失用户体验，不过只针对IE，而且也会跳到你点击的位置，所以自我安慰，这种方式还好！
不知道大家有没有更好的解决方案，期待您提出更好的方案和意见，万分感谢！
相关文章：
关键词搜索优酷tv在电视上怎么用比较好用吗?优酷tv怎么下载安装在电视上?
作者：佚名
字体：[ ] 来源：互联网 时间：11-05 15:14:38
优酷TV APP是为AndroidTV用户设计开发的网络视频客户端产品。通过专门为遥控器设计的人机交互界面，专为用户提供尽可能舒适休闲的视频观看体验
& 最近的大势就是电视机开始推向智能化，并相继出现了许多的app，这里小编就拿优酷tv为例。从在哪里下载安装，到怎么用小编为你一一解答。
&& 优酷TV APP是为AndroidTV用户设计开发的网络视频客户端产品。通过专门为遥控器设计的人机交互界面，专为用户提供尽可能舒适休闲的视频观看体验。背靠优酷所拥有的业界最丰富的节目资源，前端提供一流的用户体验品质。完美适配各个家庭的1080P和720P液晶电视。让你轻轻松松躺在沙发上看优酷！
Q.在哪里下载？怎么样安装？
& 其实来说有很多下载的地方，这里小编当然是首推自己站的下载资源啦~名称：优酷TV版下载：
注意：&&1.在电脑上下载机顶盒客户端apk文件　　&&& 2.然后找一张空白的SD卡插入电视机　　&&& 3.点击电视自带的电视卫士,点击软件管理,SD卡自动生成TVManager\backup文件夹　　&&& 4.将电脑端下载的安卓应用软件（如优酷的TV、机顶盒版）放在该文件夹中,插入电视机　&&& 　5.点击电视卫士－软件管理,就可以看到应用软件　　&&& 6.然后点恢复操作,在电视机桌面就可以看到安装的应用了,可以运行那么最后一种方式就是直接在电视上的应用商店进行下载。
& 点击安装按钮，直接到下一步。
& 这就是安装成功了，我们就可以开心的使用了。
大家感兴趣的内容
12345678910
最近更新的内容温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
本博为百科宝库（珍藏精文2万余篇）。温馨提示：
（一）有博友2万8千多位,敬请朋友在理睬头像下加理睬为博友。
（二）百度一下理睬博客可进入本博。
（三）首页中部有理睬其它空间入点,朋友们可点相应的空间、博客进入。
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
理睬推荐阅读：
& 09:19:07
& 09:36:40
& 08:20:01
& 07:55:35
& 07:28:16
& 07:27:25
& 07:38:39
& 09:30:20
& 08:04:29
& 07:50:50
& 08:00:55
& 08:08:38
阅读(8285)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_094069',
blogTitle:'怎样实现优酷视频的自动播放',
blogAbstract:'
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}