JavaScript Library – YouTube Embedded、YouTube Player API、YouTube Data API

YouTube Embed Video

它和 Google Maps Embed 類似，是通過 iframe 完成的。

<iframe
  width="800"
  style="aspect-ratio: 16 / 9"
  src="https://www.youtube.com/embed/vEZCoe9GJFk"
  title="粉色海洋"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

地址欄上面 v=code 就是每個 video 的 unique key 了

效果

它可以做一些配置, 參考: Supported parameters

比如自動播放

src="https://www.youtube.com/embed/vEZCoe9GJFk?autoplay=1"

注意：autoplay 在手機是不 work 的哦，哪怕是用戶觸發點擊事件後你才 append iframe 依然是不 work 的。只有通過 Player API 的 event onReady 才能實現手機的 autiplay（或者說那根本就不叫 autoplay 只是一種 manual call api start video 的方式而已）

還有一個常用的是 rel，默認是 1，作用是在 pause 和 finished 後出現 related 的 videos（包括其它 channel 的 videos 哦）

refer：YouTube – hide "more videos" within youtube iframe when stop video

設定成 0 以後，它依然會出現 video，但是隻侷限在同一個的 channel 內。

YouTube Player API

參考：IFrame Player API

它是一個 JS 的封裝，底層依然是用上面的 iframe，只是多了一個交互溝通。iframe 溝通用的是 postMessage。

主頁面是無法監聽 iframe 裏面的事件的，所以 parent child 必須有溝通邏輯，這個也只能是 YouTube 封裝才辦得到了。

所以，如果有想監聽用戶的交互行爲就必須使用 Player API 了。比如監聽用戶按 pause 之類的。

引入 @types

yarn add @types/youtube --dev

注：不是 @types/youtube-player 哦。別搞錯了。

HTML 和 JS 和 Google Maps JS API 幾乎是同一種手法。

HTML

<body>
  <div id="player" style="width: 800px; aspect-ratio: 16 / 9"></div>
</body>

JavaScript

定義全局 init 方法。這個方法名是規定的。不可自定義哦。

declare global {
  interface Window {
    onYouTubeIframeAPIReady: () => void;
  }
}

然後 append 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);

上面這段是抄來的，最好是是加上 defer 插入到 header。

最後是調用實例化 player。

export function onYouTubeIframeAPIReady() {
  const player = new YT.Player("player", {
    videoId: "wwUN9NWXcnY",
    playerVars: {
      playsinline: 1,
      autoplay: 1,
    },
    events: {
      onReady: () => {
        console.log("ready");
      },
      onStateChange: (e) => {
        console.log("e", e);
      },
    },
  });
  console.log("player", player);
}
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;

Angular YouTube Player 封裝

參考 : Angular YouTube Player component

想深入瞭解如何封裝, 可以參考 Angular 源碼

YouTube Data API

建議大家先這 2 篇，基礎我就不再教了。

Google Maps Embed API & JavaScript API（瞭解一下，什麼是 API Keys）

Google – Reviews（瞭解一下，什麼是 OAuth）

YouTube Data API 可以讓我們通過 API 管理我們的 channel videos，但我個人只是用它來拿 YouTube 上 public videos 的資料而已。（e.g. Title, Duration, Thumbnail 等等）

Setup

1. enable YouTube Data API

2. create API Keys

由於這一次我是用 C# 去 request 這個 YouTube Data API，所以項目發佈後 Key restrictions 選的是 IP addresses（或者選 None，但需要把 Key 藏好，比如放 Azure Key Vault）

平時是 JS 發 request 就選 Websites，本地測試時可以選 None。

3. setup OAuth

完整的 scopes 看這裏。

我的需求只是查看 video 資料，有 scope https://www.googleapis.com/auth/youtube.readonly 就夠了。

Request API

完整 API 文檔看這裏，裏面還有 playground 可以玩，非常方便。

ASP.NET Core code sample

先獲取到 access token（具體怎麼弄，以前教過這裏不重複）

var apiKey = "api key";
var videoId = "youtube video code from url query param v={code}";
var accessToken = "access token";

