什么是@vroger/vue-videobg？
@vroger/vue-videobg是一个能够在Vue.js应用中实现背景视频效果的npm包。其底层依赖于原生的HTML5 video和CSS3的背景属性。该包提供了一系列的API来定制背景视频组件，如视频路径、播放控制等等。
安装@vroger/vue-videobg
你可以通过npm来安装这个包。
$ npm install --save @vroger/vue-videobg
如何使用@vroger/vue-videobg
你需要先导入@vroger/vue-videobg包，然后在VUE组件中注册、引入，最后在DOM中使用。
以下是示例代码
-- -------------------- ---- -------
----------
---- ---------------
------------ --------------------------- -------- --
------
-----------
--------
------ ----------- ---- ----------------------
------ ------- -
----- ------
----------- -
-----------
-
-
---------
-------
---------- -
------ ------
------- ------
--------- -------
--------- ---------
-
--------在这个示例中，我们使用了@vroger/vue-videobg的VideoPlayer组件来展示背景视频，其路径为/static/test.mp4，并且自动播放。
API
video
该属性用来指定指定视频的路径，支持MP4、OGG、WEBM、HLS格式的视频。可以是相对路径或者外部链接。
<VideoPlayer :video="'/static/test.mp4'" />
autoplay
该属性用来指定视频是否自动播放。
<VideoPlayer :video="'/static/test.mp4'" autoplay />
loop
该属性用来指定视频是否循环播放。
<VideoPlayer :video="'/static/test.mp4'" loop />
muted
该属性用来指定是否静音播放。
<VideoPlayer :video="'/static/test.mp4'" muted />
aspectRatio
该属性用来指定视频比例。
<VideoPlayer :video="'/static/test.mp4'" :aspectRatio="'16:9'" />
position
该属性用来指定视频位置。
<VideoPlayer :video="'/static/test.mp4'" position="'left bottom'" />
blur
该属性用来指定视频是否模糊。
<VideoPlayer :video="'/static/test.mp4'" blur />
opacity
该属性用来指定视频透明度。
<VideoPlayer :video="'/static/test.mp4'" :opacity="0.5" />
cover
该属性用来指定视频是否覆盖整个容器。
<VideoPlayer :video="'/static/test.mp4'" cover />
containerClasses
该属性用来指定容器的class。
<VideoPlayer :video="'/static/test.mp4'" :containerClasses="'test-class'" />
结束语
通过以上API的设置，你可以轻易地实现自适应背景视频，在你的应用中为用户提供精美的视觉效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005737d81e8991b448e9713