如何使用Javascript动态更改html5视频
How to change html5 video dynamically using Javascript?
我的代码有问题。在我的页面中,我有一个主视频,该视频将在页面加载时自动播放,并且在主视频旁边我有一系列视频链接。我想要的是,当您单击主视频旁边的视频时,它将替换并播放主视频。
我的问题是当我单击视频时,它不会替换主视频,但它在不替换主视频的情况下播放。这意味着主视频和侧面视频都在播放。侧面视频仅播放声音。
这是我的代码:
主视频
<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 } ?>
}
$('#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);
相关文章:
- 如何检查用户在html5视频播放器中观看了完整的视频
- html5视频中的Youtube类型注释
- 强制浏览器更新缓存的HTML5视频对象
- 可以使用带有json回调的html5视频标签
- html5视频播放器和视频js之间的关系
- 隐藏HTML5视频控件
- 用链接替换嵌入的HTML5视频
- HTML5视频链接在Chrome中不起作用
- 用angular js在屏幕上点击播放和暂停html5视频
- 使用Javascript播放HTML5视频
- 自定义HTML5视频控件-退出按钮不会启动全屏切换功能
- ReactJS:如何使用react正确播放带有onClick事件的html5视频
- html5视频将黑框(空)绘制到画布上
- 资源管理器9上的html5视频缓存
- 如何检查html5视频是否有足够的缓冲,以便在不停止缓冲的情况下播放
- html5视频交互式视频播放器
- HTML5视频无法在chrome上工作,在服务器上托管后的IE,mov文件中的视频(quicktime格式)
- 如何从某个时间开始预加载HTML5视频
- 寻找HTML5视频是否需要加载整个文件
- 如何在HTML5视频中获得寻找事件的起点