我的Bootstrap轮播中有一些嵌入式YouTube视频.默认情况下,轮播会自动前进,但我想在播放视频时暂停.
是否有检测视频播放时间的技巧?我想在不使用YouTube API的情况下这样做(每个轮播都有任意数量的视频,我不想创建每个视频的实例).
编辑:最终设计
我在视频上创建了重叠:
.video_mask{ position:absolute; top:0; left:0; width:100%; height:275px; z-index:25; opacity:0; }
当我点击蒙版时,我将相应的iframe设置为自动播放,隐藏蒙版,并暂停轮播:
$('.video_mask').click(function(){ iframe = $(this).closest('.item').find('iframe'); iframe_source = iframe.attr('src'); iframe_source = iframe_source + "?autoplay=1" iframe.attr('src',iframe_source); // hide the mask $(this).toggle(); // stop the slideshow $('.projectOverviewCarousel').carousel('pause'); });
$('.projectOverviewCarousel').on('slide',function(){ var iframeID = getID($(this).find('iframe').attr("id")); // stop iframe from playing if(iframeID != undefined){ callPlayer(iframeID,'stopVideo'); } // turn on all masks $('.video_mask').show(); // reset src of all videos $('.projectOverviewCarousel').find('iframe').each(function(key,value){ url = $(this).attr('src'); if(url.indexOf("autoplay")>0){ new_url = url.substring(0,url.indexOf("?")); $(this).attr('src',new_url); } });
要检查的一些事项:确保引导程序轮播的控件的z-index大于掩码(因此该人仍然可以手动进行幻灯片演示).
希望这对其他人有用!