模式关闭Firefox后，视频继续播放 [英] Video keeps playing after modal is closed Firefox

问题描述

当您点击图片时，我有一个通过twitter bootstrap的模式将视频加载到DOM的对象，看小提琴。该视频在除Firefox以外的所有浏览器都能正常工作。所以经过一番调查后，我可以看到视频在Firefox中播放，请参阅小提琴。现在唯一的事情是，在第一次迭代之后，循环的停止，并且在关闭模态之后我无法停止播放视频。我到处寻找解决方案来停止播放视频，并且无法弄清楚为什么 for 循环在第一次迭代后停止。我正在学习，所以任何帮助/见解将不胜感激！
$ b JavaScript



  var dataCollection = {
'videoData'：[
 {
'id'：0，
'title'：'羽毛球'，
'公司'：'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 =modaldata-target =＃myModal/>< / div>'）; 
 
 var videoPlayer = $（'< video preload =autocontrols>< 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）; 
} 
  

HTML $ b

 < div class =container row> 
< div id =video>< / div> 
< / div> 
 
< div id =myModalclass =modal faderole =dialog> 
< div class =modal-dialog> 
< div class =modal-content> 
< button type =buttonclass =closedata-dismiss =modal>& times;< / button> 
< div class =modal-bodyid =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 =modaldata-target =＃myModal/>< / div>'）; 
 
 var videoPlayer = $（'< video preload =nonecontrols poster ='+ poster +'>< source src ='+ srcMp4 +'type =video / mp4;>< source src ='+ srcWebm +'type =video / webm;>< source src ='+ srcOgv +'type =video / ogg;> < /视频>'）; 
 
 videos.append（video）; 
 video.find（'img'）。click（function（e）{
 modalContent.append（videoPlayer）; 
 // debug 
 // alert（videoObj.srcMp4） ; 
 // console.log（videoObj.srcMp4）; 
}）; 
 $ b 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）; 
 
  




解决方案

。

在加载上面的脚本之后添加这个JS（就在关闭body标签之前）

 < script type =text / javascript> $（'＃myModal'）。on（'hidden.bs.modal'，function（）{
 var videos = $（'＃video'）; 
 video.pause（） 
}）; 
< / script> 
  

I have an object that loads videos into the DOM via twitter bootstrap's modal when you click on an image, see fiddle. The video works fine in all browsers except in Firefox. So after some research, I was able to get the video to play in Firefox, see fiddle. The only thing now is that the for loop stops after the first iteration and I can't get the video to stop playing after you close the modal. I've searched everywhere for a solution to the stop the video from playing and can't figure out why the for loop stops after the first iteration. I'm learning so any help/insight would be highly appreciated!

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);
}

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>

EDIT Updated working code, works on Firefox, Chrome and 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);
}

解决方案

This solution seems to be working.

Add this JS after you have loaded the above script (just before the closing body tag)

<script type="text/javascript">
    $('#myModal').on('hidden.bs.modal', function () {
        var videos = $('#video');
        video.pause()
    });
</script>

这篇关于模式关闭Firefox后，视频继续播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！