HTML5 video: click on play button, play another video - html

Question

I need to change the video link on click on Play button and also need to auto play the video.
<video id="video" src="dhoni.mp4" width="320" height="240" controls>
</video>
<script>
$(document).ready(function () {
var video = document.getElementById('video');
video.onplay = function (e) {
$('video').attr({'src': 'ran.mp4'});
$('video')[0].play();
};
});
</script>

Answer 1

Exists many kinds of solution for what you want, I made an example how you do it
The simple way is just make two videos the first become hidden when the second is playing.
The other way is like the first but you use a image to represent the video1 when the user click in the image, so the video2 start, and you hide the image when the user click.
The others solutions like you're trying is more complicated because if you try to replace the src atribute of a video by other src exist a problem to load this, this involve ajax blob request and this will cause much issues to handle, for example when I trying to load a video that's not hosted in my server, and other things like the how the way firefox, chrome and other browsers render the video.
https://jsfiddle.net/5mek5ffd/27/
HTML
<video id="video1" src="http://techslides.com/demos/sample-videos/small.mp4" width="320" height="240" controls>
</video>
<video id="video2" class="hidden" src="https://static.videezy.com/system/resources/previews/000/004/147/original/jelly-fish.mp4" width="320" height="240" controls="">
</video>
CSS
.hidden{ display:none }
JS
function changeVideo(video1, video2){
try {
// pause the video
jQuery(video1)[0].pause();
// set the seconds to 0
jQuery(video1)[0].currentTime = 0;
// add the hidden class to the video1
jQuery(video1).addClass("hidden");
// remove the hidden class to the video2
jQuery(video2).removeClass("hidden");
// pause the video2 - it's necessary cause the video was ended
jQuery(video2)[0].pause();
// set the seconds to 0 to the video 2
jQuery(video2)[0].currentTime = 0;
} catch(e){
// if something goes wrong put the message on console
//prevent the script stop the other scripts too
console.log(e.message);
return false;
}
}
jQuery(document).ready(function($){
try {
// if exists the video1 put it on video1 variable
// if exists the video2 put it on video2 variable
var $video1 = $('#video1').length > 0 ? jQuery('#video1') : false,
$video2 = $('#video2').length > 0 ? jQuery('#video2') : false;
// if exists the video1 and video 2
if($video1 && $video2){
// if the #video1 is starting to play
$video1.on("play", function() {
console.log($video2[0].duration);
// call change video function
changeVideo("#video1","#video2");
// the [0] represents the javascript dom object
// if the seconds is 0 in my video 2 then play it
if($video2[0].currentTime == 0 )
$video2[0].play();
});
// start the video1 if the page is ready added 1 sec for delay,
// to not cause the impress wrong of the video
setTimeout(function() {
if($video2[0].currentTime == 0)
$video1[0].play();
},1000);
// if the video was ended return to the first video
$video2.on("ended", function(){
changeVideo("#video2","#video1");
});
}
} catch(e){
// if something goes wrong put the message on console
//prevent the script stop the other scripts too
console.log(e.message);
}});