zoukankan      html  css  js  c++  java
  • h5-video 百度浏览器 video {display: none;} 视频在iOS设备中还能自动播放

    在做响应式网站中,背景视频,PC端视频自动播放,移动端使用图片替换,样式使用的是媒体查询控制显示隐藏

    @media screen and (max- 768px){video {display: none;}}
    

    problem: 在iOS设备上的百度浏览器,刚进入页面自动放大video,自动播放video了,点击video关闭或者返回后,页面还是正常展示静态图片,点击图片不会弹出视频播放,再次进入页面会播放。

    解决方法:属性控制video,禁止video自动全屏 x5-playsinline="" playsinline="" webkit-playsinline=""

    <div class="vw-h-43 sm-vw-h-60 bg-center relative w-full" style="background-color: #EFEFF6;background-image: url(./images/1.jpg);background-size: cover;">
       <div class="video-bg w-full h-full">
          <video muted="" data-autoplay="" loop="loop" autoplay="autoplay" src="./images/1.mp4" class="video-tvc" id="video-tvc" data-object-fit="" x5-playsinline="" playsinline="" webkit-playsinline="">抱歉,您的浏览器不支持内嵌视频</video>
       </div>
    </div>
    
  • 相关阅读:
    java 二维码图片生成工具类
    我的PHP学习过程
    js简单表格操作
    在同一个textarea文本框中设置不同的字体
    基础入门--创建项目
    异常处理方式
    2019年度的瞎几把总结
    WebAPI 返回值
    关于背景色
    使用echarts进行画图
  • 原文地址:https://www.cnblogs.com/lisaShare/p/14268240.html
Copyright © 2011-2022 走看看