Youtube api无法在Firefox上加载

我有以下代码片段来控制嵌入式youtube播放器。 它适用于Chrome和Safari,但不适用于Firefox。

jsfiddle: http : //jsfiddle.net/fuSSn/4/

我的应用中的代码:

iframe:

我的javascript:

 var source_tag = document.createElement("script"); var first_source_tag = document.getElementsByTagName("script")[0]; first_source_tag.parentNode.insertBefore(source_tag, first_source_tag); // This function will be called when the API is fully loaded function onYouTubeIframeAPIReady() { YT_ready(true) console.log("api loaded! yikes") } function getFrameID(id){ var elem = document.getElementById(id); if (elem) { if(/^iframe$/i.test(elem.tagName)) return id; //Frame, OK // else: Look for frame var elems = elem.getElementsByTagName("iframe"); if (!elems.length) return null; //No iframe found, FAILURE for (var i=0; i 0){ // Removes the first func from the array, and execute func onReady_funcs.shift()(); } } else if(typeof func == "function") { if (api_isReady) func(); else onReady_funcs[b_before?"unshift":"push"](func); } } })(); var video = function ( videoid, frameid) { var player; var that; var seconds; var duration; var stateChangeCallback; var update_play = 0; return { setOnStateChangeCallback: function(callback) { stateChangeCallback = callback; }, getCurrentTime: function() { return player.getCurrentTime(); }, getPlayer: function () { return player; }, getVideoFrameId: function () { return "video-frame-" + videoid; }, initVideo: function (second) { console.log("initing") that = this; YT_ready(function(){ var frameID = getFrameID("video-frame-" + videoid); console.log("creating player") console.log(frameID) if (frameID) { //If the frame exists console.log("frame exists") player = new YT.Player(frameID, { events: { "onStateChange": that.stateChange } }); console.log("Player Created!"); if (second) { console.log(second) setTimeout(function() { console.log("seek to"); player.seekTo(second, false); player.stopVideo()}, 1000); } } }); }, stateChange: function (event) { console.log("event.data = ", event.data); switch(event.data) { case YT.PlayerState.PLAYING: { if (stateChangeCallback) stateChangeCallback("play", player.getCurrentTime(), player.getDuration()); onsole.log("play"); } break; case YT.PlayerState.PAUSED: case YT.PlayerState.CUED: case YT.PlayerState.ENDED: { if (stateChangeCallback) stateChangeCallback("pause", player.getCurrentTime(), player.getDuration()); console.log("pause"); } break; } }, pauseVideo: function () { player.stopVideo(); console.log('player.stopVid()'); }, seekTo: function(second) { player.seekTo(second, false); } }; }; function onStateChange(vid, action, second, total) { if (Videos[vid]) { console.log( (second / total) * 100); } }; $(document).ready(function () { var Videos = {}; logger.info("heyyy") var videoId=155; //if (videoId) { Videos[videoId] = video(videoId, 155); console.log(Videos[155]) Videos[155].initVideo(); Videos[155].setOnStateChangeCallback(function(action, second, total) { onStateChange(155, action, second, total); }); //} Videos[155].seekTo(1000, false); onStateChange(155, "start", 0, 0); }); 

我知道正在添加所需的脚本标记,我可以从控制台进行测试。 我也知道onYouTubePlayerAPIReady()实际上是被调用的。 但我仍然收到错误

TypeError:player.stopVideo不是函数

当我运行从firefox上的Web控制台再次添加源标记的三行时,api似乎加载并且一切都开始重新运行。

我一直在努力解决这个问题,我真的需要帮助找出可能出错的地方。 如果它有助于我的应用程序是在轨道上的ruby开发,但我不认为这是相关的信息。

谢谢

上面的代码没有问题。 我的video是以bootstrap模式加载的。 Modal的hide属性会使它对firefox不可见,而firefox根本不会加载api。 所以我删除了模态隐藏类而不是display:none我使用了item.css(“visibility”,“visible”); 和item.css(“visibility”,“hidden”); 这使得firefox加载了api。