简介
@1backend/csicskavok-vok-ng 是一个基于 Angular 的前端库，用于实现视频录制，剪辑和上传功能。该库内部集成了七牛云和阿里云 OSS，可以方便地对视频进行存储和管理。通过简单的配置即可使用该库，避免了手动处理视频上传和剪辑的繁琐操作，提高了开发效率。
安装
使用 npm 安装该库：
npm install @1backend/csicskavok-vok-ng --save
用法
首先需要引入该库：
import { VokModule } from '@1backend/csicskavok-vok-ng';然后将 VokModule 添加到 app.module.ts 中的 imports 数组中：
-- -------------------- ---- -------
-----------
---
-------- -
----
---------
--
---
--
------ ----- --------- - -在 HTML 中添加以下标签，用于上传视频和显示视频：
<vok-uploader #uploader [configuration]="configuration" (result)="onResult($event)" (save)="onSave($event)"></vok-uploader> <video #video playsinline muted></video>
在 Component 中定义配置对象和回调函数：
-- -------------------- ---- -------
------ - ----------------- --------- - ---- ------------------------------
------ ----- ------------ -
-------------- ---------------- - -
------------ ------------------
---------------- ---------------------
------- --------------
--------- ----------------
------- -------------
--
---------------- ---------- -
--------------------
-
----------- ------- -
----- ----- - -------------------------
--------- - ----
-------------
-
-其中，accessKeyId 和 accessKeySecret 是你的七牛云或阿里云的身份验证信息，bucket 和 endpoint 用于指定存储空间和服务地址，region 用于指定区域。onResult 函数用于获取处理结果，onSave 函数用于显示视频。
示例代码
以下是一个完整的示例代码，它实现了上传视频和剪辑视频的功能，并将结果显示在网页上：
-- -------------------- ---- -------
------ - ---------- ---------- ---------- - ---- ----------------
------ - ---------- --------------------- ----------------- --------- - ---- ------------------------------
------ - -- ----- ---- -----------
------ - ---------- - ---- -------
------------
--------- -----------
--------- -
---- --------------- ----- ---------- ------
------ ----------- ------------------------------------
------- ---------------------------------------------
------- --------------------------- --------- - - -- ----------------
------
------ ------ ----------- --------------
--
---------- -----------------------
--
------ ----- ------------ -
-------------------------------- --------- ---------------------
------------------- ------ -----------
------- ----- ---- - -----
------- ---- ------ - -----
------- --------- ------ - ---
------------- -
------------- - -----------------------
-
----------------------- -
--------- - ----------------------
-------- - ---------------------------------- ------------- - --- - ---------- - --- - --------------------------------
-
------------------- -
-- ------------ -
------------- ------ - --------
-------
-
----- ---------- - -------------------------- -- -
----- ------------ - ------------------------------- ----------
---------------------- -- -
---------------------
---
---------------------- -- -
-- ------ --- ------- -
--------------------
-
---- -- ------ --- -------- -
---------------------- ----------
-
---
------ -- -- -
---------------------------
--
---
----------------------
----- ----- -- -------------------- -------
------ ----- -- ----------------------- -------
--------- -- -- ------------------------
---
-
---------------------- ------- ---- ------- -
-- ----------- -
------------- ------ - ---- ---------
-------
-
----- ---------- - -------------------------- -- -
----- ------ - ---------------------- - --- - ----- - --- - --- - --- - -----------------------
----- --- - ---------- - ------------------------- - --- - ------------------------- - ---------------- - -------
----- ---------- - --------------- - - --------------------------------------------- -- -------- ---------------
----- -- - --- ---------------- ------------------------------ -------------
----- ----- - ---------- - ------------------------- - --- - ------------------------- - ---------------- - ---------
----- -------- - ---------------------- - --------- - -----------------------
----- -------- - ---------- - ------------------------- - --- - ------------------------- - ---------------- - ---------
----- ------ - ---------------------- - ------- - -----------------------
----- ------ - ---------- - ------------------------- - --- - ------------------------- - ---------------- - -------
--------------------------------------------- -- -
----------
------- ------
------ ------
------- ---------
------
----
--------- ---
-------------------- ------------------
-------------------- --------------------------------
--- -------
-------------- ----------------
------- -
--------- -
-
---- ---- --- --------------- ------------------ --------- --------------- ----------------------------
--
-
---- ---- ---- --------- ------------------ --------- --------------- ------------------- ---------------- -- - ---------- - ----
--
-
---- ------- --------
-
--
------ -
-
---- ---- ------ ----------------
--
-
---- ------- ------- ---------
-
-
-
--
-- ----- --------- -- -
-- ----- -
--------------------
- ---- -
--------------------- -
-
------ ---------
------- -------
------ --
---- ------
-
-- ---- ------- --------- -- -
-- ------- -
----------------------
- ---- -
------------------------
--------------------
-
---
-
---
---
---
----------------------
----- ----- -- -------------------- -------
------ ----- -- ----------------------- -------
--------- -- -- -
----- ----- - -------------------------
--------- - ---------- - ------------------------- - --- - ------------------------- - ---------------- - ---------------------- - -------- - -----------------------
-------------
-
---
-
-------------- ---------------- - -
------------ ------------------
---------------- ---------------------
------- --------------
--------- ----------------
------- -------------
--
-在上面的示例代码中，我们添加了两个按钮，在上传后可以使用 Qiniu.fmp4 库剪辑视频，然后使用 video 标签将结果展示到页面上。由于该功能需要调用七牛云的 API，所以你需要自己注册七牛云账号并获取身份验证信息。
总结
本文介绍了一个基于 Angular 的前端库 @1backend/csicskavok-vok-ng，可以帮助我们快速实现视频上传和剪辑功能。通过简单的配置即可使用该库，大大提高了开发效率。希望本文能够帮助读者掌握该库的使用方法，提升前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ca281e8991b448e60d4