API YouTube не работает в IE

Question

Я играл с YouTube API, чтобы отобразить список воспроизведения на боковой панели, как описано в теме . Я также дал полный код в ссылке codepen .

Однако IE не удалось отобразить список воспроизведения. ниже приведена ошибка консоли.

Эта строка вызывает ошибку

function getPlaylistItems(pageToken) {
        return gapi.client.youtube.playlistItems.list({
            "part": "snippet,contentDetails",
            "maxResults": 50,
            "playlistId": PLAYLIST_ID, 
            pageToken //Error is in this line
        }).then(function(response) {
        const {items, nextPageToken} = response.result;


        playlistItems.push(...items);

        var index = 0;
        items.forEach(function(item) {
            const thumbnailItem = createPlaylistItem(item, index);
            playlist.appendChild(thumbnailItem);
            index++;
        });
        maxVideoVisible = index - 3;

        if (nextPageToken) {
            getPlaylistItems(nextPageToken);
        }
    }, function(err) {
        console.error("Execute error", err);
    });
}

Может кто-нибудь помочь мне разобраться в этой проблеме?

Спасибо

Answer 1

Вы можете проверить YouTube PlaylistItems: список документов , pageToken является строковым типом, поэтому код приведен ниже:

    return gapi.client.youtube.playlistItems.list({
        "part": "snippet,contentDetails",
        "maxResults": 50,
        "playlistId": PLAYLIST_ID, 
        "pageToken" : "<the page token string>" //Error is in this line
    }).then(function(response) {

Answer 2

Я нашел проблему. Проблема в том, что Internet Explorer не поддерживает Разрушающее присваивание . Я нашел решение из этой нити

Таким образом, вместо строки ниже

const {items, nextPageToken} = response.result;

мы должны переписать раздел, как показано ниже,

const hash = response.result;
items = hash.items,
nextPageToken = hash.nextPageToken;

а также нижняя строка

pageToken

должна быть записана как

"pageToken" : pageToken

Ниже приведен окончательный фиксированный код. Тот, кто сталкивается с такими же проблемами, может использовать приведенный ниже код.

    function getPlaylistItems(pageToken) {
        return gapi.client.youtube.playlistItems.list({
            "part": "snippet,contentDetails",
            "maxResults": 50, // This is the maximum available value, according to the Google docs
            "playlistId": PLAYLIST_ID, 
            "pageToken" : pageToken
        }).then(function(response) {

            //Fixed code
            const hash = response.result;
            items = hash.items,
            nextPageToken = hash.nextPageToken;

            // The items[] is an array of a playlist items.
            // nextPageToken - if empty - there are no items left to fetch
            playlistItems.push(items);

            // It's up to you, how to handle the item from playlist. 
            // Add 'onclick' events to navigate to another video, or use another thumbnail image quality 
            var index = 0;
            items.forEach(function(item) {
                const thumbnailItem = createPlaylistItem(item, index);
                playlist.appendChild(thumbnailItem);
                index++;
            });
            maxVideoVisible = index - 3;

            // Recursively get another portion of items, if there any left
            if (nextPageToken) {
                getPlaylistItems(nextPageToken);
            }
        }, function(err) {
            console.error("Execute error", err);
    });
}

Answer 3

Вы должны делать что-то вроде этого.

gapi.client.youtube.playlistItems.list({
            "part": "snippet,contentDetails",
            "maxResults": 50,
            "playlistId": PLAYLIST_ID, 
            pageToken : NextPageToken 
        }).then(function (response) {
              // if response.result.nextPageToken exists, use it
              if (response.result.nextPageToken) {
                 NextPageToken = response.result.nextPageToken;                        
              } else {
                 NextPageToken = false;
              }
           });