Изменение видео на img click

У меня есть три видео и миниатюры для них. Я пытаюсь изменить src исходного видео на основе выбранного эскиза.Изменение видео на img click

Мой 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

Извините. Я чувствовал, что кто-то из java-опыта может понять проблему. – Batman

'document.getElementsByTagName (" img ")' - это коллекция. для этого случая используйте 'document.getElementsByTagName (" img ") [0]', но вы действительно должны использовать jQuery –

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

Извините, я не понимаю использование источника в качестве параметра. – Batman

'onClick' - используя один из миниатюр, вы вызываете функцию' changeTrailer() ', передавая ему соответствующий источник, который затем присваивается видео-тегу. – Vishnu

Не передал бы источник элемента, к которому привязан onclick? Поэтому присвоить источник img видео, которое не сработает. – Batman

Когда вы говорите 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

Я думаю, что главная проблема - это условие if. Я не знаю, имеет ли смысл, как я это написал. – Batman

Изменение видео на img click

ответ

Смежные вопросы