简介
vue-video-input 是一个基于 Vue 的视频输入组件，可以方便地集成到你的项目中，从而方便用户录制视频，比如在社交网络中发布视频动态、视频简历等场景。
安装
npm install vue-video-input
使用
在组件中引入：
-- -------------------- ---- -------
-- -------
----------
------------ ------------------ ------------------------------------
-----------
--------
------ ---------- ---- ------------------
------ ------- -
----- ------
----------- -
-----------
--
------ -
------ -
-------- ---
--
--
-------- -
----------------- -
------------------
--
--
--
---------参数
vue-video-input 提供了许多参数来方便地调整组件功能，下面介绍一些常用的参数。
options
- 类型：
Object - 必填：
否
配置选项，具体支持参数如下：
| 参数 | 类型 | 描述 |
|---|---|---|
| accept_type | string |
允许录制的视频格式，可选：video/mp4，video/webm。 |
| max_length | number |
最长的录制时长，单位为秒，默认为10秒。 |
| countdown | number |
开始录制前的倒计时秒数，默认为3秒。 |
示例：
{
accept_type: 'video/mp4',
max_length: 15,
countdown: 2
}update
- 类型：
function - 必填：
否
当用户录制完视频后会触发该函数，会传递一个包含视频文件的信息对象，具体如下：
| 参数 | 类型 | 描述 |
|---|---|---|
| blob | Object |
包含录制视频的二进制数据的 Blob 对象 |
| url | string |
录制视频的在线预览 URL 地址 |
| size | number |
录制视频的文件大小，单位为字节数 |
| type | string |
录制视频的文件类型 |
| name | string |
录制视频的文件名字 |
| error | Object |
如果录制出现错误则返回错误信息 |
示例：
updateVideo(data) {
console.log(data);
// do something with the video data
},示例
下面是一个完整的示例代码，可以直接在浏览器中运行：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------------- ----------------- --
---------- ----- ----- ------------
-------
------
---- ---------------
------- -----------------------------------------------------------------------
------- ---------------------------------------------------------------------------------
--------
--- -----
--- -------
----------- -
----------- -------------------------
--
------ -
------ -
-------- -
------------ ------------
----------- ---
---------- --
--
--
--
-------- -
----------------- -
------------------ ------- ------
--
--
--------- -
-----
------- ----- ----- ---------
------------ ------------------ ------------------------------------
------
--
---
---------
-------
-------结语
vue-video-input 是一个非常方便的前端录制视频组件，可以轻松地集成到你的 Vue 项目中，实现丰富的视频输入功能。感兴趣的前端开发者可以尝试使用该组件，并根据自己的需求适当调整参数，实现更加优秀的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006737a890c4f7277584144