Установка/замена исходного кода src = "" на html5 video

Question

В моем HTML для каждого источника я хотел использовать javascript для вставки правильного видео в соответствующий источник следующим образом.

<script type="text/javascript"> 
var 1_video = '1.mp4'; 
var 2_video = '1.webm'; 
var 3_video = '1.ogv'; 
</script> 
<video width="320" height="240" controls="controls"> 
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> 
<source src="" type="video/mp4" /> 
<!-- WebM/VP8 for Firefox4, Opera, and Chrome --> 
<source src="" type="video/webm" /> 
<!-- Ogg/Vorbis for older Firefox and Opera versions --> 
<source src="" type="video/ogg" /> 
</video> 

Все примеры, которые я нахожу хранение с помощью JQuery, и я не хочу использовать JQuery или любой внешней библиотеки.

Каков наилучший способ для этого. Я бы сделал что-то вроде этого, но я хочу достичь этого, не используя теги id id id = "idname" на моем видео и исходном элементе.

document.getElementById('video').src = 1_video; 

Спасибо за чтение и любую помощь/руководство, которое может быть дано.

Answer 1

вы пытаетесь выбрать объект с "видео" идентификатор так попытайтесь добавить идентификатор к источникам:

<video width="320" height="240" controls="controls"> 
 
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> 
 
<source src="" id="source-mp4" type="video/mp4" /> 
 
<!-- WebM/VP8 for Firefox4, Opera, and Chrome --> 
 
<source src="" id="source-webm" type="video/webm" /> 
 
<!-- Ogg/Vorbis for older Firefox and Opera versions --> 
 
<source src="" id="source-ogg" type="video/ogg" /> 
 
</video>

document.getElementById('source-mp4').src = 1_video; 
 
document.getElementById('source-webm').src = 2_video; 
 
document.getElementById('source-ogg').src = 2_video;

Answer 2

Вы могли бы мог видеоконтейнер, и каждый раз, когда вы выбираете новое видео, вы можете создать новый элемент внутри контейнера и уничтожить старые с помощью removeChild

/*Destroy current element inside the container*/ 
    container.removeChild(element); 

    /*Create new element in the container*/ 
    var element = container.createElement("VIDEO"); 
    element.src = XYZ-video;