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点击更改视频

回答

相关问题