手风琴选项卡更改暂停视频

Posted

技术标签:

【中文标题】手风琴选项卡更改暂停视频【英文标题】:Pause Video on Accordion Tab Change 【发布时间】:2019-10-29 11:39:18 【问题描述】:

我正在寻找一种在更改手风琴视图(超小型浏览器)上的选项卡时可以在更改选项卡时暂停视频的方法。

当前我有选项卡更改后的选项卡视图功能。这是一个 sn-p 代码,请参阅full code 的小提琴

<div class="tab-pane" id="video">
<div class="panel panel-default">
    <div class="panel-heading">
        <a data-toggle="collapse" data-parent=".tab-pane" href="#collapseFour">
            <h4 class="panel-title">
                Videos <i class="fa fa-chevron-right pull-right"></i>
            </h4>
        </a>
    </div>
    <div id="collapseFour" class="panel-collapse collapse">
        <div class="panel-body">
            <div style="position: relative; display: block; max-width: 100%;">
                <div style="padding-top: 56.25%;"><iframe style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" src="//players.brightcove.net/618591172001/default_default/index.html?videoId=5845023855001"></iframe></div>
            </div>
        </div>
    </div>
</div>

【问题讨论】:

【参考方案1】:
(function($) 
$(document).on('click', '.fusion-tabs', function () 
    $("iframe").each(function()  
      var src= $(this).attr('src');
      $(this).attr('src',src);  
    );
); )( jQuery );

将此代码放在 WordPress 设置中的正文标记之后。

【讨论】:

以上是关于手风琴选项卡更改暂停视频的主要内容,如果未能解决你的问题,请参考以下文章

响应选项卡是一个jQuery插件,提供响应选项卡功能。当它到达CSS断点时,选项卡会转换为手风琴。您可以使用此插件作为在桌面、平板电脑和手机上优雅显示选项卡的解决方案。

课堂笔记 layout 布局手风琴accordion选项卡tabs

在手风琴中折叠动态添加的选项卡

如何一次打开所有 Bootstrap 手风琴标签

根据选中的单选按钮展开和折叠手风琴

来自WP Plugin Advanced Gutenberg的手风琴 - 防止打开第一支手风琴