HTML頁面嵌入影片與JS控制切換影片範例詳解_HTML/Xhtml_網頁製作

首先，在頁面中嵌入視頻的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>