0

3 つのビデオとそれらのサムネイルがあります。選択したサムネイルに基づいて、最初のビデオの 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()"/></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();
    }
}
4

2 に答える 2

1

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-10T07:33:10.740 に答える
0

media.src = "vGow.mp4";vGow.mp4 の source 属性を、video タグとして定義した media 要素に設定すると言うとdocument.getElementById('trailers');、実際には html5<video>タグには source 属性がありません。実際<source>に更新する必要があるのは、タグのソース属性です。

于 2013-02-10T07:27:26.757 に答える