如何使用Javascript动态更改html5视频?
我的代码有问题。在我的页面中,我有一个主视频,当页面加载时会自动播放,在主视频旁边,我有一系列视频链接。我想要的是,当你点击主视频旁边的视频时,它将替换并播放主视频 我的问题是,当我点击视频时,它不会替换主视频,但它播放时不会替换主视频。这意味着主视频和副视频都在播放。侧面视频仅播放声音 这是我的密码: 主视频如何使用Javascript动态更改html5视频?,javascript,Javascript,我的代码有问题。在我的页面中,我有一个主视频,当页面加载时会自动播放,在主视频旁边,我有一系列视频链接。我想要的是,当你点击主视频旁边的视频时,它将替换并播放主视频 我的问题是,当我点击视频时,它不会替换主视频,但它播放时不会替换主视频。这意味着主视频和副视频都在播放。侧面视频仅播放声音 这是我的密码: 主视频 <div class="left red_border"> <div id="blacky" ></div> <
<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>
将不起作用,因为您有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);
您需要更改video
标记的子source
元素的src
s。我尝试了这个方法,但仍然有相同的效果$(“#video_main>source”).attr('src',vid_url)代码>控制台中有错误吗?另外,您是否可以添加生成的HTML而不是PHP源代码?我在控制台中没有任何错误。我已经试过了,但仍然有相同的效果。它不会在主视频中加载所选视频。
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 } ?>
}
$('#video_main > source').attr('src', vid_url);
$('#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);