YouTube API 在 IE 上失败

Question

我一直在尝试使用 YouTube API 在边栏上显示播放列表，如 . I have given the full code as well in the codepen link 中所述。

但是，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

你应该做这样的事情。

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

Answer 2

可以查看YouTube PlaylistItems: list document，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 3

我解决了这个问题。问题是 Internet Explorer 不支持 Destructuring assignment. I found the solution from this thread

所以下面一行，

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

YouTube API 在 IE 上失败

YouTube API failing on IE

javascript

internet-explorer

youtube-api