HTML页面嵌入视频和JS控制切换视频的问题
文章摘自:http://www.cnblogs.com/jorton/archive/2012/03/19/vidio_in_site.html
首先,在页面中嵌入视频的HTML代码为:

1 <div id="youku" class="youku">
2 <object id="obx" name="obx" width="290" height="260">
3 <param name="movie" value="http://www.tudou.com/v/6HJvxxkarzk/&resourceId=0_04_11_19/v.swf"></param>
4 <param name="allowFullScreen" value="true"></param>
5 <param name="allowscriptaccess" value="always"></param>
6 <param name="wmode" value="opaque"></param>
7 <embed src="http://www.tudou.com/v/6HJvxxkarzk/&resourceId=0_04_11_19/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="290" height="260"></embed>
8 </object>
其中,同时使用object和embed标签是为了兼容更多的浏览器,但请注意保持两种标签下相同属性值的一致。 PS:<object>和<embed>标签及其属性的介绍和使用方法请参考OBJECT和EMBED标签一文。
然后,再说说如何用JS来动态改变嵌入视频的地址从而达到播放下一个视频的目的。 这时好多人立刻就能想到用标签名或者DOM方式来找到上述param结点的value属性和embed结点的src属性,用JS动态赋值来改变地址。但是测试发现视频地址虽然被替换了,页面上显示的视频却还是原来的没有改变,百思不得其解。
原来,嵌入的这个object对象的所有参数是在页面加载的时候初始化的,只有使其重新加载才能实现切换到下一个视频进行播放,单纯改变它的地址属性值是不起作用的。就像公司的某个员工,他的地址变了(搬家了),他还是原来的那个员工而不是其他人。 我经常使用的使其重新加载的方法有两种(以上述代码为例): ①用JS的obj.innerHTML方法将object对象整体进行重置。
①用JS的obj.innerHTML方法将object对象整体进行重置。

1 /*功能:动态切换视频*/
2 function setvideo(url){
3 var youku = document.getElementById("youku");
4 var htmlstr = "<object id='obx' name='obx' width='290' height='260'>";
5 htmlstr += "<param name='movie' value='"+url+"'></param>";
6 htmlstr += "<param name='allowFullScreen' value='true'></param>";
7 htmlstr += "<param name='allowscriptaccess' value='always'></param>";
8 htmlstr += "<param name='wmode' value='opaque'></param>";
9 htmlstr += "<embed src='"+url+"' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true'
wmode='opaque' width='290' height='260'></embed>";
10 htmlstr += "</object>";
11 youku.innerHTML = htmlstr;
12 }

②在div容器内放置一个iframe,这样可以动态刷新iframe内的页面而不影响当前父页面。 具体的代码就不写了,大体的思路有: 1.采用url传值。 2.父页面或子页面弄个隐藏域动态存放地址供子页面获取。 3.采用①方法重置子页面中object对象。 4.其他诸如window.open方法就绕远了,不推荐。 至此,嵌入和控制视频切换都成功实现了。但是无意间,我发现一个问题: 切换到新的视频之后,点刷新或按F5等任何方式的刷新页面,都会弹出一个“缺少对象”的脚本错误。找到错误代码,发现是Flash的内部脚本错误:
1 function __flash__removeCallback(instance, name) {
2 instance[name] = null;
3 }
如果页面里使用了flash,并且flash里使用了flash.external.ExternalInterface.addCallback 方法,刷新网页时就会报__flash__removeCallback的js错误:缺少对象(Line 53),(Jscript-scriptblock)。此函数的调用处为:
1 __flash__removeCallback(document.getElementById(""), "dewprev");
很显然,这里document.getElementById("")返回的是null,才会导致__flash__removeCallback报错,个人认为这个flash的内置方法或许应该这么写:
1 function __flash__removeCallback(instance, name) {
2 if (instance != null) { instance[name] = null; }
3 }
有人测试发现,document.getElementById("")这里是获取flash控件Object对象的id/name属性的,之所以出现这个错误,是因为没给Object设置id/name属性,设置后就不会出错了。可事实上我的object都是带着id/name属性的,因此不敢苟同此原因。由此看来,这个加id/name的方法可以解决部分人的问题,引起此问题的原因并非仅此一种。 尔后,我苦苦找寻了好久,终于在一个外国网站上找到了解决的办法,是一个叫Dave Smith的人写的,我在他代码的基础上做了点改进,减少了页面不断执行代码的压力。他提供的代码如下:

1 <script type="text/javascript">
2 (function(){
3 var setRemoveCallback = function(){
4 __flash__removeCallback = function(instance, name){
5 if (instance){
6 instance[name] =null;
7 }
8 };
9 window.setTimeout(setRemoveCallback, 10);
10 };
11 setRemoveCallback();
12 })();
13 </script>

他的意思大体就是:重写flash内部的这个脚本可以解决当前的问题,但是当object对象加载后某个时间,flash内部的这个脚本又会覆盖你重写的这个函数。因此不能保证播放器到时会调用你重写的函数。为了达到这个目的,他将函数设为每10毫秒覆盖一下flash内部提供的这个函数。这样问题就解决了。同时他将这段代码加以简化形成了以下两个“版本”: 简化版本一:稍简

