0

我为他们准备了三个视频和缩略图。我正在尝试根据选择的缩略图更改初始视频的 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 的源属性设置为您定义为视频标签的媒体元素时，使用document.getElementById('trailers');但实际上 html5<video>标签没有任何源属性。它实际上是<source>您需要更新的标签的源属性。

于 2013-02-10T07:27:26.757 回答