JS YouTube API Chromeless 播放器

Question

我如何将无铬 YouTube 播放器嵌入到我的网页中，YouTube api 文档仅提供 Javascript 功能，您是使用 iframe 嵌入还是使用视频标签以及如何控制无铬播放器。

Answer 1

您会根据文档调用 javascript 函数，

https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

但要为其添加参数。基本上，您在页面上创建一个具有特定 ID 的 div

<div id=myplayer></div>

然后调用 youtube 播放器 javascript

<script>
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('myplayer', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE'
      }
    });
  }

但使用此处列表中的特定参数： https://developers.google.com/youtube/player_parameters

所以我们将这些 playerVars 添加到函数中，将上面的函数替换为：

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('myplayer', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      playerVars: { 'controls': 0, 'showinfo': 0 }
    });
  }

然后，您将使用 javascript 来停止/暂停/开始视频

player.playVideo()
player.pauseVideo()
player.stopVideo()

最基本的方法是为链接制作这些 onclick 事件，例如

<a href='#' onclick='javascript:player.playVideo(); return true;'>Play</a> 

等等