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

How to use an iframe as input for YT.Player

本文关键字：输入 选手 YT 作为 何使用 iframe      更新时间：2023-09-26

文档说我们应该使用一个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 连接起来。播放器实例？

我为它写了一个快速的技巧：从<iframe> url获取视频ID，将iframe替换为div并初始化播放器：

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 () {...}
   }
});
相关文章：