全屏视频背景

最新推荐文章于 2022-08-15 14:11:34 发布

文i

最新推荐文章于 2022-08-15 14:11:34 发布

阅读量226

点赞数 1

本文链接：https://blog.csdn.net/weixin_44955769/article/details/108596810

版权

话不多说看效果

在这里插入图片描述

代码：

    <video
      loop="loop"
      autoplay="autoplay"
      muted="muted"
      id="videos"
      ref="videos"
      @ended="loopPlay"
      playsinline
      webkit-playsinline
    >
      <source
        type="video/mp4"
        src=""    // 这里的视频地址自己加
      />
      <!-- stalled :在浏览器不论何种原因未能取回媒介数据时运行的脚本。 -->
      <!-- <preference name="AllowInlineMediaPlayback" value="true" /> -->
    </video>

methods 这里是有些电视机上不支持循环播放添加的事件

loopPlay(e) {
      console.log(e);
      const vid = this.$refs.videos;
      console.log(vid);
      vid.currentTime = 0.1;
      vid.play();
    },

样式的话一般都是全屏定位层级当然视频也可以作为背景

video {
    position: absolute; //视频定位方式设为固定
    right: 0; //视频位置
    top: 0;
    min-width: 100%;
    min-height: 100%; //不会因视频尺寸造成页面需要滚动
    width: auto;
    height: auto; //尺寸保持原视频大小
    z-index: -100; //z轴定位，小于0即可
    -webkit-filter: grayscale( 20% ); //添加灰度蒙版，如果设定为100%则视频显示为黑白
  }