How to change html5 video dynamically using Javascript?

Question

I have a problem in my code. In my page I have a main video that will automatically play when the page is loaded and beside the main video I have a series of video link. What I want is when you click the video beside the main video it will replace and play the main video.

My problem is when I click the video it doesnt replace the main video but it plays without replacing the main video. Meaning the main video and the side video are both playing. The side video plays only the sound.

Here's my code:

Main Video

<div class="left red_border">
        <div id="blacky" ></div>
        <video id="video_main" width="600" height="420" controls="controls" autoplay="autoplay" poster="<?php echo newest_video_clip('poster'); ?>">
            <source src="<?php echo newest_video_clip('mp4'); ?>" type="video/mp4">
            <source src="<?php echo newest_video_clip('ogv'); ?>" type="video/ogg">
            <source src="<?php echo newest_video_clip('webm'); ?>" type="video/webm">
            Your browser does not support HTML5 video.
        </video>
    </div>

...

Side Videos

<div class="left video_list_holder" style="width: 270px;  margin-left: 0px;"><!-- class="left video_list_holder" -->
            <?php

            $limit= count(newest_video_ID5());

            if($limit>0){
                foreach(newest_video_ID5() AS $newest5ID =>$value){ ?>
                    <div id="playlist-holder<?php echo $newest5ID; ?>" class="video_list <?php echo ($newest5ID==0)? 'active-red': ''; ?>" style="max-height: 84px;">
                        <div class="left newest5_icon">
                            <img alt="video" src="<?php echo $img_path_avjunky; ?>/play_icon.png" id="vid-playlist<?php echo $newest5ID; ?>"  data-urlpath="<?php echo video_clip_mp4($value); ?>" data-imgpath="<?php echo $site_url.newest_video_banner5($value); ?>" data-key="<?php echo $newest5ID; ?>" data-id="<?php echo $value; ?>" class="play_icon1" onclick="change_movieClip('<?php echo $newest5ID; ?>')"  />
                            <img src="<?php echo newest_video_banner5($value); ?>" width="79" height="79" alt="Play" class="play_<?php echo $newest5ID; ?>" />
                            <?php //echo $newest5ID; ?>
                        </div>
                        <div class="left">
                            <div>
                                <div class="left vidList_title"><?php echo video_category($value); ?></div>
                                <div class="right vidList_date"><?php echo video_dateUploaded($value); ?></div>
                                <div class="clear"></div>
                            </div>
                            <div class="vidList_title"><?php echo video_title($value); ?></div>
                            <div>
                                <div class="left vidList_title"><?php echo video_actress($value); ?></div>
                                <div class="right"><a href="?page=details&movie=<?php echo $value; ?>"><?php echo ($_SESSION['language']=='en')? 'View Details':'作品ページ'; ?></a></div>
                                <div class="clear"></div>
                            </div>
                        </div>
                        <div class="clear"></div>  
                    </div>
                <?php }} ?>
        </div> <!-- end "left video_list_holder" -->

...

JS File

var x = 0;
                $count = <?php echo $limit-1; ?>;
                var $nextVideo = 1;

                document.getElementById('video_main').addEventListener('ended', function(e) {

                        change_movieClip($nextVideo);

                        document.getElementById('video_main').load();
                        document.getElementById('video_main').play();

                });

                function change_movieClip(x){

                    $('.video_list_holder div').removeClass('active-red');
                    $('#playlist-holder'+x).addClass('active-red');

                    var vid_url =   $('#vid-playlist'+x).attr('data-urlpath');
                    var $p  =   $('#vid-playlist' + x).attr('data-imgpath');
                    var $vidkey= $('#vid-playlist' + x).attr('data-key');

                    $nextVideo = (parseInt($vidkey) >= $count)? 0 :parseInt($vidkey)+1;

                    console.log(vid_url);

                    document.getElementById('video_main').src = vid_url; // IT DOESNT REPLACE THE MAIN VIDEO
                    document.getElementById('video_main').poster = $p;
                    //alert(vid_url);
                    //alert($vidkey);

                    <?php if($_SERVER['REMOTE_ADDR']=='122.2.55.11'){ ?> 
                    //  alert($nextVideo);
                    <?php } ?>

                }

Answer 1

$('#video_main > source').attr('src', vid_url);

Will not work, because you have 3 source elements with different formats. Try:

$('#video_main > source[type="video/mp4"]').attr('src', vid_url_mp4);
$('#video_main > source[type="video/ogg"]').attr('src', vid_url_ogg);
$('#video_main > source[type="video/webm"]').attr('src', vid_url_webm);