YouTube IFrame Player API 的使用

﹏ヽ暗。殇╰゛Y 2023-06-12 09:43 11阅读 0赞

油管的文档直接放了示例代码：

<!DOCTYPE html>
    <html>
      <body>
        
        <div id="player"></div>
    
        <script>
          // 2. This code loads the IFrame Player API code asynchronously.
          var tag = document.createElement('script');
    
          tag.src = "https://www.youtube.com/iframe_api";
          var firstScriptTag = document.getElementsByTagName('script')[0];
          firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
          // 3. This function creates an <iframe> (and YouTube player)
          //    after the API code downloads.
          var player;
          function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
              height: '360',
              width: '640',
              videoId: 'M7lc1UVf-VE',
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
            });
          }
    
          // 4. The API will call this function when the video player is ready.
          function onPlayerReady(event) {
            event.target.playVideo();
          }
    
          // 5. The API calls this function when the player's state changes.
          //    The function indicates that when playing a video (state=1),
          //    the player should play for six seconds and then stop.
          var done = false;
          function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING && !done) {
              setTimeout(stopVideo, 6000);
              done = true;
            }
          }
          function stopVideo() {
            player.stopVideo();
          }
        </script>
      </body>
    </html>

直接给出了注释，很清晰明了。当然 `https://www.youtube.com/iframe_api` 也是可以直接用 `script` 标签直接引入。其中 `videoId` 可以在油管上找到。我们随便找一个视频就可以在地址栏看到 `https://www.youtube.com/watch?v=PkZNo7MFNFg` 后面的 `v=PkZNo7MFNFg` 这个就是 `videoId` 。

### 1. 基本参数 ###

