javascript - 嵌入带有索引的 youtube 播放列表；缩略图始终是第一个视频-6ren

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

转载作者：行者123 更新时间：2023-12-03 05:27:49

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

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

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

最佳答案

我认为这与 youtube 根据视口(viewport)大小选择缩略图有关。如果 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 东西，可以从播放列表中提取所有 videoId；将它们添加到数组中；然后从数组中选择一个随机视频；并将其放入 iframe src。

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

我在这方面完全是菜鸟。因此，对我的代码的任何 build 性批评将不胜感激。希望这对其他人有帮助。

$(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();
});



});