Top
Fork me on Gitee My Github

h5-video 百度浏览器 video {display: none;} 视频在iOS设备中还能自动播放

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

@media screen and (max-width: 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>
posted @   lisashare  阅读(1244)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示