YouTube Embed Video

参考: Embed videos & playlists

它和 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 就够了。

API Keys 和 OAuth 都需要要吗？

其实不需要，两个用其中一个就可以了。

像我只是想要拿 public video information，只需要 API Keys 就足够了。

但如果你是要操作特定的 channel 比如 manage video 等等，那才需要 OAuth。还有，倘若用了 OAuth 那就不需要再放 API Keys 了。

OAuth 可以替代 API Keys，但 API Keys 则不可以替代 OAuth 哦。

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

  }

}

我需要的资料在这些位置

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的更多相关文章

  1. 特大喜讯，View and Data API 现在支持中文界面了

    大家经常会问到,使用View and Data API怎么做界面的本地化,来显示中文,现在好消息来了,从v1.2.19起,View and Data API开始支持多国语言界面了.你需要制定版本号为v ...

  2. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  3. 【完全开源】百度地图Web service API C#.NET版，带地图显示控件、导航控件、POI查找控件

    目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET.BMap.NET.WindowsForm以及BMap.NET.WinformDemo. BMap.NET 对百度地 ...

  4. 微信调试、API、AJAX的调试 SocketLog

    SocketLog适合Ajax调试和API调试, 举一个常见的场景,用SocketLog来做微信调试, 我们在做微信API开发的时候,如果API有bug,微信只提示"改公众账号暂时无法提供服 ...

  5. Linux Process/Thread Creation、Linux Process Principle、sys_fork、sys_execve、glibc fork/execve api sourcecode

    相关学习资料 linux内核设计与实现+原书第3版.pdf(.3章) 深入linux内核架构(中文版).pdf 深入理解linux内核中文第三版.pdf <独辟蹊径品内核Linux内核源代码导读 ...

  6. A javascript library providing cross-browser, cross-site messaging/method invocation. http://easyxdm.net

    easyXDM - easy Cross-Domain Messaging easyXDM is a Javascript library that enables you as a develope ...

  7. 关于Windows API、CRT和STL二三事

    1.本文编写目的    本文是为了帮助一些人弄清一些关于Windows API, C运行时程序库(CRT), 和标准C++库(STL)的基本概念.有很多人甚至是有经验的程序员在这些概念上是含糊不清的甚 ...

  8. 初识 Javascript.01 -- Javascript基础|输出方式、变量、变量命名规范、数据类型、

    Javascript基础 1 聊聊Javascript 1.1 Javascript的历史来源 94年网景公司   研发出世界上第一款浏览器. 95年 sun公司   java语言诞生 网景公司和su ...

  9. Jquery第二篇【选择器、DOM相关API、事件API】

    前言 前面已经介绍过了Jquery这门语言,其实就是一个javaScript的库-能够简化我们书写的代码-.本博文主要讲解使用Jquery定位HTML控件[定位控件就是获取HTML的标签],使用Jqu ...

  10. JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

随机推荐

  1. Claude是否超过Chatgpt,成为生成式AI的一哥？

    Anthropic 周一推出了 Claude 3 ,据这家初创公司称,该系列中最有能力的 Claude 3 Opus 在各种基准测试中都优于 Openai 的竞争对手 GPT-4 和谷歌的 Gemin ...

  2. 0. 什么是C++

    什么是C++ 是C语言的扩展,有如下的两个特性: 关注性能 与底层硬件紧密结合 对象生命周期精确控制 零成本抽象(Zero-overhead Abstraction) 引入大量利于工程实践的特性 三种 ...

  3. linux 查看crontab任务执行情况

    首先创建一个定时任务,例如: */1 * * * * /usr/bin/curl http://******/admin/Keeperclock/keeper >> /data/wwwro ...

  4. oeasy教您玩转vim - 79 - # 编码格式encoding

    ​ ​ - `help encoding-name` ​ ![图片描述](https://s4.51cto.com/images/blog/202201/03083053_61d243bd719358 ...

  5. 浅谈：HTTP 和 HTTPS 通信原理

    1.HTTP基本概念 1.1 HTTP是什么?  HTTP (超文本传输协议)协议被用于在 Web 浏览器和网站服务器之间传递信息, HTTP 协议以明文方式发送内容,不提供任何方式的数据加密,如果攻 ...

  6. AT_abc182_d 题解

    洛谷链接&Atcoder 链接 本篇题解为此题较简单做法及较少码量,并且码风优良,请放心阅读. 题目简述 从数轴的原点开始向正方向走. 第一次向前走 \(a_1\) 步,第二次向前走 \(a_ ...

  7. LLM-01 大模型 本地部署运行 ChatGLM2-6B-INT4(6GB) 简单上手 环境配置 单机单卡多卡 2070Super8GBx2 打怪升级！

    搬迁说明 之前在 CSDN 上发文章,一直想着努力发一些好的文章出来!这篇文章在 2024-04-17 10:11:55 已在 CSDN 发布 写在前面 其他显卡环境也可以!但是最少要有8GB的显存, ...

  8. 如何平稳地从nacos迁移到r-nacos？

    1. 引言 很多同学了解r-nacos特性后最开始只将r-nacos用于开发测试环境. 经过一段时间的使用后,部分同学有打算生成环境也从nacos迁移到r-nacos. 一些之前使用nacos服务的同 ...

  9. 矩阵的奇异值分解（SVD）及其应用

    奇异值分解(Singular Value Decomposition, SVD)是矩阵的一种分解方法,与特征值分解不同,它可以应用于长方矩阵中,并将其分解成三个特殊矩阵的乘积.此外SVD分解还具有许多 ...

  10. 写写Redis十大类型hyperloglog(基数统计)的常用命令

    hyperloglog处理问题的关键所在和bitmap差不多,都是为了减少对sql的写操作,提高性能,用于基数统计的算法.基数就是一种数据集,用于收集去重后内容的数量.会有0.81%的误差 hyper ...