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