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

2019-10-26 17:14:48

字體：大中小

供稿：網(wǎng)友

首先，在頁面中嵌入視頻的HTML代碼為：

復(fù)制代碼

代碼如下:
<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標(biāo)簽是為了兼容更多的瀏覽器，但請注意保持兩種標(biāo)簽下相同屬性值的一致。
PS：<object>和<embed>標(biāo)簽及其屬性的介紹和使用方法請參考OBJECT和EMBED標(biāo)簽一文。

然后，再說說如何用JS來動態(tài)改變嵌入視頻的地址從而達(dá)到播放下一個視頻的目的。
這時好多人立刻就能想到用標(biāo)簽名或者DOM方式來找到上述param結(jié)點(diǎn)的value屬性和embed結(jié)點(diǎn)的src屬性，用JS動態(tài)賦值來改變地址。但是測試發(fā)現(xiàn)視頻地址雖然被替換了，頁面上顯示的視頻卻還是原來的沒有改變，百思不得其解。

原來，嵌入的這個object對象的所有參數(shù)是在頁面加載的時候初始化的，只有使其重新加載才能實(shí)現(xiàn)切換到下一個視頻進(jìn)行播放，單純改變它的地址屬性值是不起作用的。就像公司的某個員工，他的地址變了(搬家了)，他還是原來的那個員工而不是其他人。
我經(jīng)常使用的使其重新加載的方法有兩種(以上述代碼為例)：
①用JS的obj.innerHTML方法將object對象整體進(jìn)行重置。

復(fù)制代碼

代碼如下:
/*功能：動態(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)的頁面而不影響當(dāng)前父頁面。
具體的代碼就不寫了，大體的思路有：

上一篇：html中設(shè)置讓div中的內(nèi)容超出后自動顯示滾動條

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