img點擊更改視頻

我有三個視頻和縮略圖。我試圖改變基於哪個縮略圖被選擇的初始視頻的src。img點擊更改視頻

我的HTML：

<video id="trailers"> 
      <source src="vLast.mp4" type="video/mp4"> 
      <source src="vLast.webm" type="video/webm"> 
</video> 

<div id="playlist" class="animated fadeInRight"> 
    <div class="thumb" id="tGow"><img src="TbGow.jpg" onClick="changeTrailer()"/></div> 
    <div class="thumb" id="tLast"><img src="TbLast.jpg" onClick="changeTrailer()"/></div> 
    <div class="thumb" id="tTwo"><img src="TbTwo.jpg" onClick="changeTrailer()"/></div> 
</div>

我的腳本：

function changeTrailer(){ 

    var media = document.getElementById('trailers') 
    var thumb = document.getElementsByTagName("img") 
    if(thumb.getAttribute("src") == "TbGow.jpg"){ 
     media.src = "vGow.mp4"; 
     media.load(); 
     media.play(); 
    }else if (thumb.getAttribute("src") == "TbLast.jpg"){ 
     media.src = "vTwo.mp4"; 
     media.load(); 
     media.play(); 
    }else if(thumb.getAttribute("src") == "TbLast.jpg"){ 
     media.src = "vLast.mp4"; 
     media.load(); 
     media.play(); 
    } 
}

來源

2013-02-10 Batman

爲什麼java的標籤？ – techfoobar 2013-02-10 07:23:45

對不起。我覺得有java經驗的人可能會理解這個問題。 – Batman 2013-02-10 07:29:00

'document.getElementsByTagName（「img」）'是一個集合。對於這種情況下使用'document.getElementsByTagName（「img」）[0]'，但你真的應該使用jQuery – 2013-02-10 07:46:55

getElementsByTagName將返回具有該特定標籤名稱的所有元素的數組。因此你的thumb.getAttribute("src")將失敗。你可以交替做的是：

HTML：

<video id="trailers"> 
    <source src="vLast.mp4" type="video/mp4"> 
    <source src="vLast.webm" type="video/webm"> 
</video> 

<div id="playlist" class="animated fadeInRight"> 
    <div class="thumb" id="tGow"><img src="TbGow.jpg" onClick="changeTrailer('vGow')"/></div> 
    <div class="thumb" id="tLast"><img src="TbLast.jpg" onClick="changeTrailer('vTwo')"/></div> 
    <div class="thumb" id="tTwo"><img src="TbTwo.jpg" onClick="changeTrailer('vLast')"/></div> 
</div>

的JavaScript：

function changeTrailer(source){ 
    var media = document.getElementById('trailers') 
    var source1 = media.children[0]; 
    var source2 = media.children[1]; 
    source1.src = source+'.mp4'; 
    source2.src = source+'.webm'; 
    media.load(); 
    media.play(); 
}

來源

2013-02-10 07:33:10 Vishnu

對不起，我不明白使用source作爲參數。 – Batman 2013-02-10 07:35:11

'onClick'其中一個縮略圖，你調用函數'changeTrailer（）'，傳遞給它相應的源，然後分配給視頻標籤。 – Vishnu 2013-02-10 07:37:58

它不會傳遞onclick所附元素的來源嗎？因此，將img源分配給視頻，這是行不通的。 – Batman 2013-02-10 07:42:37

當你說media.src = "vGow.mp4";要設置vGow.mp4給您已經定義爲視頻標籤媒體元素的源屬性，通過使用document.getElementById('trailers');但實際上html5 <video>標籤沒有任何源屬性。它實際上是您需要更新的<source>標籤的源屬性。

來源

2013-02-10 07:27:26 defau1t

我將它改爲：var media = document.getElementByTagName（'source'）但這並沒有解決它。 – Batman 2013-02-10 07:31:47

我認爲主要問題是if條件。我不知道我寫的方式是否有意義。 – Batman 2013-02-10 07:33:11

img點擊更改視頻

回答

相關問題