JS YouTube API Chromeless Player

JS YouTube API Chromeless Player

本文关键字：Player Chromeless API YouTube JS      更新时间：2023-09-26

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

你可以按照文档调用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

因此，我们将这些 playerVar 添加到函数中，将上面的函数替换为以下内容：

  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()

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

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

等。

相关文章：