Question

我在点击按钮时使用Reveal from Zurb Foundation来显示模态框。当模式弹出时，它使用Wordpress的原生视频播放器在其中有一个视频。如果按下关闭按钮，模态将消失但视频继续播放

这就是我使用Wordpress's native video player嵌入视频的方式：

<?php $video = get_sub_field('video_link');
echo do_shortcode("[video src='$video']"); ?>

关闭模式后如何停止视频？

这是我的上下文代码：

<div class="reveal large" id="video-modal-<?php echo $counter; ?>" data-reveal>
    <?php $video = get_sub_field('video_link');
    echo do_shortcode("[video src='$video']"); ?>
    <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
    </button>
</div>

<a class="button small-clear-button button-<?php echo the_sub_field('colour'); ?>" href="<?php if(get_sub_field('link') != "") { echo the_sub_field('link'); } else { echo "#"; } ?>" <?php if(get_sub_field('video_link') != "") { ?>data-open="video-modal-<?php echo $counter; ?>"<?php } ?>><?php echo the_sub_field('link_text'); ?></a>

Answer 1

您可以使用Reveal JS Events，特别是closed.zf.reveal：

closed.zf.reveal模式完成时触发

由于WordPress视频短码呈现HTML5 Video，您可以像这样运行pause()函数：

jQuery(document).on('closed.zf.reveal', '#video-reveal-%', function(event) { // The % is what your PHP prints
    jQuery(this).find('video')[0].pause(): // Looks for a video tag within $this modal
});

当Zurb Foundation Reveal关闭时停止视频（原生Wordpress播放器）

1 个答案: