Youtube播放列表隨機嵌入

Question

對於一個小型視頻比賽（大多數喜歡在臉書上），我試圖在我的主頁內嵌入一個YouTube播放列表。每個視頻都有一個類似的按鈕。

現在我想要實現的是，每次刷新頁面時，視頻的順序都應該改變，以便機會相等。

到目前爲止，這是我的代碼（允許的，因爲CKEditor的沒有PHP）

<script type="text/javascript"> 
google.setOnLoadCallback(function() { 
// setup the click handler 
function loadVideo(video) { 

$('#videos h3').text(video.title); 

$('#youtubeVideo').html([ 
    '<iframe style="max-width:100%;" width="839" height="472" title="', video.title, '" src="', video.href, '" frameborder="0" allowfullscreen="true"></iframe>' 
].join("")); 
return false; 
} 

// get the feed info 
// setting max-results delivers you the maximum of 50, you can remove to default to 25. Use feed.setNumEntries to strip down to a range between 50 and 25. 
var feedUrl = "http://gdata.youtube.com/feeds/api/playlists/5602ED8DD2643FC2?max-results=50"; 
new google.feeds.lookupFeed(feedUrl, function (result) { 
if (result.error || !result.url) { 
$('#videocomm').hide(); 
return; 
} 
// get the feed items 
var feed = new google.feeds.Feed(result.url); 
feed.setNumEntries(50); 
feed.load(function (result) { 
// write out the feed data 
var container = $(".youtubeFeed"); 
//var totalcount = result.feed.entries.length; 
//alert (totalcount); 

for (var i = 0; i < result.feed.entries.length; i++) { 
var entry = result.feed.entries[i]; 
var vidhash = /=(.*)&(.*)$/.exec (entry.link)[1]; 
// uncomment this and comment out the item below if you find rendering of the player a bit slow 
// container.append('<li><div><a href="http://www.youtube.com/v/'+vidhash+'&feature=youtube_gdata&rel=1" class="yt-vid-link" title="'+entry.title+'"><img src="http://img.youtube.com/vi/'+vidhash+'/2.jpg" /><br />'+entry.title+'</a></div></li>\n'); 

// comment the item below and uncomment the item above if you find the player swap too slow 
    container.append('<li class="vid-list-item"><span class="yt-title">'+entry.title+'</span><a href="http://www.youtube.com/embed/'+vidhash+'" class="yt-vid-link" title="'+entry.title+'"><img src="http://img.youtube.com/vi/'+vidhash+'/2.jpg" /></a><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.youtube.com/watch?v='+vidhash+'=&amp;send=false&amp;layout=button_count&amp;width=200&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=469231673121827" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true"></iframe></li>\n'); 
} 
// load the first video 
$(".yt-vid-link:first").each(function() { 
loadVideo(this); 
return false; 
}); 
// setup the click handler for all the videso 
$(".yt-vid-link").click(function() { 
loadVideo(this); 
return false; 
}); 
}); 
}); 
}); 
google.load("feeds", "1"); 
</script> 

<div id="videos"> 
<div id="videocomm"> 
<h3>Warte kurz, wir laden die Videos....</h3> 

<div id="youtubeVideo">&nbsp;</div> 

<div class="slider"> 
<div id="fragment-1"> 
<ul class="youtubeFeed"> 
</ul> 
</div> 
</div> 
</div> 
</div> 

UPDATE：這是我想出了

function zufall() { 
return (Math.random() - Math.random()); 
} 
result.feed.entries.sort(zufall); 

Answer 1

據正如我所看到的，您可以隨機選擇result.feed.entries以獲得期望的結果。

您可以使用這樣的功能，因爲它：

function fisherYates (myArray) { 
    var i = myArray.length, j, tempi, tempj; 
    if (i === 0) return false; 
    while (--i) { 
    j = Math.floor(Math.random() * (i + 1)); 
    tempi = myArray[i]; 
    tempj = myArray[j]; 
    myArray[i] = tempj; 
    myArray[j] = tempi; 
    } 
} 

See this StackOverflow answer。