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标识是以便适配更多的访问器,但请留意维持两种标识下同样特性值的1致。
PS:<object>和<embed>标识及其特性的详细介绍和应用方式请参照OBJECT和EMBED标识1文。

随后,再说说怎样用JS来动态性更改嵌入视頻的详细地址从而做到播发下1个视頻的目地。
这时候许多人马上就可以想起用标识名或DOM方法来寻找上述param结点的value特性和embed结点的src特性,用JS动态性取值来更改详细地址。可是检测发现视頻详细地址尽管被更换了,网页页面上显示信息的视頻却還是原先的沒有更改,百思不可其解。

原先,嵌入的这个object目标的全部主要参数是在网页页面载入的情况下原始化的,仅有使其再次载入才可以完成切换到下1个视頻开展播发,单纯性更改它的详细地址特性值是不起功效的。就像企业的某个职工,他的详细地址变了(搬新家了),他還是原先的那个职工而并不是别的人。
我常常应用的使其再次载入的方式有两种(以上述编码为例):
①用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器皿内置放1个iframe,这样能够动态性更新iframe内的网页页面而不危害当今父网页页面。
实际的编码就不写了,大致的思路有:
  1.选用url传值。
  2.父网页页面或子网页页面弄个掩藏域动态性储放详细地址供子网页页面获得。
  3.选用①方式重设子网页页面中object目标。
  4.别的诸如window.open方式就绕远了,不强烈推荐。
至此,嵌入和操纵视頻切换都取得成功完成了。可是不经意间,我发现1个难题:
切换到新的视頻以后,点更新或按F5等任何方法的更新网页页面,都会弹出1个“缺乏目标”的脚本制作不正确。寻找不正确编码,发现是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的方式能够处理一部分人的难题,引发此难题的缘故并不是仅此1种。

而后,我苦苦寻找了好长时间,终究在1个外国网站上寻找掌握决的方法,是1个叫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毫秒遮盖1下flash內部出示的这个涵数。这样难题就处理了。另外他将这段编码加以简化产生了下列两个“版本号”:
简化版本号1:稍简

拷贝编码
编码以下:

<script type="text/javascript">
  var setRemoveCallback = function() {
__flash__removeCallback = function(instance, name) {
       if(instance) {
instance[name] = null;
}
};
window.setTimeout(setRemoveCallback, 10);
};
setRemoveCallback();
</script>

简化版本号2:超简

拷贝编码
编码以下:

<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>