首頁 > web前端 > html教學 > HTML頁面嵌入影片與JS控制切換影片範例詳解_HTML/Xhtml_網頁製作

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

不言
發布: 2018-05-22 14:57:45
原創
3410 人瀏覽過

首先,在頁面中嵌入視頻的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標籤一文。 

然後,再說說如何用JS來動態改變嵌入影片的位址從而達到播放下一個影片的目的。 
這時好多人立刻就能想到用標籤名或DOM方式來找出上述param結點的value屬性和embed結點的src屬性,用JS動態賦值來改變位址。但測試發現視訊地址雖然被替換了,頁面上顯示的影片卻還是原來的沒有改變,百思不得其解。

原來,嵌入的這個object物件的所有參數是在頁面載入的時候初始化的,只有使其重新載入才能實現切換到下一個影片進行播放,單純改變它的位址屬性值是不起作用的。就像公司的某個員工,他的地址變了(搬家了),他還是原來的那個員工而不是其他人。 
我常用的使其重新載入的方法有兩種(以上述程式碼為例): 
①用JS的obj.innerHTML方法將object物件整體進行重設。

複製程式碼

程式碼如下:

/*功能:动态切换视频*/ 
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>
登入後複製


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板