video标签的preload属性，设置为meta时，移动端显示白屏，有大佬知道怎么解决吗

最新推荐文章于 2025-05-25 11:24:45 发布

kkkkkkk_coder

最新推荐文章于 2025-05-25 11:24:45 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/u014513201/article/details/103731193

笔记专栏收录该内容

3 篇文章

订阅专栏

博客提到设置preload为meta后，PC端video能加载出海报，但移动端无法加载，聚焦于该视频海报加载的差异问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如题，设置preload为meta后，pc端video可以加载出海报，移动端却不行

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

kkkkkkk_coder

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uni-app 页面使用加载多个video后机子崩溃闪退

专注基础架构领域

06-10

3307

背景：公司产品脑袋一拍，我们要做一个类似uc视频列表播放的东东解决方法： :custom-cache="false" <video :custom-cache="false" :autoplay="autoplayFn()" src="xxxx.mp4" controls></video>

前端资源文件加载失败_前端性能优化：preload 预加载页面资源

weixin_39923623的博客

11-22

919

网上看到一篇来自蚂蚁金服数据体验团队的文章，觉得不错，分享给大伙：https://juejin.im/post/5a7fb09bf265da4e8e785c38本文主要介绍preload的使用，以及与prefetch的区别。然后会聊聊浏览器的加载优先级。preload 提供了一种声明式的命令，让浏览器提前加载指定资源(加载后并不执行)，在需要执行的时候再执行。提供的好处主要是将加载和执行分离开，可...

1 条评论您还未登录，请先登录后发表或查看评论

移动端video标签第一帧显示空白问题

m0_54364474的博客

06-30

4527

video视屏第一帧无法显示解决方案

微信中的video属性设置

最新发布

mutuyxy的博客

05-25

1263

深入解析 <link> 如何引入外部资源（如 CSS、图标），以及 <script> 如何驱动动态交互，二者如何协作构建现代网页

h5 video 手机显示第一帧_解决h5嵌入app后video标签poster不能显示视频第一帧（表现为空白）...

weixin_35786759的博客

12-24

2778

这里我们先来描述一下问题，页面中使用了video标签，按照video标签的官方介绍下图介绍：没有设置poster的情况下在浏览器中我们可以看到视频的第一帧，页面效果如下图左图所示；但是嵌入App后，右面的样子：　这个时候我能想到的就是设置一下 poster 为某张固定图片，看看是不...

ios10版本下，video标签 preload = ‘none’ 属性会让视频无法播放，改为 preload = ‘auto’ 即可

henrywhy01的博客

12-08

8298

ios10版本下，video标签 preload = ‘none’ 属性会让视频无法播放，改为 preload = ‘auto’ 即可

移动端使用原生video标签不显示第一帧问题

m0_57121248的博客

09-12

2363

移动端不显示第一帧问题

详解Html5中video标签那些属性和方法

11-21

video标签行内属性 src：视频的URL poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度 webkit-...

HTML5 Video标签的属性、方法和事件汇总介绍

09-28

它可以有多个时间段，通过`length`属性获取段数，`start(index)`和`end(index)`分别获取指定段的起始和结束时间。 **5. 相关事件** - `loadstart`: 视频开始加载。 - `progress`: 视频加载进度更新。 - `suspend`:...

禁止iPhone Safari video标签视频自动全屏的办法

01-20

总之，虽然无法直接禁止iPhone Safari中的`<video>`标签视频自动全屏，但可以通过结合使用`webkit-playsinline`属性以及在App环境中调整设置来达到类似的效果。对于Web环境，开发者可能需要寻找其他变通方法，或者...

uniapp 视频video 播放白屏 android

Li_Tao00的博客

12-24

3791

uniapp 视频video 播放白屏 android，网页视频无法全屏

解决微信小程序Video 某些属性设置不起作用问题

hijk7的博客

06-10

494

解决微信小程序Video 某些属性设置不起作用问题

【踩坑】HTML5 Video 标签 poster 属性无法在苹果Safari浏览器显示视频封面

Jinkerr的博客

06-28

7032

1、问题描述： video标签用poster属性写入视频封面图在chrome系列浏览器可以正常显示，但是在PC端苹果Safari浏览器却无法显示，把poster网络图片链接切换成本地图片也不行。 2、分析原因：通过查询资料得知，当前所有主流浏览器都支持 poster 属性，所以不是浏览器兼容问题。（注释：Internet Explorer 8 以及更早的版本不支持 <video> 标签。）转换思维，应该是苹果Safari浏览器的默认...

html meta 跳转白屏,Meta标签总结及常见问题的解决方法

weixin_32148209的博客

06-08

1100

Meta标签总结及常见问题的解决方法2019-9-20 hubo Web前端一、meta标签的总结1.keywords,description(经常用到的两个)页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开2.Content-Type告诉浏览器当前访问的资源类型3.viewport随大小设备自动适配说明：什么是viewport？简单来讲，viewport就是浏览...

【解决】uniapp使用video标签在浏览器调试正常，安卓真机、手机上显示小黑块，无法正常显示

huangfuyk.的博客

08-24

6760

uniapp使用video标签播放视频

改造：ueditor上传的视频默认显示第一帧画面

05-30

3902

ueditor上传的视频默认设置不加载，如图：原因：点击开始播放再加载资源，video标签设置了preload="none",修改代码：在ueditor.all.js文件内找到function creatInsertStr(url,width,height,id,align,classname,type){}方法，大致在17654行附近：修改代码preload="metadata" 提前...

【前端帮帮忙】第6期 移动端使用video标签需要注意的一些问题

weixin_34189116的博客

05-08

1833

相信使用过<video>标签的都知道，<video>标签在pc端跟手机端显示的样式并不一样，而且还有个很蛋疼的就是微信中内置的浏览器，播放的时候会自动全屏问题。接下来我们通过例子来分析下使用过程中可能碰到的一些问题，供大家参考。示例代码这是代码，只加了controls="controls"显示播放控制条，为了保持视频宽高比例，所以<video>外层套了一...

视频video标签在移动端的播放总结

chenliuyun1222的博客

10-11

793

video标签的属性都有哪些

03-15

还需要提到source标签的使用，因为有时候会在video标签内部使用多个source标签来指定不同格式的视频源，以兼容不同浏览器。另外，还有一些布尔属性，比如loop、muted，这些不需要值，只需存在即可生效。注意HTML5...