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

[转帖]使用NMT和pmap解决JVM资源泄漏问题原创

Python实现大麦网抢票的四大关键技术点解析

Python 安装库指令大全

salesforce零基础学习（一百三十八）零碎知识点小总结（十）

一款开源的.NET程序集反编译、编辑和调试神器

关于接口协议，你必须要知道这些！

基于 Milvus + LlamaIndex 实现高级 RAG

【2024-05-21】以茶会友

Angular Material 17+ 高級教程 – CDK Table

Angular Material 17+ 高級教程 – Material Tooltip

Angular Material 17+ 高級教程 – Observers

CSS & JS Effect – sticky horizontal scrollbar

HTML & CSS – Styling Scrollbar

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

linux以太網驅動總結