如何为嵌入式视频创建过滤器？

我想创建一个导航链接，点击后，可以过滤标记有数据过滤器的页面上的视频。这可以用HTML完成吗？我需要jQuery吗？如何为嵌入式视频创建过滤器？

<ul class="nav navbar-nav navbar-left"> 
    <li><a href="#" data-filter="video1" tabindex="-1">Video 2</a></li> 
    <li><a href="#" data-filter="video2" tabindex="-1">Video 1</a></li> 
</ul> 

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> 
     <h4>Video 2 title</h4> 
      <div class="embed-responsive embed-responsive-16by9" data-filter="video2"> 
      <iframe class="embed-responsive-item" src="video2" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe> 
      </div> 
</div> 
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> 
     <h4>Video 1 title</h4> 
      <div class="embed-responsive embed-responsive-16by9" data-filter="video1"> 
      <iframe class="embed-responsive-item" src="video1" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe> 
      </div> 
</div>

来源

2016-11-10 DGrex

如果您想要操纵用户可见的内容，您将需要某种类型的JavaScript。

它可能很容易使用id和class值来简化事情。

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 video video2"> 
     <h4>Video 2 title</h4> 
      <div class="embed-responsive embed-responsive-16by9" > 
      <iframe class="embed-responsive-item" src="video2" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe> 
      </div> 
</div>

然后你可以使用

<ul class="nav navbar-nav navbar-left"> 
    <li><a href="#" id="video1" class="videoFilterBtn" tabindex="-1">Video 2</a></li> 
    <li><a href="#" id="video2" class="videoFilterBtn" tabindex="-1">Video 1</a></li> 
</ul>

和你的脚本将

$(document).ready(function() { 
    $(".videoFilterBtn").on("click", function(e){ 
     e.preventDefault() // stop default click events like navigation 
     $(".video").hide() // hide all videos 
     $("#" + $(this).prop("id")).show() // show the one with class matching this element id 
    } 
});

我所做的是增加2班至顶层DIV包装的视频I帧。其中一个是通用的“视频”类，用于快速隐藏所有视频，另一个与您在数据过滤器（例如video2）中使用的视频号相匹配。

然后，我为每个元素添加了一个id属性，并且还将一个类挂钩到click事件中。

脚本说：

找到一类= videoFilterBtn
接触到它们的click事件，这将
停止默认的浏览器点击行为的任何元素;
隐藏任何带有“视频”类的元素（以及他们的子女）
显示具有匹配点击的元素id值的类的任何元素。

如果你想更性感的效果改变.hide（）为.fadeOut（）和.show（）为.fadeIn（）。

你还需要链接到jquery。

PS。您可能需要考虑使用对象而不是内置页框来托管视频。

来源

2016-11-10 22:24:01

如何为嵌入式视频创建过滤器？

回答

相关问题