> 油管的  `IFrame Player API` 可自定义的程度并不高，可能也是出于要保护对自家产品利益的目的，视频播放结束后推荐列表之类的是去不掉的。

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>autoplay</code></td> 
   <td>取值0和1，自动播放。默认为0。（我自己试了好像不生效，<a href="https://stackoverflow.com/questions/40685142/youtube-autoplay-not-working" rel="nofollow">Stack Overflow</a>&nbsp;上有人说改了）</td> 
  </tr> 
  <tr> 
   <td><code>cc_lang_pref</code></td> 
   <td>显示字幕的默认语言，取值为&nbsp;<a href="http://www.loc.gov/standards/iso639-2/php/code_list.php" rel="nofollow">ISO 639-1双字母语言代码</a></td> 
  </tr> 
  <tr> 
   <td><code>cc_load_policy</code></td> 
   <td>值：<code>1</code>。默认根据用户偏好设置确定的。设为<code>1</code>会使系统在默认情况下显示字幕，即使在用户关闭字幕。</td> 
  </tr> 
  <tr> 
   <td><code>color</code></td> 
   <td>进度条颜色，只有两种可选&nbsp;<code>red</code>&nbsp;和&nbsp;<code>white</code>，设置成&nbsp;<code>white</code>&nbsp;时，<code>modestbranding</code>&nbsp;无效。</td> 
  </tr> 
  <tr> 
   <td><code>modestbranding</code></td> 
   <td>是否显示&nbsp;<code>YouTube</code>&nbsp;徽标。</td> 
  </tr> 
  <tr> 
   <td><code>controls</code></td> 
   <td>是否显示播放器控件 0 不显示，1 显示，默认 1。</td> 
  </tr> 
  <tr> 
   <td><code>disablekb</code></td> 
   <td>是否允许键盘控制，0 允许，1 不允许，默认 0。</td> 
  </tr> 
  <tr> 
   <td><code>enablejsapi</code></td> 
   <td>是否允许通过&nbsp;<code>IFrame API</code>&nbsp;控制播放器。0 不允许，1 允许，默认 0。</td> 
  </tr> 
  <tr> 
   <td><code>end</code></td> 
   <td>播放多少秒后停止。（正整数）</td> 
  </tr> 
  <tr> 
   <td><code>fs</code></td> 
   <td>是否显示全屏按钮，0 不显示，1 显示，默认 1。</td> 
  </tr> 
  <tr> 
   <td><code>hl</code></td> 
   <td>播放器多语言。取值为 [ISO 639-1双字母语言代码。</td> 
  </tr> 
  <tr> 
   <td><code>iv_load_policy</code></td> 
   <td>显示视频注释，而设置为<code>3</code>不会显示视频注释。默认值为<code>1</code>。（我没发现默认注释是啥玩意）</td> 
  </tr> 
  <tr> 
   <td><code>listType</code></td> 
   <td>有效的参数值<code>playlist</code>，<code>search</code>和<code>user_uploads</code>。</td> 
  </tr> 
  <tr> 
   <td><code>list</code></td> 
   <td>结合&nbsp;<code>listType</code>&nbsp;确定播放列表的内容。</td> 
  </tr> 
  <tr> 
   <td><code>loop</code></td> 
   <td>循环播放视频，0 不循环，1循环。默认值为 0。单视频时需要在<code>playlist</code>放一个相同<code>videoId</code></td> 
  </tr> 
  <tr> 
   <td><code>origin</code></td> 
   <td>大致就是安全域名吧。<code>enablejsapi</code>为 1 的时候，这个参数是当前域名。</td> 
  </tr> 
  <tr> 
   <td><code>playlist</code></td> 
   <td>要播放的视频列表，以逗号分隔的视频ID。</td> 
  </tr> 
  <tr> 
   <td><code>playsinline</code></td> 
   <td>控制在&nbsp;<code>iOS</code>&nbsp;全屏播放。0 全屏，1 不全屏。</td> 
  </tr> 
  <tr> 
   <td><code>start</code></td> 
   <td>从多少秒开始播放。（正整数）</td> 
  </tr> 
  <tr> 
   <td><code>widget_referrer</code></td> 
   <td>看了半天没看明白的&nbsp;<code>api</code>&nbsp;。(大致好像是表示来源……)</td> 
  </tr> 
  <tr> 
   <td><code>rel</code></td> 
   <td>播放结束后显示相关视频。0 不显示，1 显示。（这个<code>api</code>已经修改为0推荐同频道，1推荐相关）</td> 
  </tr> 
  <tr> 
   <td><code>showinfo</code>&nbsp;（弃用）</td> 
   <td>是否显示视频标题和上传者等信息。0 不显示，1 显示。</td> 
  </tr> 
 </tbody> 
</table>

在 `onYouTubeIframeAPIReady` 方法中直接传参就可以了，如下：

function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '360',
        width: '640',
        videoId: 'PkZNo7MFNFg',
        playerVars: {
          enablejsapi: 1,
          autoplay: 1,
          controls: 0,
          loop: 1,
          cc_lang_pref: 'en',
          iv_load_policy: 1,        
        },
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }

### 2. 钩子函数（hook） ###

从上面的代码案例大家其实也看到了，在 `events` 里面有 `onReady`，`onStateChange` 其实对应的就是相应的钩子函数。

<table> 
 <thead> 
  <tr> 
   <th>hook</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>onReady</code></td> 
   <td>在播放器准备就绪后触发。</td> 
  </tr> 
  <tr> 
   <td><code>onStateChange</code></td> 
   <td>视频状态发生改变时会触发。</td> 
  </tr> 
  <tr> 
   <td><code>onPlaybackQualityChange</code></td> 
   <td>视频播放质量发生变化时触发。</td> 
  </tr> 
  <tr> 
   <td><code>onPlaybackRateChange</code></td> 
   <td>视频播放速率发生变化时触发。</td> 
  </tr> 
  <tr> 
   <td><code>onError</code></td> 
   <td>播放器中发生错误时触发。</td> 
  </tr> 
  <tr> 
   <td><code>onApiChange</code></td> 
   <td>播放器已加载（或卸载）具有公开&nbsp;<code>API</code>&nbsp;方法的模块触发。</td> 
  </tr> 
 </tbody> 
