Javascript modal关闭后，视频继续播放

我有一个对象，当你点击一个图像时，它通过twitter引导的模式将视频加载到DOM中。该视频在除Firefox之外的所有浏览器中都能正常工作。因此，经过一些研究，我能够在Firefox中播放视频，请参阅。现在唯一的一件事是，

for

循环在第一次迭代后停止，我无法让视频在关闭模式后停止播放。我到处都在寻找阻止视频播放的解决方案，但我不明白为什么

for

循环在第一次迭代后停止。我正在学习，因此非常感谢任何帮助/见解

JavaScript

var dataCollection = {
  'videoData': [
    {
      'id'      : 0,
      'title'   : 'Badminton',
      'company' : 'Pepto Bismol',
      'gifLink' : '...',
      'srcMp4'  : '...',
      'srcWebm' : '...',
      'srcOgv'  : '...',
      'poster'  : '...'
      },
      { ...
     ]
    };

var videos = $('#video');
var modalContent = $('#video-modal');

var appendVideo = function(videoObj) {
  var poster = videoObj.poster;
  var srcMp4 = videoObj.srcMp4;
  var srcWebm = videoObj.srcWebm;
  var srcOgv = videoObj.srcOgv;
  var playpause = document.querySelector('video');
  var stop = document.querySelector('#myModal,.close');
  var video = $('<div class="video col-sm-12 col-md-3"><img src="' + poster + '" data-title="' + videoObj.title + '" data-toggle="modal" data-target="#myModal"/></div>');

  var videoPlayer = $('<video preload="auto" controls><source src="' + srcMp4 + '" type="video/mp4;"><source src="' + srcWebm + '" type="video/webm;"><source src="' + srcOgv + '" type="video/ogv;"></video>');
  videos.append(video);

video.find('img').click(function(e) {
  modalContent.append(videoPlayer);
  // debug
  // alert(videoObj.srcMp4);
  // console.log(videoObj.srcMp4);
});

 playpause.addEventListener('click', function(e) {
    if (video.paused || video.ended) video.play();
    else video.pause();
 });

$('#myModal, .close').on('click', function(){
  video.pause();
  video.currentTime = 0;
  progress.value = 0;
  modalContent.find('video').remove();
});

for (var i = 0; i < dataCollection.videoData.length; i++) {
  var obj = dataCollection.videoData[i];
    appendVideo(obj);
}

var数据收集={
“视频数据”：[
{
“id”：0，
‘头衔’：‘羽毛球’，
“公司”：“Pepto Bismol”，
“gifLink”：“…”，
“srcMp4”：“…”，
“srcWebm”：“…”，
'srcOgv'：'…'，
‘海报’：‘……’
},
{ ...
]
};
var videos=$（“#videos”）；
var modalContent=$（“#视频模式”）；
var appendVideo=功能（VIDEOBJ）{
var海报=视频对象海报；
var srcMp4=videoObj.srcMp4；
var srcWebm=videoObj.srcWebm；
var srcOgv=videoObj.srcOgv；
var playpause=document.querySelector（'video'）；
var stop=document.querySelector（'#myModal.close'）；
var视频=$（''）；
var videoPlayer=$（''）；
视频。附加（视频）；
视频。查找（'img'）。单击（函数（e）{
modalContent.append（视频播放器）；
//调试
//警报（videoObj.srcMp4）；
//console.log（videoObj.srcMp4）；
});
playpause.addEventListener（'click'，函数（e）{
如果（video.paused | | video.end）video.play（）；
else video.pause（）；
});
$（'#myModal，.close'）。在（'click'，function（）上{
video.pause（）；
video.currentTime=0；
progress.value=0；
modalContent.find（'video'）.remove（）；
});
对于（var i=0；i

HTML

<div class="container row">
  <div id="video"></div>
</div>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <div class="modal-body" id="video-modal"></div>
    </div>
  </div>
</div>

&时代；

编辑 更新工作代码，适用于Firefox、Chrome和Safari：

var videos = $('#video');
var modalContent = $('#video-modal');
var bye = $('#myModal, .close');

var appendVideo = function(videoObj) {
  var poster = videoObj.poster;
  var srcMp4 = videoObj.srcMp4;
  var srcWebm = videoObj.srcWebm;
  var srcOgv = videoObj.srcOgv;
  var video = $('<div class="video col-sm-12 col-md-3"><img src="' + poster + '" data-title="' + videoObj.title + '" data-toggle="modal" data-target="#myModal"/></div>');

  var videoPlayer = $('<video preload="none" controls poster="' + poster + '"><source src="' + srcMp4 + '" type="video/mp4;"><source src="' + srcWebm + '" type="video/webm;"><source src="' + srcOgv + '" type="video/ogg;"></video>');

videos.append(video);
  video.find('img').click(function(e) {
  modalContent.append(videoPlayer);
  // debug
  // alert(videoObj.srcMp4);
  // console.log(videoObj.srcMp4);
});

bye.on('hidden.bs.modal', function () {
  var currentVideo = $('video');
  currentVideo.remove();
});

};

for (var i = 0; i < dataCollection.videoData.length; i++) {
  var obj = dataCollection.videoData[i];
  appendVideo(obj);
}

var videos=$（'#video'）；
var modalContent=$（“#视频模式”）；
var bye=$（“#myModal，.close”）；
var appendVideo=功能（VIDEOBJ）{
var海报=视频对象海报；
var srcMp4=videoObj.srcMp4；
var srcWebm=videoObj.srcWebm；
var srcOgv=videoObj.srcOgv；
var视频=$（''）；
var videoPlayer=$（''）；
视频。附加（视频）；
视频。查找（'img'）。单击（函数（e）{
modalContent.append（视频播放器）；
//调试
//警报（videoObj.srcMp4）；
//console.log（videoObj.srcMp4）；
});
bye.on（'hidden.bs.modal'，function（）{
var currentVideo=$（'video'）；
currentVideo.remove（）；
});
};
对于（var i=0；i

此解决方案似乎有效

加载上述脚本后添加此JS（就在结束正文标记之前）

$（'#myModal'）.on（'hidden.bs.modal'，function（）{
var videos=$（“#videos”）；
视频暂停（）
});

您可以使用javascript停止视频：

 var video = document.getElementById("video");
 function stopVideo() {
     video.pause();
     video.currentTime = 0;
 }

---

并在模式关闭事件上调用停止视频功能

您需要连接到关闭模式事件，并以这种方式停止视频，这是一个相当常见的问题（也是一个难题）！此处接受答案中的一些建议：OP未使用youtube…如果Ramesi尝试更新，但无法使其工作…我检查视频已暂停，因此关闭后是否要重置该视频我希望视频停止播放…但在我的小提琴上，它仍在播放（在firefox中）

 var video = document.getElementById("video");
 function stopVideo() {
     video.pause();
     video.currentTime = 0;
 }