1

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

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

我的应用程序中的代码：

内嵌框架：

<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() 。但我仍然收到类似的错误

TypeError: player.stopVideo 不是函数

当我从 Firefox 的 Web 控制台再次运行添加源标签的三行代码时，api 似乎已加载，一切都重新开始工作。

我已经为此苦苦挣扎了好几天，我真的需要帮助找出可能出了什么问题。如果它有助于我的应用程序在 ruby​​ on rails 中开发，但我认为这不是相关信息。

谢谢

4

1 回答 1

4

上面的代码没有问题。我的视频以引导模式加载。Modal 的 hide 属性将使其对 firefox 不可见，并且 firefox 根本不会加载 api。所以我删除了模态隐藏类，而不是 display:none 我使用 item.css("visibility", "visible"); 和 item.css("可见性", "隐藏"); 这使Firefox加载了api。

于 2013-01-28T06:54:55.550 回答