新的 Angular YouTube Player 组件！

轻松将 YouTube 视频嵌入您的 Angular 应用程序中！

TL;DR; —

Angular 世界里又多了一个超酷的新组件 🌎！有了它，你可以比以往更轻松地将 YouTube 视频添加到你的 Angular 应用。立即安装并试用吧：

npm i @angular/youtube-player

要了解更多详细信息并了解完整的 API，请继续阅读！📚

Angular YouTube Player 组件🎉：

Angular 最近最令人兴奋的变化之一（ Ivy除外）是将angular/material存储库重命名为angular/component✨。此重命名旨在表明存储库不仅仅包含Angular Material库！Angular Components 存储库已经包含Angular Component Dev Kit，它将成为构建新的高质量 Angular 组件并与社区共享的地方。随着 Angular v9 第一个候选版本的发布，我们首次看到了这些新组件！
其中一个全新组件是。该组件是嵌入 Youtube 播放器 API 的@angular/youtube-player薄包装器。让我们看看它是什么样子的：

目前文档有点少，所以让我们深入研究代码，看看它是如何工作的！首先，我们需要导入并包含YouTubePlayerModule：

这使我们能够访问该<youtube-player>组件！

非常简单！

Angular YouTube 播放器 API：

不幸的是，完整的 API 文档还没有写出来。幸运的是，我们可以查看组件的源代码，看看能发现什么……

⚠️警告！⚠️

YouTube 播放器组件仍处于预发布阶段，因此此 API 可能会发生变化！

输入：

• [videoId]: string— 要渲染的 YouTube 视频 ID。它是 YouTube 网址末尾的小哈希值。例如，如果您的视频位于https://www.youtube.com/watch?v=moSFlvxnbgk，那么您的 videoId 就是 moSFlvxnbgk。
• [height]: number— 视频播放器的高度
• [width]: number— 视频播放器的宽度
• [startSeconds]: number— 玩家应该开始游戏的时刻
• [endSeconds]: number— 玩家应该停止游戏的时刻
• [suggestedQuality]: SuggestedQuality—建议的玩家品质。可采用以下值：'default'、'small'、'medium'、'large'、、 和'hd720''hd1080''highres'
• [showBeforeIframeApiLoads]: boolean—iframe无论页面上 API 的状态如何，都会尝试加载。如果您不想onYouTubeIframeAPIReady在全局设置中设置该字段，请将其设置为 truewindow

输出：

每个输出都映射到从 YouTube JS API 触发的事件。

• (ready): PlayerEvent—每当玩家完成加载并准备开始接收 API 调用时触发。
• (stateChange): OnStateChangeEvent—每当玩家状态改变时触发
• (error): OnErrorEvent—如果播放器发生错误则触发
• (apiChange): PlayerEvent— 触发以指示播放器已加载（或卸载）具有公开 API 方法的模块
• (playbackQualityChange): OnPlaybackQualityChangeEvent—视频播放质量发生变化时触发
• (playbackRateChange): OnPlaybackRateChangeEvent—每当视频播放速率发生变化时触发

以下是使用该组件渲染和播放视频的稍微完整的代码片段<youtube-player>：

完结！📼🎈

就是这样！很高兴看到 Angular 团队推出了这些很酷的新组件。这个组件围绕一个非常常见的用例提供了非常清晰的 API。我相信你们一定会想出很棒的使用方法。快来体验一下吧，向Angular Components代码库提交任何 bug，并告诉我你们正在构建什么！
🦄