HTML頁面嵌入視頻與JS控制切換視頻示例詳解
來源:易賢網(wǎng) 閱讀:1154 次 日期:2016-06-16 11:33:59
溫馨提示:易賢網(wǎng)小編為您整理了“HTML頁面嵌入視頻與JS控制切換視頻示例詳解”,方便廣大網(wǎng)友查閱!

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

</div> 

其中,同時使用object和embed標簽是為了兼容更多的瀏覽器,但請注意保持兩種標簽下相同屬性值的一致。 

PS:<object>和<embed>標簽及其屬性的介紹和使用方法請參考OBJECT和EMBED標簽一文。 

然后,再說說如何用JS來動態(tài)改變嵌入視頻的地址從而達到播放下一個視頻的目的。 

這時好多人立刻就能想到用標簽名或者DOM方式來找到上述param結(jié)點的value屬性和embed結(jié)點的src屬性,用JS動態(tài)賦值來改變地址。但是測試發(fā)現(xiàn)視頻地址雖然被替換了,頁面上顯示的視頻卻還是原來的沒有改變,百思不得其解。 

原來,嵌入的這個object對象的所有參數(shù)是在頁面加載的時候初始化的,只有使其重新加載才能實現(xiàn)切換到下一個視頻進行播放,單純改變它的地址屬性值是不起作用的。就像公司的某個員工,他的地址變了(搬家了),他還是原來的那個員工而不是其他人。 

我經(jīng)常使用的使其重新加載的方法有兩種(以上述代碼為例): 

①用JS的obj.innerHTML方法將object對象整體進行重置。 

代碼如下:

/*功能:動態(tài)切換視頻*/ 

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容器內(nèi)放置一個iframe,這樣可以動態(tài)刷新iframe內(nèi)的頁面而不影響當前父頁面。 

具體的代碼就不寫了,大體的思路有: 

1.采用url傳值。 

2.父頁面或子頁面弄個隱藏域動態(tài)存放地址供子頁面獲取。 

3.采用①方法重置子頁面中object對象。 

4.其他諸如window.open方法就繞遠了,不推薦。 

至此,嵌入和控制視頻切換都成功實現(xiàn)了。但是無意間,我發(fā)現(xiàn)一個問題: 

切換到新的視頻之后,點刷新或按F5等任何方式的刷新頁面,都會彈出一個“缺少對象”的腳本錯誤。找到錯誤代碼,發(fā)現(xiàn)是Flash的內(nèi)部腳本錯誤: 

function __flash__removeCallback(instance, name) { 

instance[name] = null; 

如果頁面里使用了flash,并且flash里使用了flash.external.ExternalInterface.addCallback 方法,刷新網(wǎng)頁時就會報__flash__removeCallback的js錯誤:缺少對象(Line 53),(Jscript-scriptblock)。此函數(shù)的調(diào)用處為: 

__flash__removeCallback(document.getElementById(""), "dewprev"); 

很顯然,這里document.getElementById("")返回的是null,才會導致__flash__removeCallback報錯,個人認為這個flash的內(nèi)置方法或許應該這么寫: 

function __flash__removeCallback(instance, name) { 

if (instance != null) { instance[name] = null; } 

有人測試發(fā)現(xiàn),document.getElementById("")這里是獲取flash控件Object對象的id/name屬性的,之所以出現(xiàn)這個錯誤,是因為沒給Object設置id/name屬性,設置后就不會出錯了。可事實上我的object都是帶著id/name屬性的,因此不敢茍同此原因。由此看來,這個加id/name的方法可以解決部分人的問題,引起此問題的原因并非僅此一種。 

爾后,我苦苦找尋了好久,終于在一個外國網(wǎng)站上找到了解決的辦法,是一個叫Dave Smith的人寫的,我在他代碼的基礎上做了點改進,減少了頁面不斷執(zhí)行代碼的壓力。他提供的代碼如下: 

代碼如下:

<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內(nèi)部的這個腳本可以解決當前的問題,但是當object對象加載后某個時間,flash內(nèi)部的這個腳本又會覆蓋你重寫的這個函數(shù)。因此不能保證播放器到時會調(diào)用你重寫的函數(shù)。為了達到這個目的,他將函數(shù)設為每10毫秒覆蓋一下flash內(nèi)部提供的這個函數(shù)。這樣問題就解決了。同時他將這段代碼加以簡化形成了以下兩個“版本”: 

簡化版本一:稍簡 

代碼如下:

<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> 

我想了會,理理思路: 

這錯誤是在刷新頁面時產(chǎn)生的,頁面刷新的過程就是舊頁面的消亡和新頁面的重載。理論上重載新頁面不會有什么問題,那么錯誤就是產(chǎn)生在舊頁面消亡前的“善后”工作中。我只要在頁面消亡前將flash內(nèi)部這個回調(diào)函數(shù)重寫,就能達到同樣的目的,代碼如下,測試通過。 

代碼如下:

/*解決視頻切換內(nèi)部腳本錯誤*/ 

<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> 

更多信息請查看網(wǎng)頁制作
易賢網(wǎng)手機網(wǎng)站地址:HTML頁面嵌入視頻與JS控制切換視頻示例詳解
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇剩?/div>

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)