How to change video source with just JavaScript
<p>Here is my simple page (css not added):</p>

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

&lt;div id="xxxxxx"&gt;
    &lt;div&gt;&lt;a onclick="StopVideo();"&gt;X&lt;/a&gt;
         &lt;video id="video" width="520" height="360" controls&gt;&lt;/video&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;script&gt;
    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();
    }
&lt;/script&gt;
</code></pre>

<p>When I click "Play Video 2" it's still playing video 1. So how do I switch the video source to play in same video element? I need just pure JavaScript if that's possible</p>