javascript - 如何使用Javascript动态更改html5视频？

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>

...

辅助视频

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