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

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

我为此写了一个快速破解：get the video id 来自 <iframe> url，用 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 的输入

How to use an iframe as input for YT.Player

html

javascript

iframe

youtube-iframe-api