1 <script type="text/javascript">
2 var setRemoveCallback = function() {
3 __flash__removeCallback = function(instance, name) {
4 if(instance) {
5 instance[name] = null;
6 }
7 };
8 window.setTimeout(setRemoveCallback, 10);
9 };
10 setRemoveCallback();
11 </script>

简化版本二:超简
1 <script type="text/javascript">(function(){var s=function(){__flash__removeCallback=function(i,n){if(i)i[n]=null;};window.setTimeout(s,10);};s();})();</script>
我想了会,理理思路: 这错误是在刷新页面时产生的,页面刷新的过程就是旧页面的消亡和新页面的重载。理论上重载新页面不会有什么问题,那么错误就是产生在旧页面消亡前的“善后”工作中。我只要在页面消亡前将flash内部这个回调函数重写,就能达到同样的目的,代码如下,测试通过。

1 /*解决视频切换内部脚本错误*/
2 <script type="text/javascript">
3 function endcall(){var s=function(){__flash__removeCallback=function(i,n){if(i)i[n]=null;};window.setTimeout(s,10);};s();}
4 window.onbeforeunload = endcall;
5 </script>
HTML页面嵌入视频和JS控制切换视频的问题的更多相关文章
- js 动态切换视频
如图所示,想要一个这样的效果,就是点击下面视频标题时,上面的视频跟着切换,但是要求页面不重新加载. 参考文章在这里 这里贴上部分代码供大家参考. <li id="about_li6&q ...
- Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
- vue使用 video.js动态切换视频源视频源不刷新问题
网上的垃圾代码太多,最后翻了video.js的官方文档,就这么简单,浪费了我这么久,注:我这里使用的vue //html <video id="my-player" con ...
- 使用 video.js 开发 HTML5 视频页面
时间 2015-05-13 17:11:58 The GIS Guy 原文 http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...
- Js控制iFrame切换加载网址
<html> <head> <title>Js控制 iFrame 切换加载网址</title> </head> <body> & ...
- vue在页面嵌入别的页面或者是视频2
vue在页面嵌入别的页面或者是视频 以下是嵌入页面 <iframe name="myiframe" id="myrame" src="http: ...
- 按钮切换显示不同的内容(js控制)
今天项目发现了一个jsp页面按钮切换,下面展示模块的不同显示问题,看到同事修改完之后的效果,js控制感觉特写好,所以想写把这个好的方法js记录下来,以便以后的参考. 一:先上图,了解大概的样子,如下图 ...
- JS控制页面内容
JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...
- js控制页面显示
两个菜单切换显示页面内容: js控制代码, /** JS初始化 **/ $(document).ready(function() { $('#email_btn').click(function(){ ...
随机推荐
- 必备技能:分清楚DOM的attribute和property
分清楚DOM的attribute和property,用JQ的时候分清楚attr,和prop方法,网上有很多大神的总结,我就不列举了.
- Linux 编写c++程序之openssl
在使用openssl 库前,需检测是否安装openssl , shell 窗口输入:openssl version , 在openssl 安装完成之后, 可通过vi 编写测试代码 . 本例中附上加密 ...
- css3简单介绍
关于css3我先介绍几个简单的选择器: 先进行设置: 字符串匹配属性选择器: E[alt^="a"] 选择属性中以a开头的元素: E[alt$="a"] 选 ...
- mac 下配置protobuf 3.0 golang环境
protobuf 3.0 与 之前的 protobuf 2.6 的语法是不一样的.需要重新安装一下,本机的环境是 OS X Yosemite 10.10.2 1. 不采用home brew安装,用 ...
- Winform基础知识
1.关于登陆部分 this.DialogResult = DialogResult.OK; this.Close(); FrmLogin login = new FrmLogin(m_CurUser) ...
- 自定义EditText实现可以一键删除输入的内容
public class MyEditText extends EditText { private Drawable dRight; private Rect rRounds; public MyE ...
- 图数据库(graph database)资料收集和解析 - daily
Motivation 图数据库中的高科技和高安全性中引用了一个关于图数据库(graph database)的应用前景的乐观估计: 预计到2017年,图数据库产业在数据库市场的份额将从2个百分点增长到2 ...
- dede织梦后台如何修改?如何增加删除菜单?(
织梦后台的模板存放在dede/templets下面, 登陆首页模板login.htm, 进入首页模板index_body.htm, 左侧菜单模板index_menu2.htm. 修改左侧菜单dede/ ...
- Java笔记6-数组
知识大纲一.数组的应用由于数组是用来存储数据的,所以,它的操作总是增.删除.改.查的操作.数组做为一种最基本的数据结构,它在查询上效率是最高的.但是在增加.删除的操作效率是最低的. 因为,数组的长度一 ...
- python 多线程threading
上一篇说到thread模块,我们要自己解决线程锁.其实也没有什么啦.只是现在的人都比较懒,既然有高级封装的函数为什么要自己写. 所以就有了threading. 其实都一样啦. 来一个最简单的threa ...