在模态循环上停止vimeo视频

Question

我正在投资组合网站上工作，我想在模态关闭时停止vimeo或youtube视频，我可以这样做。问题出在下一个项目模态中，所有模态的每个iframe都具有相同的SRC。同一个视频

这是我的代码

@foreach ($rs as $r)
<div class="col-md-6 portfolio-item">
       <div class="portfolio">
           <a class="portfolio-link" href="#{{$r->id}}" data-toggle="modal">
             <img class="img-responsive" src="/img/vimeo_thumbnails/{{$r->thumbnail}}" alt="" width="1280" height="720">
           </a>
             <a class="portfolio-link" href="#{{$r->id}}" data-toggle="modal">
               <div class="portfolio-head">
                 <h3 class="portfolio-text">{{$r->title}} ({{$r->year}})</h3>
                 <h4>{{$r->author}}</h4>
              </div>
             </a>
           </div>
     </div>
<!-- modal -->

     <div class="portfolio-modal modal fade" id="{{$r->id}}" role="dialog" tabindex="-1" aria-hidden="true">
         <div class="modal-content" id="modal-content">
           <div class="close-modal" data-dismiss="modal" data-remodal-action="close" onclick="stopVideo()">
               <div class="lr">
                   <div class="rl">
                   </div>
               </div>
           </div>
               <div class="row">
                 <div class="col-lg-12">
                   <div class="modal-body">
                   <h3 class="text-center"><strong>{{$r->title}}</strong></h3>
                   <h4 class="text-center">({{$r->year}})</h4>
                 </br>
                   <center>
                     <div class="col-lg-8 col-lg-offset-2">

                         <div class='embed-container'>
                         <iframe class="iframe" src="https://player.vimeo.com/video/{{$r->link}}?api=1?color=ffffff&title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                         </div>

                     </div>
                   </center>
                  </br>
                     <div class="col-lg-8 col-lg-offset-2">
                     </br>
                     </br>
                       {!! $r->description !!}
                     </br>
                     </br>
                     </br>
                     <center>
                     <button class="top" id="top"><span class="glyphicon glyphicon-chevron-up"></span></button>
                     </center>
                     </div>
                   </div>
                 </div>
              </div>
           </div>
       </div>
   @endforeach

现在这是我的jquery尝试

var vidUrl = $("iframe#vimeo").attr('src');


  //Basically stops and starts the video on modal open/close
  $('.portfolio-modal').on('hidden.bs.modal', function (e) {
      $("iframe#vimeo").attr('src','');
  });

  $('.portfolio-modal').on('show.bs.modal', function (e) {
    $("iframe#vimeo").attr('src', vidUrl);
  });

这是有效的，但iframe SRC对于所有模态都保持不变

现在使用vimeo API

   var iframe = document.querySelector('iframe');
   var player = new Vimeo.Player(iframe);

   $('.portfolio-modal').on('hidden.bs.modal', function () {
    player.pause();
  });

   $('.portfolio-modal').on('shown.bs.modal', function () {
    player.play();
  });

（我在我的主刀片上包含了player.js文件）由于某些原因它也没有工作，我在我的控制台上有这个错误“topVideo没有在HTMLDivElement.onclick上定义”。

无法找到这个问题的解决方案，任何人都可以帮助我吗？我甚至尝试使用fragoloop脚本并且也不起作用。 ：/ 谢谢你们

Answer 1

我正在做类似的事情。我无法让最后一个视频停止触发结束事件监听器，但您的问题的答案是向模态添加事件监听器。看看这支笔：https://codepen.io/mginter/pen/VNVryR?editors=1111

// Open/Close overlay
function toggleOverlay(state) { overlay.classList.toggle('video-on'); }
function closeOverlay(e) {
  overlay.classList.toggle('video-on');
  newPlayer.pause().then(function() {newPlayer.unload();}).catch(function(error) { 
  console.log(error); });
}
overlay.addEventListener('click', closeOverlay, false);