模块关闭（ACF）后如何停止播放视频？答案

【问题标题】：How to stop the video from playing after modul is closed (ACF)?模块关闭（ACF）后如何停止播放视频？
【发布时间】：2020-10-17 02:07:18
【问题描述】：

我有一个问题，我不知道如何解决它。我有一个 acf 中继器，上面有一个来自 youtube 的视频中继器，当我单击按钮打开视频时，视频作为模态打开，但是当我关闭模态时，视频仍在后台播放模态关闭后如何停止播放视频？谢谢

<?php if( have_rows('video_youtube1') ):
$i = 1; // Set the increment variable
// loop through the rows of data
while ( have_rows('video_youtube1') ) : the_row();
    $modal_video = get_sub_field('video');
    $modal_header = get_sub_field('titulli_video');
    $modal_body = get_sub_field('paragrafi_video');
    $modal_footer = get_sub_field('butoni_video');
?>
    <?php if (get_sub_field('position') == 'left_video') { ?>
        <div class="donationVideoFeature">
            <div class="video-container">
            <div class="playDiv">
                    <i class="fa fa-play" data-toggle="modal" data-target="#myModal-<?php echo $i;?>"></i>
            </div>
                <div class="modal" id="myModal-<?php echo $i;?>">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">×</button>
                            </div>
                            <div class="modal-body">
                                <?php echo $modal_video; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="donationVideoText p-5 ">
                <h3 class="donation-title"><?php the_sub_field('titulli_video');?></h3>
                <p class="donation-paragraph"><?php the_sub_field('paragrafi_video');?></p>
                <button class="btn btn-lg donateBTN"><?php the_sub_field('butoni_video');?></button>
            </div>
        </div>

    <?php } else { ?>

        <div class="donationVideoFeature">
            <div class="donationVideoText p-5 ">
                <h3 class="donation-title"><?php the_sub_field('titulli_video');?></h3>
                <p class="donation-paragraph"><?php the_sub_field('paragrafi_video');?></p>
                <button class="btn btn-lg donateBTN"><?php the_sub_field('butoni_video');?></button>
            </div>
            <div class="video-container">
            <div class="playDiv">
                    <i class="fa fa-play" data-toggle="modal" data-target="#myModal-<?php echo $i;?>"></i>
            </div>
                <div class="modal" id="myModal-<?php echo $i;?>">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">×</button>
                            </div>
                            <div class="modal-body">
                                <?php echo $modal_video; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <?php   }$i++; // Increment the increment variable

endwhile; 
//End the loop 
else : 
endif; 
?>

【问题讨论】：

标签： javascript php advanced-custom-fields acfpro

【解决方案1】：

看起来您使用的是引导模式。当模式关闭时，Bootstrap 有一个事件监听器 https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

大多数时候，当我使用嵌入视频时，我会将 src 放在数据属性中。当我打开模式时，我将 data-src 放在 iframe 的 src 中。当我关闭它时，我会删除 src 值以停止视频

【讨论】：

【解决方案2】：

通过清空视频的属性来源，从个人角度来看，显然是最好的方法之一。

您需要做的是在退出模式时清空 iframe 的源代码。

当您进入视频模式时，您可以重新加载您的 iframe。

var video_modal = $("#myModal");
 video_modal.on("shown.bs.modal", function(){
   $("#video").attr('src', "https://www.youtube.com/your-code-here"); /*therefore this must be the id of your iframe  */   
    
 $("body").click(function(){
    $("#video").attr("src", ""); // must be your iframe id also here
    video_modal.modal("hide"); // this is your modal id while you hide it
    $(".modal-backdrop").remove();
 });
});

我已经使用了这段代码，它已经在我正在开发的页面上运行，所以我希望它可以帮助你。干杯

【讨论】：