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：<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; 
}

②在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控制切換視頻的案例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！