HTM5 Video on bootstrap模态播放暂停恢复

Question

我有一种奇怪的行为而无法找到解决方案 我有一个播放模式并自动播放视频的播放按钮，模态关闭视频暂停，当用户再次点击播放按钮时，模式再次打开并恢复视频。

它在桌面上工作正常但在iOS上，当你重新打开模式时视频恢复但是没有视频，只是音频工作。

var mainVideo = $('#main-video');
//Detecting device width and loading proper video
if ($(window).width() < 769) {
    mainVideo.append("<source type='video/mp4' src='video-small.mp4' />");
} else {
    mainVideo.append("<source type='video/mp4' src='video.mp4' />");
}
mainVideo.append("<source type='video/webm' src='video-small.webm' />");

//Open modal and autoplay 
$('.btn-play').on('click', function () {
    $("#videoPlayer").modal('show');
    $("#videoPlayer video").trigger('play');
});

//On modal close pause video
$('#videoPlayer').on('hidden.bs.modal', function () {
    $("#videoPlayer video").trigger('pause');
});