惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

大猫的无限游戏
大猫的无限游戏
H
Hacker News: Front Page
T
The Blog of Author Tim Ferriss
WordPress大学
WordPress大学
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Blog — PlanetScale
Blog — PlanetScale
Stack Overflow Blog
Stack Overflow Blog
F
Fortinet All Blogs
H
Help Net Security
罗磊的独立博客
D
DataBreaches.Net
MyScale Blog
MyScale Blog
美团技术团队
人人都是产品经理
人人都是产品经理
L
LangChain Blog
M
MIT News - Artificial intelligence
C
Check Point Blog
GbyAI
GbyAI
B
Blog RSS Feed
Microsoft Azure Blog
Microsoft Azure Blog
Y
Y Combinator Blog
雷峰网
雷峰网
Last Week in AI
Last Week in AI
F
Full Disclosure
量子位
V
Visual Studio Blog
Google DeepMind News
Google DeepMind News
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
S
SegmentFault 最新的问题
云风的 BLOG
云风的 BLOG
H
Hackread – Cybersecurity News, Data Breaches, AI and More
P
Proofpoint News Feed
爱范儿
爱范儿
A
About on SuperTechFans
MongoDB | Blog
MongoDB | Blog
腾讯CDC
博客园 - 【当耐特】
U
Unit 42
Martin Fowler
Martin Fowler
NISL@THU
NISL@THU
B
Blog
T
The Exploit Database - CXSecurity.com
Apple Machine Learning Research
Apple Machine Learning Research
L
Lohrmann on Cybersecurity
P
Proofpoint News Feed
有赞技术团队
有赞技术团队
C
CERT Recently Published Vulnerability Notes
The GitHub Blog
The GitHub Blog
T
Threatpost

Mengke's blog - Mengke's coding journey

年轻不是健康的免死金牌 深圳工作机会,前端 2025 年终总结 Skill 不是 MCP 的替代品:我理解的渐进式披露与选型原则 独立开发者如何开具发票 香港银行卡开户完整指南(2025年9月最新) 招商银行储蓄卡微信动账提醒恢复方法 再谈 MCP - Model Context Protocol(MCP)详解和开发教程 Get Human-Readable "Time Ago" in TypeScript 以「asset-price-mcp」为例,从 0 开发 MCP Server Model Context Protocol (MCP) 快速开始 DeepSeek + Dify 搭建本地知识库 An elegant solution for implementing optional property types using TypeScript 2024 年终总结 Quickly Create a Fullscreen WebView with Autoplay Support for Testing 以数字开头的 ID 在 querySelector 中的处理 String casing utilities in JavaScript Check if a string is a valid color Simple Event-Emitter/PubSub pattern Find which process is running on a certain port and kill it Markdown Code block's basic and advanced syntaxes Common npm commands to use locally Pnpm aliases How to safely rename a case sensitive file/directory in a git repo? A custom hooks to use an async effect A custom hooks to use local storage state 🤩 Mengke'blog 上线的这一年 🗼 五月底去了一趟日本,记录一下我的游记和攻略 网站性能优化:如何高效预加载大型静态资源 闰年之约 - 2024年2月29日 A collection of some useful websites 2023 年终总结 WebGL 学习笔记(一)基础概念与实践 📷 纯前端也可以实现「用户无感知录屏」? Getting Spotify token to display now playing track on your website AVP - Web 端特效视频播放器 IndexedDB 基础入门 直接下载网易云音乐中歌曲MP3格式的方法 什么!一个项目给了8个字体包??? flex 布局中 start/end 和 flex-start/flex-end 的区别 深入 Pinia:从代码出发探索 Vue 状态管理的奥秘 Pinia 快速上手指南 Nest.js Typrorm 多对多关系如何创建 Strapi 快速入门 CentOS7 MySQL 数据库安装与卸载 Next.js 上手指南 Vue 数据响应式原理 deno 快速上手 - Hello World 案例 快速上手 Vue3 尝鲜 Vue 3.0 Combination API react-router-dom 路由基础教程 JavaScript 数组扁平化处理的方法总结
Android Webview <video> 标签去除默认播放按钮图
Mengke · 2023-12-05 · via Mengke's blog - Mengke's coding journey

又到了一年一度的「年终盛典」活动。这属于是年度大活动,等级是 S 级,是最高等级的活动。身为 S 级别活动,对于开发团队而言有着极高的要求,不仅需臻于完美地实现设计图纸的设想,更需充分考虑到参与者的手机型号、网络环境以及操作系统版本等诸多因素。

与之相比,大多其他类型的活动只需放置一张静态的头部图像即可。而在此次 S 级别的活动中,我们几乎全部选择了动态的头部图像。值得注意的是,为了提高兼容性和减少文件体积,我们通常会采用 mp4 格式。

此外,选择将视频作为头部图像时,如果能为视频标签添加上 mutedautoplay 属性,便可使视频自动播放(当然,如果你的WebView配置支持的话,也可设定为非静音模式)。

今天测试跑过来说安卓上会有一个「一闪而过的」播放按钮,就是下面这个,机器是 Redmi (具体型号已记不清)。而在 iOS 设备上一切正常。

Default Poster

简单排查过后即确认了是安卓 WebView 默认的 poster,以往会添加一个静态头图作为 poster,也可以防止视频加载失败是一片空白。这一次视频和静态图给的尺寸不一致,直接去掉了 poster 在视频后方添加了一个图片。所以在以往的活动中并没有发现这个问题。

解决方案1

这个播放按钮就是 WebView 默认的 poster ,所以我们直接给一个 poster 就可以了,如果你有现成的图片就设置图片,没有的话可以给一个透明图片像下面这样:

⚠️ 注意:poster="" 直接给空字符串会被忽略

解决方案2

方案1这么搞的话太麻烦,每个视频标签都要添加 poster 不管需要不需要。一劳永逸的解决办法还要是修改 WebView 的配置:

参考文档:developer.android.com

Reference