写在前面

video标签,获取第一帧作为poster。网上能找着很多案例,很容易实现,在pc端 效果明显。但是在移动端,这些实现方式并不能起作用。原因是 移动端 对video标签的限制,许多video事件  譬如 loadeddata 等事件 并不好使。

解决思路:

使用自动播放,利用timeupdate 事件,让其停留在第一帧。

实现(vue)

特殊处理:

华为浏览器 无法自动播放, timeupdate 事件会导致 第一次播放出现暂停。解决 方式就是 video 上方覆盖一层div,利用 点击事件 手动转换。

写在最后

该方式只是一种 折中方案,最好的体验效果 还是由后台 传输图片过来,设置poster

video标签,在移动端获取第一帧作为展示的更多相关文章

  1. video 获取第一帧的图片作为封面

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. video标签在移动端的一些属性值设置

    <video x5-video-orientation="portraint" src="" loop x-webkit-airplay="al ...

  3. (腾讯视频)iOS开发之视频根据url获取第一帧图片,获取任一帧图片

    #import <AVFoundation/AVFoundation.h> + (UIImage*) thumbnailImageForVideo:(NSURL *)videoURL at ...

  4. 关于video标签移动端开发遇到的问题,获取视频第一帧,全屏,自动播放,自适应等问题

    最近一直在处理video标签在IOS和Android端的兼容问题,其中遇到不少坑,绝大多数问题已经解决,下面是处理问题经验的总结: 1.获取视频的第一帧作为背景图: 技术:canvas绘图 windo ...

  5. 移动端Video标签踩坑记录

    需求 用户能在手机上上传视频并预览. 问题 上传完成后安卓下封面展示正常,ios下封面空白.如下图所示: 利用canvas截取视频第一帧发现,ios下截取到的第一帧一直是空白图片, 安卓正常. 后端利 ...

  6. java获取视频播第一帧

    FFMPEG 功能很强大,做视频必备的软件.大家可通过 http://ffmpeg.org/ 了解.Windows版本的软件,可通过 http://ffmpeg.zeranoe.com/builds/ ...

  7. 通过 ffmpeg 获取视频第一帧(指定时间)图片

    最近做一个上传教学视频的方法,上传视频的同时需要上传视频缩略图,为了避免用户上传的缩略图与视频内容不符,经理要求直接从上传的视频中截图视频的某一帧作为缩略图,并给我推荐了FFMPEG.FFMPEG 功 ...

  8. javacv获取视频第一帧

    第一种是用ffmpeg工具,不过还得安装客户端软件,于是放弃了,还有一种是javacv开源工具,所以选择第二种: 第一种:ffmpeg工具 需要安装ffmpeg软件,支持windows和linux,视 ...

  9. Android -- 获取视频第一帧缩略图

    干货 从API 8开始,新增了一个类: android.media.ThumbnailUtils这个类提供了3个静态方法一个用来获取视频第一帧得到的Bitmap,2个对图片进行缩略处理. public ...

随机推荐

  1. Node.js微服务实践(一)

    什么是微服务 微服务是一种架构风格,一个大型复杂软件应用由一个或多个微服务组成.系统中的各个微服务可被独立部署,各个微服务之间是松耦合的.每个微服务仅关注于完成一件任务并很好地完成该任务.在所有情况下 ...

  2. [Abp vNext 源码分析] - 3. 依赖注入与拦截器

    一.简要说明 ABP vNext 框架在使用依赖注入服务的时候,是直接使用的微软提供的 Microsoft.Extensions.DependencyInjection 包.这里与原来的 ABP 框架 ...

  3. javaScript设计模式之面向对象编程(object-oriented programming,OOP)--寄生组合式继承

    组合式继承:将类式继承同构造函数继承组合使用,但是存在一个问题,子类不是父类的实例,而子类的原型式父类的实例,所以才有了寄生组合式继承. 意思就是说,寄生就是寄生式继承,寄生式继承就是依托于原型继承, ...

  4. Spring Cloud微服务系列文,服务调用框架Feign

    之前博文的案例中,我们是通过RestTemplate来调用服务,而Feign框架则在此基础上做了一层封装,比如,可以通过注解等方式来绑定参数,或者以声明的方式来指定请求返回类型是JSON.    这种 ...

  5. Android Studio开发环境配置以及相关说明

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 这里简单记录下在开发的时候使用的Android Studio开发环境版本以及相关注意事项. 一般来讲,每隔一段时间就要检查下Andr ...

  6. springboot~jpa个性化数据操作接口

    jap是个全能仓储 jap把很多数据库访问都封装了,并且提交了默认的一切数据方法签名的约定,大家按着约定走,可以不写SQL语句,而如果比较复杂的情况,也需要写SQL,这里我们介绍一下查询和修改的实例方 ...

  7. Win32对话框程序(2)

    接着Win32对话框程序(1)来写 ,解决遗留的问题,即理解函数及其调用关系.文章中有些地方是自己的推断,因此肯定有叙述不准确甚至错误的地方,请指正,感谢~ ********************* ...

  8. spring boot 2.0 ribbon 负载均衡配置

    1.pom.xml <dependency> <groupId>org.springframework.cloud</groupId> <artifactId ...

  9. 【转】Redis一般会遇到的问题以及解析

    单线程的 Redis 为什么这么快 这个问题是对 Redis 内部机制的一个考察.根据我的面试经验,很多人都不知道Redis 是单线程工作模型.所以,这个问题还是应该要复习一下的. 回答主要是以下三点 ...

  10. phpstorm 代码注释后,撤销某段代码的注释的,快捷键是什么?

    phpstorm 的代码注释有两种风格,一种是双斜杠,另一种是 /* ...  */风格,两者的快捷键都是开关式(即按第一次为注释,再按一次为撤销注释),快捷键如下: 1.双斜杠注释   Ctrl + ...