今天小编跟大家讲解下有关HTML页面嵌入视频与JS控制切换视频示例详解 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML页面嵌入视频与JS控制切换视频示例详解 的相关资料，希望小伙伴们看了有所帮助。
首先 在页面中嵌入视频的HTML代码为： 复制代码代码如下: <div id="youku"class="youku"> <object id="obx"name="obx"width="290"height="260"> <param name="movie"value="http://www.tudou.com/v/6HJvxxkarzk/&resourceId=0_04_11_19/v.swf"></param> <param name="allowFullScreen"value="true"></param> <param name="allowscriptaccess"value="always"></param> <param name="wmode"value="opaque"></param> <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> </object> </div> 其中 同时使用object和embed标签是为了兼容更多的浏览器 但请注意保持两种标签下相同属性值的一致。 PS：<object>和<embed>标签及其属性的介绍和使用方法请参考OBJECT和EMBED标签一文。 然后 再说说如何用JS来动态改变嵌入视频的地址从而达到播放下一个视频的目的。 这时好多人立刻就能想到用标签名或者DOM方式来找到上述param结点的value属性和embed结点的src属性 用JS动态赋值来改变地址。但是测试发现视频地址虽然被替换了 页面上显示的视频却还是原来的没有改变 百思不得其解。 原来 嵌入的这个object对象的所有参数是在页面加载的时候初始化的 只有使其重新加载才能实现切换到下一个视频进行播放 单纯改变它的地址属性值是不起作用的。就像公司的某个员工 他的地址变了(搬家了) 他还是原来的那个员工而不是其他人。 我经常使用的使其重新加载的方法有两种(以上述代码为例)： ①用JS的obj.innerHTML方法将object对象整体进行重置。 复制代码代码如下: function setvideo(url){ var youku = document.getElementById("youku"); var htmlstr ="<object id='obx' name='obx' width='290' height='260'>"; htmlstr +="<param name='movie' value='"+url+"'></param>"; htmlstr +="<param name='allowFullScreen' value='true'></param>"; htmlstr +="<param name='allowscriptaccess' value='always'></param>"; htmlstr +="<param name='wmode' value='opaque'></param>"; htmlstr +="<embed src='https://www.aidi.net.cn//web/"+url+"' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' wmode='opaque' width='290' height='260'></embed>"; htmlstr +="</object>"; youku.innerHTML = htmlstr; } ②在div容器内放置一个iframe 这样可以动态刷新iframe内的页面而不影响当前父页面。 具体的代码就不写了 大体的思路有： 1.采用url传值。 2.父页面或子页面弄个隐藏域动态存放地址供子页面获取。 3.采用①方法重置子页面中object对象。 4.其他诸如window.open方法就绕远了 不推荐。 至此 嵌入和控制视频切换都成功实现了。但是无意间 我发现一个问题： 切换到新的视频之后 点刷新或按F5等任何方式的刷新页面 都会弹出一个“缺少对象”的脚本错误。找到错误代码 发现是Flash的内部脚本错误： function __flash__removeCallback(instance, name) { instance[name] = null; } 如果页面里使用了flash 并且flash里使用了flash.external.ExternalInterface.addCallback 方法 刷新网页时就会报__flash__removeCallback的js错误：缺少对象(Line 53) (Jscript-scriptblock)。此函数的调用处为： __flash__removeCallback(document.getElementById(""), "dewprev"); 很显然 这里document.getElementById("")返回的是null 才会导致__flash__removeCallback报错 个人认为这个flash的内置方法或许应该这么写： function __flash__removeCallback(instance, name) { if (instance != null) { instance[name] = null; } } 有人测试发现 document.getElementById("")这里是获取flash控件Object对象的id/name属性的 之所以出现这个错误 是因为没给Object设置id/name属性 设置后就不会出错了。可事实上我的object都是带着id/name属性的 因此不敢苟同此原因。由此看来 这个加id/name的方法可以解决部分人的问题 引起此问题的原因并非仅此一种。 尔后 我苦苦找寻了好久 终于在一个外国网站上找到了解决的办法 是一个叫Dave Smith的人写的 我在他代码的基础上做了点改进 减少了页面不断执行代码的压力。他提供的代码如下： 复制代码代码如下: <script type="text/javascript"> (function(){ var setRemoveCallback = function(){ __flash__removeCallback = function(instance, name){ if (instance){ instance[name] =null; } }; window.setTimeout(setRemoveCallback, 10); }; setRemoveCallback(); })(); </script> 他的意思大体就是：重写flash内部的这个脚本可以解决当前的问题 但是当object对象加载后某个时间 flash内部的这个脚本又会覆盖你重写的这个函数。因此不能保证播放器到时会调用你重写的函数。为了达到这个目的 他将函数设为每10毫秒覆盖一下flash内部提供的这个函数。这样问题就解决了。同时他将这段代码加以简化形成了以下两个“版本”： 简化版本一：稍简 复制代码代码如下: <script type="text/javascript"> var setRemoveCallback = function() { __flash__removeCallback = function(instance, name) { if(instance) { instance[name] = null; } }; window.setTimeout(setRemoveCallback, 10); }; setRemoveCallback(); </script> 简化版本二：超简 复制代码代码如下: <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内部这个回调函数重写 就能达到同样的目的 代码如下 测试通过。 复制代码代码如下: <script type="text/javascript"> function endcall(){var s=function(){__flash__removeCallback=function(i,n){if(i)i[n]=null;};window.setTimeout(s,10);};s();} window.onbeforeunload = endcall; </script>来源：爱蒂网
