JQuery и HTML5 видео - изменить источник на клике

Question

Мне нужно создать интерактивное видео с использованием HTML5 и jQuery.Моя цель:

1. Играть video1
2. Когда video1 заканчивается, показывает button1, onClick, меняется на video2 и скрывается button1
3. Воспроизвести video2
4. On Ended показать button 2, OnClick изменить на video 3
5. и т. Д. ...

Мой вопрос к вам, что я делаю не так?Это мой код.

<section> 
<video autoplay="autoplay" controls="controls" onended="testEnded()">
    <source id="srcWebm" src="media/Madagascar.webm"/>
</video>
</section>

<section id="buttons" class="btnShow">
    <ul id="buttons2" hidden>
        <li><a href="#" id="choice1" onclick="changeSrc1()">VW</a></li>

    </ul>
</section>

Функция testEnded() находится на внешнем листе (который правильно связан с HTML).Сценарий выглядит следующим образом:

function changeSrc1() {
    $('#srcWebm').attr('src','media/VW.webm');

}

function testEnded() {
        $('#buttons2').removeAttr('hidden');
    }

Когда я выполняю changeSrc1(), ничего не происходит.Я попытался раскрасить код - без ошибок ...

Что мне делать?Спасибо!

Answer 1

Мне удалось сделать нечто подобное:

<video id="video" autoplay="autoplay" controls="controls">
 <source id="srcWebm" src="media/Madagascar.webm"/>
</video>

var video = document.getElementById("video"); 
video.src = "your link here";

Однако в настоящее время это вызывает у меня проблемы с IE9.

Answer 2

Проверьте этот плагин, у него есть некоторые свойства, которые могут быть вам полезны.

Скачать плагин

http://videojs.com/

Справочник по API

http://videojs.com/docs/api/

Надеюсь, это поможет вам.

Answer 3

, чем удалить все дочерние элементы из <video> -tag и создать новый элемент <source>, который вы вставляете в узел <video>

Answer 4

Я нашел решение: очевидно, jQuery не поддерживает изменение атрибута 'src' <source>.Ошибка?