JS YouTube API Chromeless Player

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> 

等等