HTML頁面嵌入視頻與JS控制切換視頻示例詳解

2019-10-26 17:14:48

字體：大中小

來源：轉載

供稿：網友

首先，在頁面中嵌入視頻的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來動態改變嵌入視頻的地址從而達到播放下一個視頻的目的。
這時好多人立刻就能想到用標簽名或者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;
}

②在div容器內放置一個iframe，這樣可以動態刷新iframe內的頁面而不影響當前父頁面。
具體的代碼就不寫了，大體的思路有：

上一篇：html中設置讓div中的內容超出后自動顯示滾動條

下一篇：通過css控制HTML文本框中的文字垂直居中