Question

docs说我们应该使用div容器，其中会附加<iframe>元素。

有效：

new YT.Player('player', {
   height: '390',
   width: '640',
   videoId: 'M7lc1UVf-VE',
   events: {
      onReady: onPlayerReady,
      onStateChange: onPlayerStateChange
   }
});

但我应该在页面上有一个元素<div id="player"></div>。

如果我已经拥有嵌入视频的iframe元素，可以在YT.Player构造函数中使用该iframe吗？

我想有这样的事情：

new YT.Player('iframeId').playVideo();

但是playVideo并不存在，因为播放器没有加载（我想这是因为我们提供了iframe ID）。

有没有办法将现有的iframe与YT.Player实例连接？

Answer 1

我写了一个快速破解：来自<iframe>网址的get the video id，用div替换iframe并初始化播放器：

YTPlayerIframe = (function () {
  function youtube_parser(url){
     var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
     var match = url.match(regExp);
     return (match&&match[7].length==11)? match[7] : false;
  }
  var __oldPlayer = YT.Player;
  var player = function (id, options) {
    var el = document.getElementById(id);
    options.videoId = youtube_parser(el.getAttribute("src"))
    el.outerHTML = "<div id='" + id + "'>test</div>";
    return new __oldPlayer(id, options);
  };
  return player;
})();

然后你可以这样使用它：

var myPlayer = YTPlayerIframe("iframe-id", {
   // The videoId option will be taken from the iframe src.
   events: {
      onReady: function () {...}
   }
});

如何使用iframe作为YT.Player的输入

1 个答案: