減少視頻播放列表代碼

我想知道如何減少我爲視頻播放器製作的代碼。每次添加新視頻時，我都需要複製每個視頻的功能並複製相關視頻。有誰知道如何減少這一點，以便當我添加一個新的視頻到列表中時，它將適當的功能來顯示它，而不必複製，粘貼，只是改變鏈接。減少視頻播放列表代碼

小提琴是在這裏 - http://jsfiddle.net/olichalmers/44tQM/

$(document).ready(function(){ 

     var videoContainer = $('.video-hold'); 
     var videoOneBtn = $('.one'); 
     var videoTwoBtn = $('.two'); 
     var videoThreeBtn = $('.three'); 
     var videoFourBtn = $('.four'); 

     var videoOne = '<iframe width="100%" height="100%" src="//www.youtube.com/embed/brFKqr0BZcE?wmode=transparent&controls=0&showinfo=0" frameborder="0" allowfullscreen="true"></iframe>'; 
     var videoTwo = '<iframe width="100%" height="100%" src="//www.youtube.com/embed/wxrYmYyRMZk?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>'; 
     var videoThree = '<iframe width="100%" height="100%" src="//www.youtube.com/embed/MaCSd0eD5Rw?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>'; 
     var videoFour = '<iframe width="100%" height="100%" src="//www.youtube.com/embed/MaCSd0eD5Rw?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>'; 


     videoContainer.append(videoOne); 


     videoOneBtn.click(function (e) { 

      videoContainer.empty().append(videoOne); 

       $('.video-hold iframe').each(function() { 

        var url = $(this).attr("src"); 

        $(this).attr("src", url + "&autoplay=1&controls=0&showinfo=0"); 

        return false; 

       }); 

       e.preventDefault(); 
     }); 




     videoTwoBtn.click(function (e) { 

      videoContainer.empty().append(videoTwo); 

      $('.video-hold iframe').each(function() { 

       var url = $(this).attr("src"); 

       $(this).attr("src", url + "&autoplay=1&controls=0&showinfo=0"); 

       return false; 

      }); 

      e.preventDefault(); 

     }); 




     videoThreeBtn.click(function (e) { 

      videoContainer.empty().append(videoThree); 

      $('.video-hold iframe').each(function() { 

       var url = $(this).attr("src"); 

       $(this).attr("src", url + "&autoplay=1&controls=0&showinfo=0"); 

       return false; 

      }); 

      e.preventDefault(); 

     }); 




     videoFourBtn.click(function (e) { 

      videoContainer.empty().append(videoFour); 

      $('.video-hold iframe').each(function() { 

       var url = $(this).attr("src"); 

       $(this).attr("src", url + "&autoplay=1&controls=0&showinfo=0"); 

       return false; 

      }); 

      e.preventDefault(); 

     }); 



});

最佳，奧利弗

來源

2014-01-10 Oliver Chalmers

，你可以做到以下幾點：在你的HTML，改變一個id你有類，並添加一個類，像這樣：

 <li><a href="#" class="vidbtn" id="one">Paper Heart</a></li> 
     <li><a href="#" class="vidbtn" id="two">Rumour</a></li> 
     <li><a href="#" class="vidbtn" id="three">Millionaire Transmitter</a></li> 
     <li><a href="#" class="vidbtn" id="four">Another video</a></li>

，如果你有這個，你可以執行一次函數像這樣：

$(".vidbtn").click(function(e) { 
     videoContainer.empty().append(eval(this.id)); 

      $('.video-hold iframe').each(function() { 

       var url = $(this).attr("src"); 

       $(this).attr("src", url + "&autoplay=1&controls=0&showinfo=0"); 

       return false; 

      }); 

      e.preventDefault(); 

     });

希望這會幫助你。

編輯：

這裏是基於工作的jsfiddle您的代碼有了一些變化： JSFiddle

來源

2014-01-10 14:34:29

文森特感謝了很多朋友，這看起來很棒，而且正是我一直在尋找的東西。最好。 –

如果問題得到解答，您可以將答案標記爲已接受。 –

對不起，我花了一段時間，我是新來的。 –

這裏是一個可以讓你開始一個選項：

src值添加到每個錨標記，並使用一個共享的類名：

<li><a href="#" class="videoBtn" src="//www.youtube.com/embed/brFKqr0BZcE? 
wmode=transparent&controls=0&showinfo=0">Paper Heart</a></li>

然後你可以簡單地綁定到$('videoBtn').click()。

在功能方面，使用$(this).attr("src")這樣你就可以建立你想要的網址：

var video = '<iframe width="100%" height="100%" src="' 
      + $(this).attr("src") 
      + '" frameborder="0" allowfullscreen="true"></iframe>';

和地點，無論你想它。

通過這種方法，你可以用一個函數完成相同的操作來處理所有的鏈接。

來源

2014-01-10 14:26:14

非常感謝您的迅速和有益的反應！ –

減少視頻播放列表代碼

回答

相關問題