极乐门资源网 Design By www.ioogu.com
首先,在页面中嵌入视频的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="/UploadFiles/2021-03-30/v.swf"></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>
复制代码代码如下:
<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="/UploadFiles/2021-03-30/v.swf"></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>
标签:
html,嵌入视频,切换视频
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无HTML页面嵌入视频与JS控制切换视频示例详解的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年12月24日
2024年12月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]