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

2019-10-26 17:14:48

字體：大中小

供稿：網(wǎng)友

首先，在頁(yè)面中嵌入視頻的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>

其中，同時(shí)使用object和embed標(biāo)簽是為了兼容更多的瀏覽器，但請(qǐng)注意保持兩種標(biāo)簽下相同屬性值的一致。
PS：<object>和<embed>標(biāo)簽及其屬性的介紹和使用方法請(qǐng)參考OBJECT和EMBED標(biāo)簽一文。

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

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

復(fù)制代碼

代碼如下:
/*功能：動(dòng)態(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)放置一個(gè)iframe，這樣可以動(dòng)態(tài)刷新iframe內(nèi)的頁(yè)面而不影響當(dāng)前父頁(yè)面。
具體的代碼就不寫(xiě)了，大體的思路有：

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

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