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=&#39;obx&#39; name=&#39;obx&#39; width=&#39;290&#39; height=&#39;260&#39;>"; 
htmlstr += "<param name=&#39;movie&#39; value=&#39;"+url+"&#39;></param>"; 
htmlstr += "<param name=&#39;allowFullScreen&#39; value=&#39;true&#39;></param>"; 
htmlstr += "<param name=&#39;allowscriptaccess&#39; value=&#39;always&#39;></param>"; 
htmlstr += "<param name=&#39;wmode&#39; value=&#39;opaque&#39;></param>"; 
htmlstr += "<embed src=&#39;"+url+"&#39; type=&#39;application/x-shockwave-flash&#39; allowscriptaccess=&#39;always&#39; allowfullscreen=&#39;true&#39; wmode=&#39;opaque&#39; width=&#39;290&#39; height=&#39;260&#39;></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中文網！