HTML页面嵌入视频与JS控制切换视频示例详解
导读：收集整理的这篇文章主要介绍了HTML页面嵌入视频与JS控制切换视频示例详解，觉得挺不错的，现在分享给大家，也给大家做个参考。 首先，在页面中嵌入视频的HTML代码为： 复制代码代码如下: <div id="youku" cl...
收集整理的这篇文章主要介绍了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='"+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>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML页面嵌入视频与JS控制切换视频示例详解
本文地址： https://pptw.com/jishu/588107.html