Question

我有三个视频和缩略图。我试图根据选择的缩略图更改初始视频的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();
    }
}

Answer 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(); 
}

Answer 2

当您说media.src = "vGow.mp4";时，您要将vGow.mp4的source属性设置为已定义为视频标记的媒体元素，请使用document.getElementById('trailers');但实际上是html5 <video>标记没有任何源属性。它实际上是您需要更新的<source>标记的source属性。

在img上更改视频点击

2 个答案: