Как изменить идентификатор плейлиста YouTube с помощью выпадающего списка - PullRequest
Новая
       13

Как изменить идентификатор плейлиста YouTube с помощью выпадающего списка

0 голосов
/ 30 сентября 2019

Я пишу страницу, которая извлекает все идентификаторы из моего канала Youtube, а затем отображает их слева.

Когда вы нажимаете на них, они должны загружаться в больший видеоплеер.

Однако я также хочу использовать раскрывающийся список для загрузки определенного идентификатора и обновления списка воспроизведения.

Это то место, где я сейчас нахожусь и застрял: 

$(document).ready(function () {
    var key = 'AIzaSyDu_WUtnA_2tJCKUYRjgJbkejgJyQTr-zc';
    var playlistId = ['PL1AE4427D4BE1FC08', 'PLE9cFSHEPaoHuOprDwha-8g18M5nbxUDY',
        ' PL3834F0575C7DDAF5', 'PLC8575C947E2F534E', 
        'PLE9cFSHEPaoE7qLUn398ncEBUYXKVLcZ0', 
        'PLE9cFSHEPaoEq9gtNryPHV2M3DmSEHKoS', 
        'PLA75344A6D4A313CC',
        'PLE9cFSHEPaoGrH1aaYQEI-iTv5Lgrrvtv', 
        'PLE9cFSHEPaoH1uBvx62reZNGzjAtTSVYT', 'PL47BE509053B369FE'];
    var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';
    var URL2 = 'https://www.googleapis.com/youtube/v3/videos'

$( "#sel_status" ).val();
    var sel = document.getElementById('sel_status').selectedIndex;
    var i = sel;
    var options = {
        part: 'snippet',
        key: key,
        maxResults: 50,
        playlistId: playlistId[i]
    }

https://jsbin.com/taruheg/edit?html,css,js,output

1 Ответ

0 голосов
/ 01 октября 2019

Вам необходимо внести изменения в ваш код HTML и jQuery, чтобы сделать эту работу:

HTML 

<main class="col-4">
    <div class="ddown sticky-top">
        <label for="DropDown">Choose a video playlist&nbsp;&nbsp;</label>
        <select id="sel_status" name="sel_status">
            <option value="0">Products and Equipment</option>
            <option value="1">Car Wash Quick Hits</option>
            <option value="2">How To</option>
            <option value="3">Soap and Chemicals</option>
            <option value="4">Car Wash Smart Talk</option>
            <option value="5">Commercials</option>
            <option value="6">Detail</option>
            <option value="7">Chelsea Knows</option>
            <option value="8">Car Wash Spotlight</option>
            <option value="9">Dog Wash</option>
        </select>
    </div>
    <div class="plylist_wrapper"></div>
</main>

jQuery 

$(document).ready(function () {

    var key = 'AIzaSyDu_WUtnA_2tJCKUYRjgJbkejgJyQTr-zc';
    var playlistId = ['PL1AE4427D4BE1FC08', 'PLE9cFSHEPaoHuOprDwha-8g18M5nbxUDY',' PL3834F0575C7DDAF5', 'PLC8575C947E2F534E', 'PLE9cFSHEPaoE7qLUn398ncEBUYXKVLcZ0', 'PLE9cFSHEPaoEq9gtNryPHV2M3DmSEHKoS', 'PLA75344A6D4A313CC', 'PLE9cFSHEPaoGrH1aaYQEI-iTv5Lgrrvtv', 'PLE9cFSHEPaoH1uBvx62reZNGzjAtTSVYT', 'PL47BE509053B369FE'];
    var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';
    var URL2 = 'https://www.googleapis.com/youtube/v3/videos';

    var sel = document.getElementById('sel_status').selectedIndex;
    var options = {
        part: 'snippet',
        key: key,
        maxResults: 50,
        playlistId: playlistId[sel]
    }

    loadVids( options );

    // CLICK EVENT
    $('main').on('click', 'article', function () {
        var id = $(this).attr('data-key');
        mainVid(id);
    });

    $('#sel_status').change(function() {
        var playlistIndex = $(this).prop('selectedIndex');
        options.playlistId = playlistId[playlistIndex];
        $('.plylist_wrapper').html('');
        loadVids( options );
    });

    function loadVids( options ) {
        $.getJSON(URL, options, function (data) {
            var id = data.items[0].snippet.resourceId.videoId;
            mainVid(id);
            resultsLoop(data);
        });
    }

    //THIS FUNCTION WILL USE THE VIDEO ID FROM PREVIOUS API CALL AND RETRIEVE VIEW COUNT
    function view_count(vid) {
       var opt = {
           part: 'statistics',
           key: key,
           id: vid,
       }
       var vc = null;

       $.getJSON(URL2, opt, function (data) {
           vc = data.items[0].statistics.viewCount;
           $('#'+vid).append(`<p>Views: ${vc}</p>`);
       });
    }

    function mainVid(id) {
        $('#video').html(`
            <iframe width="100%" height="700" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        `);
    }

    function resultsLoop(data) {
        $.each(data.items, function (i, item) {

            var thumb = item.snippet.thumbnails.medium.url;
            var title = item.snippet.title;
            var desc = item.snippet.description.substring(0, 80);
            var vid = item.snippet.resourceId.videoId;
            var view = view_count(vid); //CALL FOR VIEWS

            $('.plylist_wrapper').append(`
                <article class="item" data-key="${vid}">
                    <img src="${thumb}" alt="" class="thumb">
                        <div class="details" id="${vid}">
                            <h5>${title}</h5>
                            <p>${desc}</p>
                        </div>
                 </article>
            `);
        });
    }
});
...