我有一个小脚本,可以在模式关闭后停止 YouTube 视频的播放。问题是如果 HTML 是通过 AJAX 加载的,它就不起作用。
脚本:
$('#panelModal-1').on('hidden.bs.modal', function () {
callPlayer('yt-player-1', 'stopVideo');
});
$('#panelModal-2').on('hidden.bs.modal', function () {
callPlayer('yt-player-2', 'stopVideo');
});
HTML(大括号表示从 CMS 提取的数据):
<li>
<a href="#" title="Watch Video" data-toggle="modal" data-target="#panelModal-{count}">
<div class="video-background" style="background-image:url(http://img.youtube.com/vi/{video_youtube_id}/hqdefault.jpg)"></div>
<div class="video-details">
<h4>{title}</h4>
<p>{video_subtitle}</p>
</div>
</a>
<!-- Modal -->
<div class="modal fade" id="panelModal-{count}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-{count}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel-{count}">{title}</h4>
</div>
<div class="modal-body">
<div id="yt-player-{count}" class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{video_youtube_id}?enablejsapi=1"></iframe>
</div>
</div>
</div>
</div>
</div>
</li>
AJAX部分是这样的:
$(document).ready(function()
{
$('.sub-nav').delegate('.load-case-studies', 'click', function(e)
{
// Don't follow the link
e.preventDefault();
$('.sub-nav a').removeClass('active');
$(this).addClass('active');
// Fetch the next page
$.get($(this).attr('href'), function(data)
{
// Only grab the part of the page we want
content = $(data).find('.ajax-wrapper').hide();
// Add it to the DOM
$(content).replaceAll('#entry-container');
// Fade-in our new content
$(content).fadeIn('fast');
});
});
});
如果数据已通过 AJAX 加载,如何让视频在模式关闭后停止播放?
您可以使用以下 jQuery 命令。
$('#playerID').get(0).stopVideo();
如果您使用Player API:
var player = new YT.Player('player');
player.stopVideo();
使用全局事件处理程序 .ajaxComplete、.ajaxSuccess
$(document).ajaxComplete(function() {
$('#videoModal').on('hide.bs.modal', function(e) {
this.querySelector('video').pause();
});
});