js点击弹框优酷视频,并控制视频播放和暂停及重新载入的方法

2024-04-29 23:48

本文主要是介绍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点击弹框优酷视频,并控制视频播放和暂停及重新载入的方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/947470

相关文章

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》:本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程

C#中读取XML文件的四种常用方法

《C#中读取XML文件的四种常用方法》Xml是Internet环境中跨平台的,依赖于内容的技术,是当前处理结构化文档信息的有力工具,下面我们就来看看C#中读取XML文件的方法都有哪些吧... 目录XML简介格式C#读取XML文件方法使用XmlDocument使用XmlTextReader/XmlTextWr

C++初始化数组的几种常见方法(简单易懂)

《C++初始化数组的几种常见方法(简单易懂)》本文介绍了C++中数组的初始化方法,包括一维数组和二维数组的初始化,以及用new动态初始化数组,在C++11及以上版本中,还提供了使用std::array... 目录1、初始化一维数组1.1、使用列表初始化(推荐方式)1.2、初始化部分列表1.3、使用std::

oracle DBMS_SQL.PARSE的使用方法和示例

《oracleDBMS_SQL.PARSE的使用方法和示例》DBMS_SQL是Oracle数据库中的一个强大包,用于动态构建和执行SQL语句,DBMS_SQL.PARSE过程解析SQL语句或PL/S... 目录语法示例注意事项DBMS_SQL 是 oracle 数据库中的一个强大包,它允许动态地构建和执行

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

Ubuntu固定虚拟机ip地址的方法教程

《Ubuntu固定虚拟机ip地址的方法教程》本文详细介绍了如何在Ubuntu虚拟机中固定IP地址,包括检查和编辑`/etc/apt/sources.list`文件、更新网络配置文件以及使用Networ... 1、由于虚拟机网络是桥接,所以ip地址会不停地变化,接下来我们就讲述ip如何固定 2、如果apt安

Go路由注册方法详解

《Go路由注册方法详解》Go语言中,http.NewServeMux()和http.HandleFunc()是两种不同的路由注册方式,前者创建独立的ServeMux实例,适合模块化和分层路由,灵活性高... 目录Go路由注册方法1. 路由注册的方式2. 路由器的独立性3. 灵活性4. 启动服务器的方式5.

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术(如Docker)、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术(如 docker)1. 创

浅析如何使用Swagger生成带权限控制的API文档

《浅析如何使用Swagger生成带权限控制的API文档》当涉及到权限控制时,如何生成既安全又详细的API文档就成了一个关键问题,所以这篇文章小编就来和大家好好聊聊如何用Swagger来生成带有... 目录准备工作配置 Swagger权限控制给 API 加上权限注解查看文档注意事项在咱们的开发工作里,API

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点: