Wie mit nur JavaScript Videoquelle ändern

Question

Hier ist meine einfache Seite (CSS nicht hinzugefügt):

<a onclick="PlayVideo('http://www.myhost.com/..../myVideo1.mp4');">Play Video 1</a> 
<a onclick="PlayVideo('http://www.myhost.com/..../myVideo2.mp4');">Play Video 2</a> 

<div id="xxxxxx"> 
    <div><a onclick="StopVideo();">X</a> 
     <video id="video" width="520" height="360" controls></video> 
    </div> 
</div> 


<script> 
    function PlayVideo(srcVideo) { 
     var video = document.getElementById('video'); 
     var source = document.createElement('source'); 
     source.setAttribute('src', srcVideo); 
     video.appendChild(source); 
     video.play(); 
    } 

    function StopVideo() { 
     document.getElementById('video').pause(); 
    } 
</script> 

Wenn ich auf „Video Play 2“ noch Video-Wiedergabe ist 1. Wie schalte ich das Video Quelle, um in demselben Videoelement zu spielen? Ich brauche nur reines JavaScript, wenn das möglich ist

Answer 1

Sie müssen keine neue Quelle anhängen. Setzen Sie einfach das neue src Attribut und rufen Sie die video.load Funktion auf. Siehe Arbeiten JSFiddle.

video = document.getElementById('video'); 
source = document.getElementById('source'); 

function PlayVideo(srcVideo){ 
    video.pause(); 
    source.setAttribute('src', srcVideo); 
    video.load(); 
    video.play(); 
} 

function StopVideo(){ 
    document.getElementById('video').pause(); 
}