在模态循环上停止 vimeo 视频答案

【问题标题】：stop vimeo video on loop of modals在模态循环上停止 vimeo 视频
【发布时间】：2017-12-22 12:05:10
【问题描述】：

我正在开发投资组合网站，我想在模式关闭时停止 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 脚本，但也没有用。：/
谢谢大家

【问题讨论】：

最好只有一个模态并动态更改src
肯定会更好，但我的朋友希望每个项目都有一个模态：/
可以使用ajax调用加载项目详情
不可能这样吗？这是个好建议！这应该是一个很好的挑战；）
为什么不可能会很容易，您将获得 id 从中您可以获取项目详细信息然后只需调用 api 将数据加载到设置的模态中...

标签： jquery laravel iframe bootstrap-modal vimeo

【解决方案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);

【讨论】：