Vue登录主页动态背景短视频制作

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

一、HTML代码

<source src="../assets/video/G1s.mp4" type="video/mp4"/>

注:src的路径根据自己的需要改变;

video标签无法自动播放 刷新后无法自动播放;

解决方法:给video标签添加muted属性,可写为muted或完整写法:muted=“muted”

<template>
  <div class="homepage-hero-module">
   <div class="video-container">
    <div :style="fixStyle" class="filter">
     <!--内容-->
    </div>
    <video :style="fixStyle" autoplay loop muted class="fillWidth" v-on:canplay="canplay">
     <source src="../assets/video/G1s.mp4" type="video/mp4"/>
     浏览器不支持 video 标签,建议升级浏览器。
     <source src="../assets/video/G1w.webm" type="video/webm"/>
     浏览器不支持 video 标签,建议升级浏览器。
    </video>
    <div class="poster hidden" v-if="!vedioCanPlay">
     <img :style="fixStyle" src="../assets/video/G1.jpg" alt="">
    </div>
   </div>
  </div>
</template>

二、css代码

<style scoped>
 .homepage-hero-module,
 .video-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
 }

 .video-container .poster img{
  z-index: 0;
  position: absolute;
 }

 .video-container .filter {
  z-index: 1;
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
 }

 .fillWidth {
  width: 100%;
 }
</style>

三、JavaScript----代码

name: '  ***  '   自定义

export default {
  name: 'Video',
  data() {
   return {
    vedioCanPlay: false,
    fixStyle: ''
   }
  },
  methods: {
   canplay() {
    this.vedioCanPlay = true
   }
  },
  mounted: function() {  //屏幕自适应
   window.onresize = () => {
    const windowWidth = document.body.clientWidth
    const windowHeight = document.body.clientHeight
    const windowAspectRatio = windowHeight / windowWidth
    let videoWidth
    let videoHeight
    if (windowAspectRatio < 0.5625) {
     videoWidth = windowWidth
     videoHeight = videoWidth * 0.5625
     this.fixStyle = {
      height: windowWidth * 0.5625 + 'px',
      width: windowWidth + 'px',
      'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
      'margin-left': 'initial'
     }
    } else {
     videoHeight = windowHeight
     videoWidth = videoHeight / 0.5625
     this.fixStyle = {
      height: windowHeight + 'px',
      width: windowHeight / 0.5625 + 'px',
      'margin-left': (windowWidth - videoWidth) / 2 + 'px',
      'margin-bottom': 'initial'
     }
    }
   }
   window.onresize()
  }
 }

四、效果演示

由于上传大小限制,只能剪短的gif动画了。

五、HTML版