</table>

使用方法就像案例一样。

### 3. `YT.Player` 对象方法（几个常用的） ###

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>playVideo()</code></td> 
   <td>播放</td> 
  </tr> 
  <tr> 
   <td><code>pauseVideo()</code></td> 
   <td>暂停</td> 
  </tr> 
  <tr> 
   <td><code>stopVideo()</code></td> 
   <td>停止</td> 
  </tr> 
  <tr> 
   <td><code>seekTo(seconds:Number, allowSeekAhead:Boolean)</code></td> 
   <td>跳转到视频多少秒。<code>seconds</code>要跳转的秒数，<code>allowSeekAhead</code>&nbsp;当秒数已经超出已缓冲时间，是否发出请求</td> 
  </tr> 
  <tr> 
   <td><code>nextVideo()</code></td> 
   <td>播放下一个视频</td> 
  </tr> 
  <tr> 
   <td><code>previousVideo()</code></td> 
   <td>播放上一个视频</td> 
  </tr> 
  <tr> 
   <td><code>playVideoAt(index:Number)</code></td> 
   <td>播放指定视频（<code>index</code>&nbsp;必传，为视频列表下表）</td> 
  </tr> 
  <tr> 
   <td><code>mute()</code></td> 
   <td>设置为静音</td> 
  </tr> 
  <tr> 
   <td><code>unMute()</code></td> 
   <td>取消为静音</td> 
  </tr> 
  <tr> 
   <td><code>isMuted()</code></td> 
   <td>获取当前是否静音</td> 
  </tr> 
  <tr> 
   <td><code>setVolume(volume:Number)</code></td> 
   <td>设置播放器的当前音量</td> 
  </tr> 
  <tr> 
   <td><code>getVolume()</code></td> 
   <td>获取播放器的当前音量</td> 
  </tr> 
  <tr> 
   <td><code>setSize(width:Number, height:Number)</code></td> 
   <td>设置视频大小（单位：像素）</td> 
  </tr> 
  <tr> 
   <td><code>getPlayerState()</code></td> 
   <td>返回播放器的状态</td> 
  </tr> 
  <tr> 
   <td><code>getCurrentTime()</code></td> 
   <td>返回视频已播放的时长</td> 
  </tr> 
  <tr> 
   <td><code>getPlaybackQuality()</code></td> 
   <td>当前视频的实际质量</td> 
  </tr> 
  <tr> 
   <td><code>setPlaybackQuality(suggestedQuality:String)</code></td> 
   <td>设置当前视频的建议质量。<code>suggestedQuality</code>&nbsp;参数的值可以为<code>small</code>、<code>medium</code>、<code>large</code>、<code>hd720</code>、<code>hd1080</code>、<code>highres</code>&nbsp;或&nbsp;<code>default</code>。</td> 
  </tr> 
  <tr> 
   <td><code>getDuration()</code></td> 
   <td>返回当前正在播放的视频的时长</td> 
  </tr> 
  <tr> 
   <td><code>getVideoUrl()</code></td> 
   <td>返回当前已加载/正在播放的视频的&nbsp;<code>YouTube.com</code>&nbsp;网址</td> 
  </tr> 
  <tr> 
   <td><code>getVideoEmbedCode()</code></td> 
   <td>返回当前已加载/正在播放的视频的嵌入代码。</td> 
  </tr> 
  <tr> 
   <td><code>getPlaylist()</code></td> 
   <td>按当前顺序返回播放列表中视频ID的数组。</td> 
  </tr> 
  <tr> 
   <td><code>getPlaylistIndex()</code></td> 
   <td>返回当前正在播放的播放列表中视频的索引。</td> 
  </tr> 
 </tbody> 
</table>

使用方法我想不用说，大家都知道怎么用啦。`player.playVideo()`