「簡單實戰」YouTube IFrame Player API 的使用

時間 2019-11-08

標籤簡單實戰 iframe player api 使用欄目 HTML 简体版

原文原文鏈接

前言

業務需求須要在本身的網頁上嵌入油管（ youtube ）上的視頻，因此去踩了油管 IFrame Player API 的坑。其實和大多數國內視頻網站的 ifram Embed 方式是類似，好比說愛奇藝、騰訊視頻、優酷等。在這些視頻網站上你會發現都有分享功能，其中有一項就是通用代碼。油管提供的 IFrame Player API 也是相似的方案。javascript

0. 網頁中基本使用

要使用 IFrame Player API 須要瀏覽器支持 postMessage 功能。

油管的文檔直接放了示例代碼：php

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <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 。html

1. 基本參數

油管的 IFrame Player API 可自定義的程度並不高，可能也是出於要保護對自家產品利益的目的，視頻播放結束後推薦列表之類的是去不掉的。

參數名	說明
`autoplay`	取值0和1，自動播放。默認爲0。（我本身試了好像不生效，Stack Overflow 上有人說改了）
`cc_lang_pref`	顯示字幕的默認語言，取值爲 ISO 639-1雙字母語言代碼
`cc_load_policy`	值：`1`。默認根據用戶偏好設置肯定的。設爲`1`會使系統在默認狀況下顯示字幕，即便在用戶關閉字幕。
`color`	進度條顏色，只有兩種可選 `red` 和 `white`，設置成 `white` 時，`modestbranding` 無效。
`modestbranding`	是否顯示 `YouTube` 徽標。
`controls`	是否顯示播放器控件 0 不顯示，1 顯示，默認 1。
`disablekb`	是否容許鍵盤控制，0 容許，1 不容許，默認 0。
`enablejsapi`	是否容許經過 `IFrame API` 控制播放器。0 不容許，1 容許，默認 0。
`end`	播放多少秒後中止。（正整數）
`fs`	是否顯示全屏按鈕，0 不顯示，1 顯示，默認 1。
`hl`	播放器多語言。取值爲 [ISO 639-1雙字母語言代碼。
`iv_load_policy`	顯示視頻註釋，而設置爲`3`不會顯示視頻註釋。默認值爲`1`。（我沒發現默認註釋是啥玩意）
`listType`	有效的參數值`playlist`，`search`和`user_uploads`。
`list`	結合 `listType` 肯定播放列表的內容。
`loop`	循環播放視頻，0 不循環，1循環。默認值爲 0。單視頻時須要在`playlist`放一個相同`videoId`
`origin`	大體就是安全域名吧。`enablejsapi`爲 1 的時候，這個參數是當前域名。
`playlist`	要播放的視頻列表，以逗號分隔的視頻ID。
`playsinline`	控制在 `iOS` 全屏播放。0 全屏，1 不全屏。
`start`	從多少秒開始播放。（正整數）
`widget_referrer`	看了半天沒看明白的 `api` 。(大體好像是表示來源……)
`rel`	播放結束後顯示相關視頻。0 不顯示，1 顯示。（這個`api`已經修改成0推薦同頻道，1推薦相關）
`showinfo` （棄用）	是否顯示視頻標題和上傳者等信息。0 不顯示，1 顯示。

在 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 其實對應的就是相應的鉤子函數。vue

hook	做用
`onReady`	在播放器準備就緒後觸發。
`onStateChange`	視頻狀態發生改變時會觸發。
`onPlaybackQualityChange`	視頻播放質量發生變化時觸發。
`onPlaybackRateChange`	視頻播放速率發生變化時觸發。
`onError`	播放器中發生錯誤時觸發。
`onApiChange`	播放器已加載（或卸載）具備公開 `API` 方法的模塊觸發。

使用方法就像案例同樣。java

3. `YT.Player` 對象方法（幾個經常使用的）

方法名	做用
`playVideo()`	播放
`pauseVideo()`	暫停
`stopVideo()`	中止
`seekTo(seconds:Number, allowSeekAhead:Boolean)`	跳轉到視頻多少秒。`seconds`要跳轉的秒數，`allowSeekAhead` 當秒數已經超出已緩衝時間，是否發出請求
`nextVideo()`	播放下一個視頻
`previousVideo()`	播放上一個視頻
`playVideoAt(index:Number)`	播放指定視頻（`index` 必傳，爲視頻列表下表）
`mute()`	設置爲靜音
`unMute()`	取消爲靜音
`isMuted()`	獲取當前是否靜音
`setVolume(volume:Number)`	設置播放器的當前音量
`getVolume()`	獲取播放器的當前音量
`setSize(width:Number, height:Number)`	設置視頻大小（單位：像素）
`getPlayerState()`	返回播放器的狀態
`getCurrentTime()`	返回視頻已播放的時長
`getPlaybackQuality()`	當前視頻的實際質量
`setPlaybackQuality(suggestedQuality:String)`	設置當前視頻的建議質量。`suggestedQuality` 參數的值能夠爲`small`、`medium`、`large`、`hd720`、`hd1080`、`highres` 或 `default`。
`getDuration()`	返回當前正在播放的視頻的時長
`getVideoUrl()`	返回當前已加載/正在播放的視頻的 `YouTube.com` 網址
`getVideoEmbedCode()`	返回當前已加載/正在播放的視頻的嵌入代碼。
`getPlaylist()`	按當前順序返回播放列表中視頻ID的數組。
`getPlaylistIndex()`	返回當前正在播放的播放列表中視頻的索引。