视频呢下载和html版代码在官网最下方:https://coverr.co

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue.js实现一个SPA登录页面的过程【推荐】

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功

  • vue-router判断页面未登录自动跳转到登录页的方法示例

    1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录 下面的两个页面,登录页不需要检测,首页需要检测 const routers = [ { path: '/', component: App, children: [ { path: '/login', component: Login, meta: { title: '登录' } }, { path: '/home', component: Home, meta: { title: '首页', re

  • vue实现登录后页面跳转到之前页面

    在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的几个API: 1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.

  • Vue-router路由判断页面未登录跳转到登录页面的实例

    如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该

  • 使用Vue.js和Element-UI做一个简单登录页面的实例

    最近了解到Vue.js挺火的,有同学已经学习了,那我心里痒痒的也学习了一点,然后也学了一点Element组件,就做了简单的登录页面. 效果很简单: 代码如下: 前端页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" hr

  • vue实现未登录跳转到登录页面的方法

    环境:vue 2.9.3; webpack;vue-router 目的:实现未登录跳转 例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给本地缓存存入的token判断,如果没有就跳转到登录页面,有的话就打开. 图示: 1.直接在url地址栏输入http://127.0.0.1:9000/#/home,但是页面会直接跳转到登录页,而且会带上参数. --------------------------------------------分

  • vue实现登录页面的验证码以及验证过程解析(面向新手)

    做成之后就 是这个样子 接下来上代码 创建一个组件.显示验证码图片 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script>

  • vue登录页面cookie的使用及页面跳转代码

    1.大概流程 a.登录:前端使用validate对输入信息进行验证 验证成功则成功跳转到用户信息页并存储cookie值 b.首页跳转用户信息页:判断cookie值cookie存在并不为空则跳转用户信息页,若为空则跳转登录页 c.退出页:点击退出跳转首页并删除cookie值 2.目录介绍 cookie.js为公共方法,用于cookie的存储.获取及删除 login.vue :登录页 index.vue:首页 user.vue:用户信息页 myinfo.vue:退出页 3.文件内容 a.cookie

  • 基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

    本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果.并且基于 Vue.js 2.0 全家桶.具体效果如下图所示: 最终效果可以翻到文章最后观看. 1. 背景视频 Web 页面的既有实现方式 国外有一个很好的网站 「Coverr」 ,提供了完善的教程和视频资源,帮助前端开发者构建酷炫的背景视频主页,网站效果示例如下图所示: 教程如下所示: 从图中以及我

  • Vue登录主页动态背景短视频制作

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 一.HTML代码 <source src="../assets/video/G1s.mp4" type="video/mp4"/> 注:src的路径根据自己的需要改变: video标签无法自动播放 刷新后无法自动播放: 解决方法:给video标签添加muted属性,可写为muted或完整写法:muted="muted" <template>

  • android 仿QQ动态背景、视频背景的示例代码

    本文介绍了android 仿QQ动态背景.视频背景的示例代码,分享给大家,具体如下: 效果如下: 如上图类似效果图: 1, 自定义视频类 继承VideoView public class CustomVideoView extends VideoView { public CustomVideoView(Context context) { super(context); } public CustomVideoView(Context context, AttributeSet attrs)

  • Vue登录页面的动态粒子背景插件实现

    目录 动态粒子效果如下: 安装插件 动态粒子效果如下: 安装插件 npm install vue-particles --save-dev 在main.js文件中全局引入 import VueParticles from 'vue-particles' Vue.use(VueParticles) 在vue文件中使用 <vue-particles color="#409EFF" :particleOpacity="0.7" :particlesNumber=&q

  • 用Python制作灯光秀短视频的思路详解

    一.引言 2021年4月8日武汉重启一周年,这是个值得庆祝的日子,作为一个武汉人和一个死宅程序员,老猿也想在这个日子留下点什么.想起武汉长江两岸的灯光秀,顿时有了主意,那就用程序实现一个武汉重启庆祝的灯光秀短视频吧,于是在4月7日晚开始构思和着手开发,4月8日晚终于顺利完成,并且通过使用OpenCV.OpenCV+Moviepy两种方式进行了实现. 本文介绍结合Python+OpenCV+Moviepy实现的思路和过程,Python+OpenCV实现的思路和过程将在另外的博文中单独介绍. 二.实

  • CSS3实现动态背景登录框的代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 实现的代码如下: html代码: <div class="htmleaf-container"> <div class="wrapper"> <div class="container"> <h1>Welcome</h1> <form class="fo

  • Vue中Video标签播放解析后短视频去水印无响应解决

    目录 问题: 情景复现: 链接在Video标签打不开 链接浏览器正常打开 出现的原理 解决方式 前端解决 全局添加标签 Vue单页面添加标签 完美解决: 问题: 发送Ajax请求,请求后端接口解析抖音无水印视频并且展示在页面中,后端已经可以把解析后的访问地址返回,通过浏览器访问该地址也是没有问题的,接着我通过Vue的绑点video的src,预期状态应该是可以被播放的,实际上点击也没反应,查看页面代码也发现video的src已经设置了正确的视频url 情景复现: 前端发送请求到后端接口 我们前端打

  • vue实现通过手机号发送短信验证码登录的示例代码

    本文主要介绍了vue实现通过手机号发送短信验证码登录的示例代码,分享给大家,具体如下: <template> <div class="get-mobile" @touchmove.prevent> <div class="main"> <div class="pt-20 pr-15 pl-15 pb-20"> <input class="input mb-15" v-mod

  • Python自动化短视频生成脚本实现热门视频流水线生产

    目录 一.核心功能设计 二.实现步骤 1. 图片爬取 2. 图片统一格式大小 3. 视频合成 4. 截取背景音乐 5. 视频和背景音乐合并 一.核心功能设计 首先我看了网上那些视频营销号的视频,大多数都是围绕一个主题通过几张图片进行视频轮播展示并添加一些热门歌曲作为背景音乐. 知道了大概的思路,接下来我们可以通过以下几步进行实现: 通过关键字进行图片批量爬取 对爬取的图片进行筛选并批量进行大小resize统一 将统一大小的图片进行视频合成 根据选取的歌曲,截取合适的背景音乐 将视频和截取的背景音

  • 有关vue 组件切换,动态组件,组件缓存

    目录 一.组件的切换方式 方式一: 使用 v-if和v-else 方式二:使用内置组件:<component></component> 方式三 : vue-router 二.组件缓存: keep-alive 1.keep-alive定义 2.keep-alive的生命周期 三.keep-alive使用方法 1.Props 2.搭配<component></component>使用 3.搭配<router-view />路由使用 4.清除缓存组件

  • Vue登录功能的实现流程详解

    目录 Vue项目中实现登录大致思路 安装插件 创建store 封装axios qs vue 插件 api.js的作用 路由拦截 登录页面实际使用 Vue项目中实现登录大致思路 1.第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token 3.前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面 4.前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登

随机推荐