var httpRequestMessage = new HttpRequestMessage
{
    RequestUri = new Uri($"https://www.googleapis.com/youtube/v3/videos?id={videoId}&key={apiKey}&part=snippet,contentDetails"),
    Method = HttpMethod.Get,
    Headers = {
        { "Accept", "application/json; charset=utf-8" },
        { "Authorization", $"Bearer {accessToken}" }
    }
};

var httpClient = httpClientFactory.CreateClient();
var response = await httpClient.SendAsync(httpRequestMessage);
if (response.IsSuccessStatusCode)
{
    var json = await response.Content.ReadAsStringAsync();
}

Response JSON

{
  "kind": "youtube#videoListResponse",
  "etag": "gzfPTptt6zY7LjJygAHxPK33BaM",
  "items": [
    {
      "kind": "youtube#video",
      "etag": "y4iRPPo9g6w--B6GYr0Nck4h1hA",
      "id": "5XK2C9w6oVk",
      "snippet": {
        "publishedAt": "2012-10-17T06:58:21Z",
        "channelId": "UCKUlsqazP-4QmxdEtUPlxOA",
        "title": "周杰倫 Jay Chou【愛在西元前 Love before BC】Official MV",
        "description": "周杰倫 愛在西元前 \n曲: 周杰倫 / 詞: 方文山\niTunes: https://itunes.apple.com/tw/album/ai-zai-xi-yuan-qian/id535739206?i=535739349\n\nJay Chou \"Love before BC\" (Ai Zai Xi Yuan Qian)\nSong & Lyrics: Jay Chou\nRecorded in Jay Chou's Fantasy album, released in 2001\n\n【上海 一九四三 完整MV】http://youtu.be/CcfnZOJpbM4\n【忍者 完整MV】http://youtu.be/55yJh4SHUBY\n【爸 我回來了 完整MV】http://youtu.be/nhyT8HDT4lg\n【威廉古堡 完整MV】http://youtu.be/lCzWCxVAkfc\n【開不了口 完整MV】http://youtu.be/H7hpK6cm-6k\n【對不起 完整MV】http://youtu.be/N2DkKFxijv0\n【雙截棍 完整MV】http://youtu.be/OR-0wptI_u0\n【簡單愛 完整MV】http://youtu.be/Y4xCVlyCvX4\n【安靜 完整MV】http://youtu.be/1hI-7vj2FhE\n【鍋牛 完整MV】http://youtu.be/H7pOrQEnc3c\n【你比從前快樂 完整MV】http://youtu.be/X_XqvQJi_6E\n【世界末日 完整MV】http://youtu.be/NDFULbHgL6E\n\n-----------------------------------------------------------------------------------------\n【Connection with Jay Chou 周杰倫相關網頁】\n◎ Jay Chou FACEBOOK(臉書): http://www.facebook.com/jay\n◎ Jay Chou YOUTUBE(視頻): http://www.youtube.com/JVRmuzic\n◎ JVR Music Official Site(傑威爾音樂): http://www.jvrmusic.com\n◎ iTunes(數位): https://itunes.apple.com/tw/album/shi-er-xin-zuo/id587743633?l=zh\n-----------------------------------------------------------------------------------------",
        "thumbnails": {
          "default": {
            "url": "https://i.ytimg.com/vi/5XK2C9w6oVk/default.jpg",
            "width": 120,
            "height": 90
          },
          "medium": {
            "url": "https://i.ytimg.com/vi/5XK2C9w6oVk/mqdefault.jpg",
            "width": 320,
            "height": 180
          },
          "high": {
            "url": "https://i.ytimg.com/vi/5XK2C9w6oVk/hqdefault.jpg",
            "width": 480,
            "height": 360
          },
          "standard": {
            "url": "https://i.ytimg.com/vi/5XK2C9w6oVk/sddefault.jpg",
            "width": 640,
            "height": 480
          }
        },
        "channelTitle": "周杰倫 Jay Chou",
        "tags": [
          "yt:crop=16:9",
          "周杰倫",
          "愛在西元前",
          "開不了口",
          "威廉古堡",
          "星晴",
          "mv",
          "周杰倫同名專輯",
          "徐若瑄",
          "Vivian",
          "官方",
          "完整版",
          "高清",
          "亞洲天王",
          "傑威爾",
          "流行音樂",
          "臺灣",
          "jay",
          "chou",
          "Istanbul",
          "Yi",
          "Si",
          "Tan",
          "Bao",
          "HD",
          "official",
          "pop",
          "jvr",
          "music",
          "周杰倫",
          "周傑倫",
          "琴傷",
          "驚歎號",
          "亞洲天王",
          "傑威爾",
          "流行音樂",
          "臺灣",
          "周杰倫同名專輯",
          "伊斯坦堡",
          "娘子",
          "完美主義",
          "簡單愛",
          "開不了口",
          "愛在公元前"
        ],
        "categoryId": "10",
        "liveBroadcastContent": "none",
        "localized": {
          "title": "周杰倫 Jay Chou【愛在西元前 Love before BC】Official MV",
          "description": "周杰倫 愛在西元前 \n曲: 周杰倫 / 詞: 方文山\niTunes: https://itunes.apple.com/tw/album/ai-zai-xi-yuan-qian/id535739206?i=535739349\n\nJay Chou \"Love before BC\" (Ai Zai Xi Yuan Qian)\nSong & Lyrics: Jay Chou\nRecorded in Jay Chou's Fantasy album, released in 2001\n\n【上海 一九四三 完整MV】http://youtu.be/CcfnZOJpbM4\n【忍者 完整MV】http://youtu.be/55yJh4SHUBY\n【爸 我回來了 完整MV】http://youtu.be/nhyT8HDT4lg\n【威廉古堡 完整MV】http://youtu.be/lCzWCxVAkfc\n【開不了口 完整MV】http://youtu.be/H7hpK6cm-6k\n【對不起 完整MV】http://youtu.be/N2DkKFxijv0\n【雙截棍 完整MV】http://youtu.be/OR-0wptI_u0\n【簡單愛 完整MV】http://youtu.be/Y4xCVlyCvX4\n【安靜 完整MV】http://youtu.be/1hI-7vj2FhE\n【鍋牛 完整MV】http://youtu.be/H7pOrQEnc3c\n【你比從前快樂 完整MV】http://youtu.be/X_XqvQJi_6E\n【世界末日 完整MV】http://youtu.be/NDFULbHgL6E\n\n-----------------------------------------------------------------------------------------\n【Connection with Jay Chou 周杰倫相關網頁】\n◎ Jay Chou FACEBOOK(臉書): http://www.facebook.com/jay\n◎ Jay Chou YOUTUBE(視頻): http://www.youtube.com/JVRmuzic\n◎ JVR Music Official Site(傑威爾音樂): http://www.jvrmusic.com\n◎ iTunes(數位): https://itunes.apple.com/tw/album/shi-er-xin-zuo/id587743633?l=zh\n-----------------------------------------------------------------------------------------"
        }
      },
      "contentDetails": {
        "duration": "PT3M59S",
        "dimension": "2d",
        "definition": "sd",
        "caption": "false",
        "licensedContent": true,
        "contentRating": {},
        "projection": "rectangular"
      }
    }
  ],
  "pageInfo": {
    "totalResults": 1,
    "resultsPerPage": 1
  }
}

View Code

我需要的資料在這些位置

var title = items[0].snippet.title;
var thumbnail = items[0].snippet.standard.url;
var thumbnailHD = items[0].snippet.maxres.url;
var duration = items[0].contentDetails.duration; // format is PT3M59S

JavaScript Library – YouTube Embedded、YouTube Player API、YouTube Data API

YouTube Embed Video

YouTube Player API

引入 @types

HTML

JavaScript

Angular YouTube Player 封裝

YouTube Data API

Setup

Request API

Response JSON

Angular Material 17+ 高級教程 – Observers

CSS & JS Effect – sticky horizontal scrollbar

HTML & CSS – Styling Scrollbar

CSS & JS Effect – 用 wheel 模擬 scroll

Angular 17+ 高級教程 – Angular 的侷限の Query Elements

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結