YT.Player仅在QA中为空

我正在尝试创建一个YT.Player对象但是失败了。 当我在console.log（）中使用YT.Player对象时，我看不到与cuePlaylist()或getDuration()相关的预期函数。 该代码适用于我的Local和Dev环境，但在我的QA环境中失败。 有谁知道为什么会发生这种情况？

通过我的调试，我成功地提取了YoutubevideoID（我有console.log），并在创建YT.Player对象时将其作为参数传递。 我不明白为什么YT.Player在向我传递有效的Youutube ID时会报告空video。 此外，我很困惑为什么它适用于我的本地/开发，但不适用于QA环境。

 onYouTubeIframeAPIReady = function() { createPpdYoutubeObjects(); }; function createPpdYoutubeObjects() { var delay = 5000; // need to wait for Youtube videos to load setTimeout( function(){ // Sets up player tracker, and init the carousel var players={}; $('iframe.ytplayer').each(function() { players[ grabYoutubeIdFromUrl($(this).attr('src')) ] = new YT.Player( grabYoutubeIdFromUrl($(this).attr('src')), { events: { 'onReady': onReady, 'onStateChange': onStateChange } }); console.log( 'id: ' + grabYoutubeIdFromUrl($(this).attr('src')) ); console.log( players[ grabYoutubeIdFromUrl($(this).attr('src')) ] ); }); }, delay); }; function grabYoutubeIdFromUrl(path) { if ( typeof path === "string" && path.length > 0 && path.indexOf('embed/') > -1 && path.indexOf('?wmode', path.indexOf('embed/')) > -1 ) { var start = path.indexOf('embed/') + 6; var end = path.indexOf('?wmode', start); return path.substring(start, end); } return ""; };   

Answer 1

YT.Player构造函数将DOM元素或HTML元素的ID作为其第一个参数，而不仅仅是任何YouTube ID。 你传递的字符串并不代表任何一个字符串，所以你看到的结果表明YT播放器无法初始化，因为DOM中没有这样做的地方。

解决方案是在您的iFrame上添加与YouTube src ID相同的ID属性，如下所示：

为什么它在本地/ dev中工作？ 可能您的iframe代码确实具有正确的ID属性，并且在将代码复制到QA环境时从未正确传输。 但是调试起来要困难得多。 🙂

另外，我假设你只在这里发布了一段你的代码，对吗？ 因为它没有像你发布的那样运行，因为没有定义onReady和onStateChange函数。

祝你好运！