HTML页面嵌入视频与JS控制切换视频示例详解
本文为大家详细介绍了HTML页面如何嵌入视频以及如何用JS控制切换视频,具体如下,大家可以参考下
首先,在页面中嵌入视频的HTML代码为:
代码如下:
<p 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> </p>
其中,同时使用object和embed标签是为了兼容更多的浏览器,但请注意保持两种标签下相同属性值的一致。
PS:
代码如下:
/*功能:动态切换视频*/ 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; }
②在p容器内放置一个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页面嵌入视频与JS控制切换视频示例详解相关文章请关注PHP中文网!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.
