前言
Youtube 的视频是我们网站常用的一种呈现形式，通过 angular2-youtube 这个 npm 包，我们可以轻松地将 Youtube 视频嵌入到我们的应用程序中。 angular2-youtube 提供了在 Angular2+ 中加载 YouTube 视频的基础设施，并且方便快捷，让我们可以专注于自己的开发。
开始使用 angular2-youtube
安装 angular2-youtube 包
安装 angular2-youtube 。可以通过下面的命令进行安装操作：
npm install --save angular2-youtube
引入和配置模块
安装已完成，接下来我们在模块中引入和配置 angular2-youtube 模块。打开 app.module.ts 文件，若需要在 directive 中使用，则需要在 declarations 中添加，若需要在 service 中使用，则需要在 providers 中添加。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ------------------- - ---- -------------------------- ----------- ------------- - ------------ -- -------- - -------------- ------------------- -- ---------- --- ---------- - ------------ - -- ------ ----- --------- - -
在组件中使用 angular2-youtube
在你需要使用视频的组件 HTML 上，按照官方的示例，使用带有视频 ID 的 youtube-player 元素，例如：
<!-- component.html -->
<youtube-player
videoId="M7lc1UVf-VE"
[suggestedQuality]="highres"
[width]="640"
[height]="360"
[playerVars]="{autoplay: 1, cc_load_policy: 0, showinfo: 0, rel: 0, fs: 0}"
></youtube-player> 完整的可供选择的选项参数及它们的缺省值都在 angular2-youtube-player 的 github 页面里。
播放视频
现在此应用程序使用了 angular2-youtube，视频已经嵌入进来了，接下来是调用播放视频的方法，我们可以使用视图上的 javascript 片段调用播放器的方法。
-- -------------------- ---- ------- ------ - ---------- ---- ---------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ------- ---------- ------ --- ------ - -------------- ------ ------- ------ - ---- ------ ------ ------ - ---- ------ ---------- - - ------------- ----- --------------- -- --------- -- ------ ------ --------------- -- ---- -- --------- - -- ------------- - - ------------------ - ----------- - ------- ------------------- ---------- -------- - -------------------- - ------------------- ------- ------------ - -
这些方法提供了一些事件，例如当视频被播放、暂停、停止、播放列表等时，都可以触发相应的事件。
总结
本教程向大家介绍了如何初步使用 angular2-youtube 这个 npm 包。它提供了加载 YouTube 视频的简便方法，如果你是一个 Angular 开发工程师，那么 angular2-youtube 是一个不错的选择，相信它可以提升你的开发效率和用户体验。希望你们能够喜欢和使用这个工具，在后续的学习和工作中也能够友善地使用它。
参考
- angular2-youtube 包源代码：https://github.com/orizens/angular2-youtube
- angular2-youtube 的官方文档：https://www.npmjs.com/package/angular2-youtube-player
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005604981e8991b448de742