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>

当手风琴关闭或选择其他手风琴时，我正试图让我的视频停止播放。基本上，当关闭包含视频的框时，视频会停止。

请帮忙吗？

Answer 1

您需要使用YouTube Iframe API加载视频，才能使用Javascript访问视频控件。

另一种方法，我不推荐，但可以使用您当前的代码是删除手风琴关闭时的元素，将视频网址存储在某处，然后重新添加视频，以便它处于原始状态，当然这不会在用户所在的视频上留下持久的时间。

使用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>

然后在您的点击事件中，您可以切换一个类来定义该部分是否已打开以及是否有来自数据视频属性的视频。如果该部分处于非活动状态（向上滑动），则删除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>'));
}

如何在手风琴上停止视频

1 个答案: