Videogular 是一个基于 AngularJS 的 HTML5 视频播放器，可以很容易地集成到你的 Web 应用程序中。本文将为你提供使用 Videogular 的详细教程。
安装
要在项目中使用 Videogular，你需要先安装它。你可以通过 npm 来进行安装：
npm install videogular -s
用法
在安装 Videogular 后，你需要在应用程序中导入相关模块：
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - ------------ - ---- ------------- -- ---------- ---- ------ - ---------------- - ---- ---------------------- -- ---------- -------- ------ - ------------------- - ---- -------------------------- -- ---------- ----------- ------ - ----------------- - ---- ----------------------- -- ---------- -------- ------ - ----------------- - ---- ----------------------- -- ---------- ------- ------ - ---------------- - ---- ----------------------- -- -- ---- --
然后，你需要在组件中声明使用 Videogular：
-- -------------------- ---- -------
------------
--------- -----------------
--------- -
-----------
------ ------ ----------------- ---------------
------- ------- -------- --- -----------------
--------
-------------
-------------------------------
---------------- -------------------- -----------------------------------
--------------
-------------------------------------------------------
-----------------------------------------------------------
---------------
---------------- ----------------- -----------------------------------
-----------
-------------------
-------------------------------
------------
-------------------------------
--------------
------------
--
--
------ ----- ------------------- ---------- ------ -
-------- - ----------------------------------------------------------
-- ---
-在上面的示例中，我们使用了 Videogular 的核心模块和一些组件模块。我们还声明了一个 VideogularComponent 组件，并在模板中使用了 Videogular 播放器的各个组件。
指令
Videogular 还提供了很多指令，可以让你更方便地控制视频播放。比如，vgPlay 指令用于播放视频：
<button vgPlay>Play</button>
vgPause 指令用于暂停视频：
<button vgPause>Pause</button>
vgSeekTo 指令用于跳转到指定的时间点：
<button [vgSeekTo]="10">Skip to 10 seconds</button>
事件
Videogular 还提供了很多事件，可以让你监听视频播放的状态。比如，onPlayerReady 事件在播放器初始化完成后触发：
-- -------------------- ---- -------
------------
--------- -----------------
--------- -
---------- ----------------------------------------
---- --- ---
------------
--
--
------ ----- ------------------- ---------- ------ -
-- ---
------------------ ------------- -
------------------- -- -------- -----
-
-onPlay 事件在视频开始播放时触发：
@Component({
selector: 'app-videogular',
template: `
<vg
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/39284) ，转载请注明来源
[https://www.javascriptcn.com/post/39284](https://www.javascriptcn.com/post/39284)