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>

等

JS YouTube API Chromeless Player

1 个答案: