如何爲嵌入式視頻創建過濾器？

我想創建一個導航鏈接，點擊後，可以過濾標記有數據過濾器的頁面上的視頻。這可以用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

如何爲嵌入式視頻創建過濾器？

回答

相關問題