介绍
ngx-y2-player 是一个基于 Angular 框架的 Youtube 播放器组件，可以方便的让你在 Angular 应用中嵌入 Youtube 视频并进行控制。在本文章中，我们将详细介绍 ngx-y2-player 的使用方法。
安装
你需要先在你的 Angular 应用中安装 ngx-y2-player 在命令行中输入下面命令进行安装：
npm install ngx-y2-player --save
引入
安装 ngx-y2-player 后，在 app.module.ts 文件中导入 Y2PlayerModule，就可以在你的应用中使用 ngx-y2-player 组件了：
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - -------------- - ---- ---------------- ----------- ------------- - ------------ -- -------- - -------------- -------------- -- -- -------------- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -展开代码
使用
ngx-y2-player 提供了一系列指令和属性，让你可以自定义你的播放器样式和行为。
组件
在你的 HTML 模板中，你可以使用 ngx-y2-player 组件，为它设置视频 ID 和相关属性。下面是一个简单的 ngx-y2-player 示例：
<ngx-y2-player [videoid]="VIDEO_ID" [height]="HEIGHT" [width]="WIDTH"></ngx-y2-player>
在上面的代码中，我们为 ngx-y2-player 组件设置了三个属性：
videoid: 视频的 ID，你可以在Youtube视频 URL 中得到它。height: 播放器的高度（单位：像素）width: 播放器的宽度（单位：像素）
指令
ngx-y2-player 同时也支持多个指令，让你可以针对播放器进行更加个性化的设置。下面是一些常用的指令：
y2Player
y2Player 指令可以让你访问播放器组件中的 player 对象。player 对象是 Youtube API 中的一个对象，它提供了一系列方法，让你可以控制播放器的行为。下面是使用 y2Player 指令的一个示例：
<ngx-y2-player #player [videoid]="VIDEO_ID" [height]="HEIGHT" [width]="WIDTH" y2Player></ngx-y2-player>
在上面的代码中，我们给 ngx-y2-player 组件加上了 y2Player 指令，并且添加了一个本地变量 #player，这个变量将用于访问 player 对象。在组件中，我们可以通过 @ViewChild() 装饰器来访问这个变量:
-- -------------------- ---- ------- ------ - ---------- --------- - ---- ---------------- ------ - ----------------- - ---- ---------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - -------------------- ------- ------------------ ----------------- - -- ----------- ------ -- -------------------------------- - -展开代码
y2Autoplay
y2Autoplay 指令可以让你自动播放视频，只需要把这个指令加在 ngx-y2-player 组件上，并且为 videoid 属性设置一个视频 ID 就可以实现自动播放了:
<ngx-y2-player [videoid]="VIDEO_ID" [height]="HEIGHT" [width]="WIDTH" y2Autoplay></ngx-y2-player>
y2DisableKeyboard
y2DisableKeyboard 指令可以禁用键盘控制播放器，这个指令比较简单，只需要在 ngx-y2-player 组件上添加 y2DisableKeyboard 就可以了：
<ngx-y2-player [videoid]="VIDEO_ID" [height]="HEIGHT" [width]="WIDTH" y2DisableKeyboard></ngx-y2-player>
除了上面介绍的指令之外，ngx-y2-player 还提供了其他很多可用指令。你可以查看官方文档了解更多信息。
总结
使用 ngx-y2-player 可以让你在 Angular 应用中非常方便的嵌入 Youtube 视频并进行控制。通过本教程的学习，你已经学会了如何在你的应用中使用 ngx-y2-player 组件，并且理解了如何使用指令和属性来自定义播放器。相信在以后的开发工作中，你会更加容易的掌握和使用 ngx-y2-player 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115824
