Как изменить html5 видео динамически с помощью Javascript?

Question

У меня проблема в моем коде. На моей странице у меня есть основное видео, которое будет автоматически воспроизводиться при загрузке страницы, а рядом с основным видео у меня есть сериал видеосвязи. Я хочу, когда вы нажимаете видео рядом с основным видео, которое оно заменит и воспроизведет основное видео.

Моя проблема в том, что когда я нажимаю видео, оно не заменяет основное видео, но воспроизводится без замены основного видео. Значит, основное видео и боковое видео одновременно воспроизводятся. Боковое видео воспроизводит только звук.

Вот мой код:

Главная Видео

<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 Видео

<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 Файл

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

не будет работать, потому что у вас есть 3 источника элементов с различными форматами. Попробуйте:

$('#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);