嵌入youtube播放列表与索引;缩略图总是第一个视频

Embed youtube playlist with index; thumbnail is always first video

本文关键字：略图 第一个 视频 youtube 播放列表 索引 嵌入      更新时间：2023-09-26

我正在嵌入一个带有特殊调整的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>

这样做效果很好，因为它从播放列表中选择一个随机视频，并从那个点开始(给人的印象是在每个页面视图中嵌入一个随机视频)，但在按下播放之前的缩略图总是第一个视频。

我能找到的关于如何更改播放列表缩略图的所有资源都是永久性和静态的-是否有办法更改它，以便我可以动态更改缩略图?我当然希望这是半自动发生的，但如果我必须以某种方式脚本化参数，那也是可以的。

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

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")

这是我看到你已经发现的。你已经手工创建了这个数组，所以我想我应该更进一步。

并自动生成播放列表中的视频数组。然后改变你的iframe src来显示视频和附加到url的播放列表。

基于此检索youtube播放列表中使用youtube v3 API的所有视频，我创建了一个javascript的东西，从播放列表中提取所有的videoid;将它们添加到数组中;然后从数组中随机选择一个视频;并将其放入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();
});

});
相关文章：