解决ios 同层播放video 类似QQ登入背景图是视频（vue）

最新推荐文章于 2022-10-08 12:58:33 发布

独步炎凉的大彬

最新推荐文章于 2022-10-08 12:58:33 发布

阅读量744

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/qcg14774125/article/details/91378290

版权

这篇博客介绍了如何在iOS设备上实现类似QQ登录页面的视频背景自动播放。由于Android系统不允许自动播放，作者提出了通过用户交互触发播放的方法。在iOS上，通过HTML、JS和CSS的结合，实现了视频在页面加载时自动播放的效果。文章提供了相关代码示例和最终效果展示。

摘要由CSDN通过智能技术生成

公司要求，试着写了下类似QQ登录demo，发现很多坑，安卓进去不能自动播放,这个跟系统有关，试图寻找android下，页面加载完毕就可以自动播放，但现实是残酷的，android下是不允许自动播放的，即使你用了video.play(),也是不行的。必须有用户的主动触发，比如触摸了屏幕，有click或touch事件产生。不知以后android会不会改进，但至少目前来看是不行的。比较的好的办法是，引导用户触发，滑屏或touch的行为，然后调用video.play()播放，给用户一个自动播放的错觉。目前只解决了ios的问题。

首先贴上html代码

<template>
  <div class="login" @click="globalbox" >
    <div class="homepage-hero-module">
      <div class="video-container">
        <div  class="filter"></div>
        <div class="loginDiv"  >
          <div class="user_div">
            <img src="../../../static/image/login/sjh.png" alt="">
            <input type="text" placeholder="请输入手机号" v-mode