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

                }

You need to change the child source element's srcs of the video tag. — Dan D.
– Dan D., Commented Jan 26, 2016 at 5:33
I tried this but still same effect $('#video_main > source').attr('src', vid_url); — Jerielle
– Jerielle, Commented Jan 26, 2016 at 5:42
Any errors in the console? Also, could you add the generated HTML instead of the PHP source? It'd make it easier to see the code — Alvaro Montoro
– Alvaro Montoro, Commented Jan 26, 2016 at 6:27

Gavriel · Accepted Answer · 2016-01-26 06:43:40Z

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

answered Jan 26, 2016 at 6:43

Gavriel

19.3k13 gold badges73 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jerielle Over a year ago

I already tried but still same effect. It doesnt load the selected video in the main video.

Collectives™ on Stack Overflow

How to change html5 video dynamically using Javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related