嵌入带有索引的 youtube 播放列表；缩略图总是第一个视频

Question

我正在嵌入一个带有特殊调整的 Youtube 播放列表 - 起点应该是随机选择的 - 通过以下两个片段：

HTML:

<iframe id="juliacon-player"
        align="center"
        width="560"
        height="315"
        frameborder="0"
        allowfullscreen>
</iframe>

JavaScript底部<body>:

<script type="text/javascript">
    var playlistId = 'PLP8iPy9hna6Sdx4soiGrSefrmOPdUWixM',
        videoCount = 61,
        index = Math.floor(Math.random() * videoCount),
        playlistUrl = 'https://www.youtube.com/embed/videoseries?list=' + playlistId + '&index=' + index,
        videoPlayer = document.getElementById('juliacon-player');

    if (videoPlayer) {
        videoPlayer.src = playlistUrl;
    }
</script>

这很有效，因为它从播放列表中选择一个随机视频并从该点开始（给人的印象是在每个页面视图中嵌入了列表中的一个随机视频），但按下播放之前的缩略图始终是第一个视频。

我能找到的所有关于如何更改播放列表缩略图的资源都是永久和静态的 - 有没有办法更改它以便我可以动态更改缩略图？我当然更喜欢这种情况是半自动发生的，但是如果我必须以某种方式编写参数脚本也没关系。

Answer 1

我认为这与 youtube 根据视口大小选择缩略图有关。我认为如果 iframe 的宽度为 430 像素或更小，缩略图将正确显示。当它在上面时，出于某种原因它只会显示播放列表的第一个缩略图。

iframe(width="280" height="158" src="https://www.youtube.com/embed/videoseries?list=PLaQokWZfgbykfIr6NKIcOMxsUC0cltOwE&index=2" frameborder="0" allowfullscreen)

对

iframe(width="720" height="405" src="https://www.youtube.com/embed/videoseries?list=PLaQokWZfgbykfIr6NKIcOMxsUC0cltOwE&index=2" frameborder="0" allowfullscreen)

相同的播放列表。不同的缩略图。请注意 280px 显示的是正确的缩略图。

如果您只嵌入视频并将播放列表附加到它，缩略图将是正确的。

iframe(width="720" height="405" src="https://www.youtube.com/embed/K-mG66pwQ5M?list=PLaQokWZfgbykfIr6NKIcOMxsUC0cltOwE")

这是我看到的you've already discovered。您已经手动制作了数组，所以我想我应该更进一步。

并自动生成播放列表中视频的数组。然后更改您的 iframe src 以显示带有附加到 url.

的播放列表的视频

基于此 Retrieve all videos from youtube playlist using youtube v3 API 我创建了一个 javascript 从播放列表中提取所有视频 ID 的东西；将它们添加到数组中；然后从数组中选择一个随机视频；并将其放入 iframe src.

这是代码。您必须将自己的 API-Key 放在那里。 http://codepen.io/anon/pen/vLoRyL

我对此一窍不通。因此，对我的代码提出的任何建设性批评将不胜感激。希望这对其他人有帮助。

$(function() {

// GET A RANDOM VIDEO FROM ALL PLAYLISTS
function randomVideo() {


    // VARIABLES
        // the playlist
        var playlistDon = {url:"PLaQokWZfgbykfIr6NKIcOMxsUC0cltOwE", count:4, name:"Don's Design Lab"};

        // get random video from that playlist
        var indexRando = Math.floor((Math.random() * playlistDon.count));

        // making the array of videos in playlist
        var sum = 0;
        var videoArray = [];


    // CONNECTING TO API
    function getVids(PageToken){
        $.get(
            "https://www.googleapis.com/youtube/v3/playlistItems",{
            part : 'snippet',
            maxResults : 50,
            playlistId : playlistDon.url, // selecting the random playlist
            pageToken : PageToken,
            key: 'YOUR API KEY'
            },
            function(data){
                myPlan(data);
            }
        );
    }

    // GETTING LIST OF VIDEOiDS FROM PLAYLIST
    function myPlan(data){
        var total = data.pageInfo.totalResults;
        var nextPageToken = data.nextPageToken;

        // cycle through the data
        for(var i=0;i<data.items.length;i++){

            // add .items to videoArray
            videoArray.push(data.items[i].snippet.resourceId.videoId);
            sum++ ;


            if(sum === (total) ){ // if the current item number equals the total number of items
                sum = 0; // reset the count
                updateIframe(); // update the iframe
                return;
            }
        }

        if(sum < (total)){
            getVids(nextPageToken);
        }

    }


    function updateIframe() {
        // put that video into the iframe
        var videoUrl = "https://www.youtube.com/embed/" + videoArray[indexRando] +"?list=" + playlistDon.url + "&index=" + indexRando + "&showinfo=1";
        $('.video.random iframe').attr("src", videoUrl);
    }


    getVids();

}



$('button').on('click', function() {
    randomVideo();
});



});

嵌入带有索引的 youtube 播放列表；缩略图总是第一个视频

Embed youtube playlist with index; thumbnail is always first video

javascript

youtube