umijs 框架加载mp4视频背景

2021-12-10 11:49:50 浏览数 (2)

最近在做一个大屏项目,有一个需求视频做背景,这个在vue 开发的时候做了很多遍了,以为手到擒来。

背景分析

  • 前端框架: UMI
  • vedio 标签加载视频数据

问题表现

找不到视频路径

放到src 文件夹下还是public 文件里都是播放不了的。

解决

1、放到public 文件家里 2、vedio 标签加载src 直接下./ 在root 目录加载即可

代码

js

代码语言:javascript复制
 <video
      loop
      autoPlay
      muted
    >
      <source src="./444.mp4"  type="video/mp4"/>
    </video>

css

代码语言:javascript复制
video {
    position: absolute;
    /* Vertical and Horizontal center*/
    top: 0; left: 0; right: 0; bottom: 0;
    width:100%;
    height:100%;
    object-fit: cover;
    z-index: -1;
  }

0 人点赞