javascript - 如何从 JSON 对象获取 Youtube 视频 ID

Question

我想从我的 JSON 文件中获取 YouTube 视频 ID。将使用正则表达式函数提取 ID。当我将 id 作为 youtube 函数 onYouTubeIframeAPIReady 的参数传递时，我将收到错误:Uncaught TypeError: YT.Player is not a function .

我的正则表达式函数:

regexVideoId: function(url) {
        var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
        var match = url.match(regExp);
        console.log(match[7]);
        onYouTubeIframeAPIReady(match[7]);
        // return (match&&match[7].length==11)? match[7] : false;
    },

Youtube功能:

var player;
    function onYouTubeIframeAPIReady(id) {
        player = new YT.Player('youtube-video', {
            height: '390',
            width: '640',
            videoId: id,
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

调用正则表达式函数并发送 youtube URL:regexVideoId(data.youtube);我使用 Youtube Javascript API。正则表达式函数起作用了，它会从它的 id 中提取视频。仅将 video id 传递给函数 onYoutubeIframeAPIReady 不起作用，并给我错误 is not a function。

我做错了什么？提前致谢。

Answer 1

您没有提供足够的代码，因此这只是猜测工作。

但是，问题似乎是您直接调用 onYouTubeIframeAPIReady，可能是在 YouTube API 完全加载之前。 (Youtube API Docs中提供的示例使用异步加载)

您可以通过反转逻辑来解决这个问题。您可以让 YT.Player 构造函数调用 regexVideoId 函数，而不是在 regexVideoId 函数中显式调用 onYouTubeIframeAPIReady:

function regexVideoId(url) {
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    var match = url.match(regExp);
    return match[7];
}

//...

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('youtube-video', {
        height: '390',
        width: '640',
        videoId: videoId: regexVideoId(theUrl),
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

检查这个working fiddle