的Youtube API不会在Firefox中加载(Youtube api does not loa

2019-10-17 14:55发布

我有下面的代码片段控制嵌入式YouTube播放器。 它在Chrome和Safari,但不是在Firefox的伟大工程。

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

从我的应用程序的代码:

在iframe:

<div class="tubeframe" id="video-frame-155" style="">
<iframe title="YouTube video player" width="350" height="262"      src="http://www.youtube.com/embed/hc5xkf9JqoE?HD=1;rel=0;showinfo=0;autohide=1" frameborder="0" allowfullscreen="" id="video-frame-155-frame"></iframe>
</div>

我的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<elems.length; i++) {
       if (/^https?:\/\/(?:www\.)?youtube(?:-nocookie)?\.com(\/|$)/i.test(elems[i].src)) break;
    }
    elem = elems[i]; //The only, or the best iFrame
    if (elem.id) return elem.id; //Existing ID, return it
    // else: Create a new ID
    do { //Keep postfixing `-frame` until the ID is unique
        id += "-frame";
    } while (document.getElementById(id));
    elem.id = id;
    return id;
}
// If no element, return null.
return null;
}
// Define YT_ready function.
var YT_ready = (function(){
  var onReady_funcs = [], api_isReady = false;
  return function(func, b_before){
      if (func === true) {
          api_isReady = true;
          while(onReady_funcs.length > 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()实际上是调用。 但我还是收到这样的错误

类型错误:player.stopVideo不是一个函数

当我运行的三条线,从在Firefox Web控制台再加源标记,该API似乎加载和一切重新开始工作。

我一直在努力与这几天,我真的需要帮助搞清楚什么可能是错误的。 如果它帮助我的应用程序在Ruby on Rails的发展,但我不认为这是相关的信息。

谢谢

Answer 1:

有与上面的代码没有问题。 我的视频是在一个引导模式加载。 模态的隐藏属性将使其不可见到Firefox和Firefox不会加载所有的API。 所以我删除了模态隐藏类,而不是显示和:我没有用item.css(“知名度”,“可见”); 和item.css( “可见性”, “隐藏”); 这使得火狐载入API。



文章来源: Youtube api does not load on firefox