时间戳

首页 > 解决方案 > 模态关闭后如何暂停嵌入的 Google Drive 视频

video - 模态关闭后如何暂停嵌入的 Google Drive 视频

问题描述

我正在使用 Ella 主题在 Shopify 网站上工作。我已成功将产品视频嵌入到主题代码中，因此可以在弹出的模式窗口中播放。一切都很好，除了一个问题 - 当模式关闭时，视频继续在后台播放。

这是我在 product.liquid 文件中使用的模式：

<div class="modal fade halo_modal-custom" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <a data-dismiss="modal" class="close close-modal" title="{{ 'cart.ajax_cart.close' | t }}" href="javascript:void(0)">
                    {% include 'icon-close' %}
                </a>
            </div>

            <div class="modal-body">
                <div class="videoWrapper" id="my-player">
                    {%  if product.description contains '/video' %}
                    {% assign src = product.description | split:'<video' | last | split:'</video>' | first %}
                    <video id="my_video_player" {{src}}> </video>
                    {%  elsif product.description contains 'iframe' %}
                    {% assign src = product.description | split:'<iframe' | last | split:'</iframe>' | first %}
                    <iframe id="my_video_player" {{src}}> </iframe>
                    {% endif %} 
                </div>
            </div>
        </div>
    </div>
</div>

我没有编程经验。谁能帮我解决问题？

标签： videogoogle-drive-apishopifyembedded-video

解决方案

请添加此脚本

 <script>
   function closeModal() {
     $('.halo_modal-custom').hide();
     $("#my-player iframe").attr("src", $("#my-player iframe").attr("src"));
  }

  $('.close').on('click',function(){
    closeModal();
  }};
 </script>

推荐阅读