写在前面

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. centos6.7 配置MongoDB日志

    这篇日志记录了笔者最近在centos6.7的系统中配置MongoDB的流程,参考了博客https://www.centos.bz/2017/08/centos-6-5-yum-install-mong ...

  2. JVM 学习（二）Java 内存模型、方法内联、逃逸 --- 2019年4月

    1.Java 的内存模型 定义了 happens-before,如果同一个线程中,字节码的先后顺序,后者观测了前者的运行结果,那么就会按顺序执行. Java 线程之间的通信由 Java 内存模型控制. ...

  3. javascript权威指南笔记[6-8]

    1.三类对象,两类属性 2.原型链只有在查询的时候才会体现 3.对象属性访问 4.属性赋值 5.delete只是断开属性和宿主对象的关系,不会去操作属性中的属性 6.Object.ke() var m ...

  4. HTML之常用标签及属性

    标签 标签分类 标签名 英文 英文含义 标签类型 备注 HTML页面结构 < html> HyperText Markup Language 超文本标记语言 < head> h ...

  5. PHP内核之旅-6.垃圾回收机制

    回收PHP 内核之旅系列 PHP内核之旅-1.生命周期 PHP内核之旅-2.SAPI中的Cli PHP内核之旅-3.变量 PHP内核之旅-4.字符串 PHP内核之旅-5.强大的数组 PHP内核之旅-6 ...

  6. 用ASP.NET Core 2.1 建立规范的 REST API -- 翻页/排序/过滤等

    本文所需的一些预备知识可以看这里: http://www.cnblogs.com/cgzl/p/9010978.html 和 http://www.cnblogs.com/cgzl/p/9019314 ...

  7. go get golang.org被墙问题解决

    go get golang.org被墙问题解决 今天在下载golang.org/x/image/tiff的时候出错 > go get -v golang.org/x/image/tiff Fet ...

  8. 深入浅出mongoose

    深入浅出mongoose mongoose是nodeJS提供连接 mongodb的一个库. 此外还有mongoskin, mongodb(mongodb官方出品). 本人,还是比较青睐mongoose ...

  9. 使用 ASP.NET Core MVC 创建 Web API（四）

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...

  10. [开源]Dapper Repository 一种实现方式

    接着上篇[开源]Entity Framework 6 Repository 一种实现方式 由于Dapper 本身就是轻量级Orm特性,这里参考Creating a Data Repository us ...