Question

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

HTML：

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

<body>底部的

JavaScript ：

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

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

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

Answer 1

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

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

VS

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以显示附加到网址的播放列表的视频。

基于这个Retrieve all videos from youtube playlist using youtube v3 API，我创建了一个从播放列表中提取所有videoId的javascript内容;将它们添加到数组中;然后从阵列中选择一个随机视频;并将其放入iframe src。

这是代码。你必须把自己的API密钥放在那里。 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播放列表;缩略图始终是第一个视频

1 个答案: