模式關閉後視頻仍在播放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功能模式關閉事件