模式关闭后视频仍在播放Firefox

Question

我有一个对象，当您点击图像see fiddle时，通过twitter引导模式将视频加载到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> 

编辑 更新工作代码，适用于火狐，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功能模式关闭事件