Question

我有一个对象，当你点击图像see fiddle时，通过twitter bootstrap的模态将视频加载到DOM中。该视频在除Firefox之外的所有浏览器中均可正常运行。经过一些研究，我能够在Firefox中播放视频，请参阅fiddle。现在唯一的事情是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);
}

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

Answer 1

这个解决方案似乎有效。

在加载上述脚本（就在关闭正文标记之前）

之后添加此JS

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

Answer 2

您可以使用javascript停止视频：

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

并在模态关闭事件

上调用 stopVideo 函数

在模态关闭Firefox后视频继续播放

2 个答案: