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

最新推荐文章于 2024-05-27 19:00:00 发布

m0_57121248

最新推荐文章于 2024-05-27 19:00:00 发布

阅读量1.4k

点赞数 9

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_57121248/article/details/132825652

版权

这里写自定义目录标题

解决移动端使用原生video标签不显示第一帧问题
- 第一种方法
- 第二种方法

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

第一种方法

使用video标签的loadedata方法

在这里插入图片描述

将视频定在第0秒，并且暂停就能显示第一帧。可以自行加一个播放icon类似上图代码，点击跳转或者放大播放。

第二种方法

用canvas使现，具体原理就是传入视屏地址或者文件信息（以地址为例），创建视频标签，并添加至canvas上，获取视频信息返回图片地址，用video的poster属性渲染出来
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

m0_57121248

关注关注

9
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
移动端使用原生video标签不显示第一帧问题

移动端不显示第一帧问题
复制链接

扫一扫

关于微信浏览器video不自动播放并且获取第一帧和总时长的问题

qq_35431814的博客

08-20

5168

关于微信浏览器video标签获取第一帧和总时长的问题最近项目中需要上传视频并限制播放时长。还要展示第一帧画面技术实现。通过Input file 获取上传的视频资源，读取之后转成blob，放到video标签上。然后获取第一帧和视频时长。问题来了在pc开发的时候。video标签可以自动获取到第一帧。然后video onloadeddata的方法。可以获取时间。但是在微信端因为视频是不能自动播...

HTML页面原生VIDEO标签隐藏下载按钮功能

09-28

HTML页面中的原生`<video>`标签是一种强大的工具，用于在网页上嵌入视频内容。这个标签提供了丰富的功能，如播放、暂停、控制音量等，使得开发者无需依赖第三方插件就能实现视频播放。然而，在某些场景下，我们可能...

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

h5 video 移动端 视频添加第一帧作为播放前图片

qq_26642611的博客

03-05

3383

第一步：添加视频video标签，添加src， poster，controls属性第二步：poster = src的值 + ‘?vframe/jpg/offset/1’ 这样就可以显示视频第一帧图片了，作为视频播放器的图片 ...

H5，移动端，video标签截取视频第一帧，做为poster视频封面，找了很多方法，看了很多，最后发现这个办法真的，绝

weixin_54256416的博客

11-18

4222

在本地的时候，浏览器自动截取了第一帧作为视频的poster封面，但是到移动端，就展示空白，设置了自动播放，但是安卓仍然有bug，展示一个巨大的按钮，现在就给他截取第一帧作为封面，来解决。

前端小知识(四)：video视频获取第一帧作为展示

最新发布

Dwa_ww的博客

05-27

1057

移动端h5video视频展示空白问题，添加第一帧作为展示

移动端video获取了第一帧显示不出来_(强烈推荐)移动端音视频从零到上手（上）...

weixin_39952182的博客

11-30

1752

本文已获得作者授权，原文作者：小东邪原文链接：https://juejin.im/post/5d29d884f265da1b971aa220概述随着整个互联网的崛起，数据传递的形式也在不断升级变化，总的流行趋势如下：纯文本的短信，QQ -> 空间，微博，朋友圈的图片文字结合 -> 微信语音 -> 各大直播软件 -> 抖音短视频音视频的发展正在向各个行业不断扩展，...

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

m0_54364474的博客

06-30

3728

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

video标签展示视频第一帧~

weixin_54256416的博客

02-22

2006

video标签展示视频第一帧~ 文章最后有一句代码实现第一帧的方法，可点击查看

vedio标签在微信浏览器下不会默认视频封面第一帧

xuanmeimei123的博客

08-30

740

vedio标签加上：preload=“metadata”，src里加上#t=1，设置autoPlay属性时可忽略preload属性。以上在安卓机的微信浏览器下已经正常了，但是在IOS环境下还是不行。vedio标签在微信浏览器下不会默认视频封面第一帧。

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

weixin_35786759的博客

12-24

2577

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

larkplayer是一款基于html5video的移动端播放器

08-10

larkplayer的核心在于充分利用HTML5的video元素，这是一种原生的网页媒体播放解决方案，具有良好的跨平台兼容性和性能。HTML5 video不仅支持多种视频格式，如MP4、WebM和Ogg，还能提供播放、暂停、快进、快退等基本...

mui手机移动端图文视频内容管理系统模板

07-13

6. **视频支持**：模板可能集成了视频播放功能，例如使用HTML5的video标签，或引入第三方视频播放库如video.js，以实现流畅的视频播放体验。 7. **图文混排**：模板应具备将图片和文字灵活组合的能力，使内容呈现更...

使用HTML5编写的移动端仿途牛页面

10-16

4. **媒体元素（Media Elements）**：通过`<audio>`和`<video>`标签，HTML5支持直接在网页内嵌入音频和视频，无需第三方插件，对于展示旅游目的地的风光或提供旅行攻略非常有用。 5. **Canvas与SVG**：`Canvas`提供...

videojs源码rtmp推流hls播放器html5原生态播放器可用

09-02

在videojs中，可以通过第三方插件如videojs-flash来实现RTMP的推流。首先，确保安装了videojs和videojs-flash，然后在HTML中设置相应的source标签，通过RTMP协议指向服务器的流地址。在JavaScript中，可以使用video...

video标签获取视频第一帧

choupixiaolin的博客

09-28

2948

video标签获取视频第一帧

video中视频初始化显示第1帧

weixin_45389051的博客

07-04

1887

【代码】video中视频初始化显示第1帧。

微信小程序：video标签默认显示视频的第一帧作为封面

热门推荐

彭世瑜的博客

07-06

1万+

微信小程序：video标签默认显示视频的第一帧作为封面 <video src="video_url" controls="{{false}}" initial-time='0.01' muted autoplay object-fit="cover"></video> 参数 src 资源地址 controls：显示播放控件 initial-time：指定视频初始播放位置，设置为大于0的值，就会自动加载视频 au

移动端video获取了第一帧显示不出来_学员整理笔记系列11-移动端自动化笔记

weixin_39830303的博客

11-27

326

移动端自动化移动端，能上网有操作系统操作系统分类：桌面类：windows应用多、mac不需要安装别的开发环境（除.net）、Linux应用少服务器类：windows病毒多不能一直不关机、Linux可长时间不关机嵌入式：Linux移动端：Android谷歌、Ios苹果App分类原生是用java敲出来的input，并且原生无需网络也能用运行速度特别快无卡顿，而且原生系统必须分别写Andro...

移动端中使用js 让input 聚焦时不抬起手机原生键盘

06-09

在移动端中，可以使用 `focus()` 方法来让 `input` 元素获得焦点，但是默认情况下会弹出手机原生键盘。如果需要在不弹出键盘的情况下让 `input` 元素获得焦点，可以使用 `blur()` 方法先将 `input` 元素失焦，然后再使用 `focus()` 方法让其重新获得焦点。代码示例如下： ```javascript const input = document.getElementById('myInput'); input.blur(); input.focus(); ``` 这样就可以在不弹出键盘的情况下让 `input` 元素获得焦点了。需要注意的是，在某些移动设备上可能无法完全禁用原生键盘，因此可能仍然会出现键盘的弹出。