Javascript Einstellung/Ersetzung der Quelle src = "" auf html5 Video

Question

In meinem HTML für jede Quelle wollte ich Javascript verwenden, um das richtige Video in die passende Quelle wie folgt einzufügen.

<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> 

Alle Beispiele finde ich halten jquery mit und ich will nicht jquery oder eine externe Bibliothek verwenden.

Was ist der beste Weg, dies zu tun. Ich würde so etwas tun, aber ich möchte dies erreichen, ohne HTML id = "idname" -Tags auf meinem Video und Quellelement zu verwenden.

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

Vielen Dank für das Lesen und jede Hilfe/Anleitung, die gegeben werden kann.

Answer 1

Sie versuchen, ein Objekt mit "Video" id so wählen versuchen ID Ihre Quellen hinzuzufügen:

<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

Sie konnten könnte ein Video-Container, und jedes Mal, wenn Sie ein neues Video ausgewählt haben, könnten Sie ein neues Element im Container erstellen und zerstöre das alte mit 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;