javascript - 如何停止 Accordion 视频

Question

这是我第一次来。我在编码方面并没有那么丰富的经验，我主要通过反复试验复制和粘贴来做事。

这是我的代码的链接:JSFiddle .

<!-- ==================================================== -->
<!-- CONTENTS =========================================== -->
<!-- ==================================================== --> 
<aside class="accordion">

<!-- MAIN BAR #2; #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 -->
<h1 class="customstyle">Freelance</h1>
  <div>

  <!-- SELECTION #3 ==================================================================================== -->
  <h2 class="customstyle">Project Year (2o13)</h2>
    <div>
      <!-- ITEM #1 ================================ -->
      <!-- ======================================== -->
      <h3 class="customstyle">Freelance For Company</h3>
      <div>

        <!-- SUB-ITEM #3 ========================================================== -->
        <h4 class="customstyle">JUL-13 | Video Test</h4>
        <!-- CONTENTS -->
        <p class="customstyle">
          <style>
            .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
            .embed-container iframe, .embed-container object, 
            .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
          </style>
          <span class='embed-container' style="display: block;">
            <iframe src='https://www.youtube.com/embed/hbmdOzWgyXU?rel=0&showinfo=0&autohide=1&start=0' frameborder='0' allowfullscreen></iframe>
          </span>
        </p>
      </div>

    </div>
  </div>
</aside>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>



<!-- ==================================================== -->
<!-- ==================================================== -->
<!-- CSS STYLING ======================================== -->
<!-- ==================================================== -->
<style>
.accordion {
  width: 100%;
  margin: 20px auto 0px;
  padding-bottom: 0;
}
.accordion h1, h2, h3, h4 {
  cursor: pointer;
}
p.customstyle  { margin: 0; padding-bottom: 3px; }
h1.customstyle { margin: 0; }
h2.customstyle { margin: 0; }
h3.customstyle { margin: 0; }
h4.customstyle { margin: 0; }
.accordion h1 {
  padding: 15px 20px;
  background-color: #f5c168;
  font-family: "Abel";
  font-size: 1.5rem;
  font-weight: normal;
  color: #7F4B49;
}
.accordion h1:hover {
  color: #ffe6bb;
}
.accordion h1:first-child {
  border-radius: 0 0 0 0;
}
.accordion h1:last-of-type {
  border-radius: 0 0 0 0;
}
.accordion h1:not(:last-of-type) {
  border-bottom: 1px dotted #e9a531;
}
.accordion div, .accordion p {
  display: none;
}
.accordion h2 {
  padding: 5px 25px;
  background-color: #7F4B49;
  font-size: 1.1rem;
  /*color: #333;*/
}
.accordion h2:hover {
  background-color: #7a4543;
}
.accordion h3 {
  padding: 5px 30px;
  background-color: #FFDDB3;
  font-family: "Abel";
  font-weight: bold;
  font-size: 15px;
  color: #393939; 
}
.accordion h3:hover {
  background-color: #f5d0a1;
}
.accordion h4 {
  padding: 5px 35px;
  background-color: #EECEA7;
  font-family: "Ubuntu" !important;
  font-size: .9rem;
  color: #af720a; 
}
.accordion h4:hover {
  background-color: #edc89a;
}
.accordion p {
  padding: 15px 35px;
  background-color: #614140;
  /*font-family: "Georgia";*/
  /*font-size: .8rem;*/
  /*color: #333;*/
  line-height: 1.6rem;
}
</style>



<!-- ==================================================== -->
<!-- ==================================================== -->
<!-- JQUERY SCRIPTS ===================================== -->
<!-- ==================================================== -->
<script>
var headers = ["H1","H2","H3","H4","H5","H6"];

$(".accordion").click(function(e) {
  var target = e.target,
      name = target.nodeName.toUpperCase();

  if($.inArray(name,headers) > -1) {
    var subItem = $(target).next();

    //slideUp all elements (except target) at current depth or greater
    var depth = $(subItem).parents().length;
    var allAtDepth = $(".accordion p, .accordion div").filter(function() {
      if($(this).parents().length >= depth && this !== subItem.get(0)) {
        return true; 
      }
    });
    $(allAtDepth).slideUp("fast");

    //slideToggle target content and adjust bottom border if necessary
    subItem.slideToggle("fast",function() {
        $(".accordion :visible:last").css("border-radius","0 0 0 0");
    });
    $(target).css({"border-bottom-right-radius":"0", "border-bottom-left-radius":"0"});
  }
});
</script>

我试图让我的视频在关闭 Accordion 或选择另一个 Accordion 时停止播放。基本上，当包含视频的框关闭时，视频停止。

有什么帮助吗？

Answer 1

您需要使用 YouTube Iframe API加载您的视频，以便使用 Javascript 访问视频控件。

另一种我不推荐但可以与您当前代码一起使用的方法是删除 Accordion 关闭处的元素，将视频 URL 存储在某处，然后重新添加视频，使其位于它是原始状态，当然这不会在用户正在观看的视频上保持持续时间。

使用 jQuery，这样的东西可以工作:

<h4 class="customstyle" data-video="https://www.youtube.com/embed/hbmdOzWgyXU?rel=0&showinfo=0&autohide=1&start=0" style="border-radius: 0px;">JUL-13 | Video Test</h4>

然后在您的点击事件中，您可以切换一个类来定义该部分是否打开以及它是否具有来自 data-video 属性的视频。如果该部分处于非事件状态(向上滑动)，则删除 iframe 代码并使用数据属性中的 URL 重新附加它。

$(this).toggleClass('active');

if (typeof $(this).attr('data-video') !== typeof undefined && $(this).attr('data-video') !== false && !$(this).hasClass('active')) {
    // has the video attribute and accordion has been closed (doesn't have the active class)
   var videoUrl = $(this).attr('data-video');
   $(subItem).find('.embed-container iframe').remove();
   $(subItem).find('.embed-container').append($('<iframe src="'+ videoUrl +'?rel=0&showinfo=0&autohide=1&start=0" frameborder="0" allowfullscreen></iframe>'));
}