写在前面

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. vimium使用

    vimium使用 chrome下面的vimium插件已经慕名已久,迟迟没有做尝试,今天在家有空就熟悉了一下vimium,感觉还是棒棒的.记录一下一些使用心得. 常用按钮 j 向上滚动 k 向下滚动 d ...

  2. Python：SQLMap源码精读—基于时间的盲注（time-based blind）

    建议阅读 Time-Based Blind SQL Injection Attacks 基于时间的盲注(time-based blind) 测试应用是否存在SQL注入漏洞时,经常发现某一潜在的漏洞难以 ...

  3. 【Android Studio安装部署系列】一、JDK开发环境搭建

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Android Studio安装后自带jre,这个自带jre的版本号肯定比最新的版本号要小. 但是如果项目中没有用到新版本jdk的特 ...

  4. ubuntu上配置nginx实现反向代理

    反向代理 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客 ...

  5. Redis缓存你必须了解的！

    不管你是从事Python.Java.Go.PHP.Ruby等等… Redis都应该是一个比较熟悉的中间件.而大部分经常写业务代码的程序员,实际工作中或许只用到了set value.get value两 ...

  6. Mysql、SqlServer、Oracle三大数据库的区别

    一.MySQL 优点: 体积小.速度快.总体拥有成本低,开源: 支持多种操作系统: 是开源数据库,提供的接口支持多种语言连接操作 : MySQL的核心程序采用完全的多线程编程.线程是轻量级的进程,它可 ...

  7. 中介者模式 调停者 Mediator 行为型 设计模式（二十一）

      中介者模式(Mediator)   调度.调停   意图 用一个中介对象(中介者)来封装一系列的对象交互,中介者使各对象不需要显式地相互引用,从而使其耦合松散 而且可以独立地改变它们之间的交互. ...

  8. 001. Java内存中的字符编码

    Java内存中的字符编码 Unicode字符集及utf-8 .utf-16.utf-32 等字符编码方式 字符集:字符表示的数字集合,元素称为码点或码位: 字符编码:字符实际的储存表示: 码点:一个码 ...

  9. 虚拟机安装CentOS7（一）

    软件环境 虚拟机:VMware Workstation Linux:CentOS-7-x86_64-DVD-1708.iso镜像文件 虚拟机所在电脑系统:win7 安装步骤 安装VMware 下载Li ...

  10. thinkPHP5.0 URL路由优化

    在tp中访问页面的时候URL地址是 域名/模块/控制器/方法,在点击首页的时候URL是 域名/index/index/index 而不是只显示域名,这样不利于SEO,而且强迫症的我看着很不爽,这个时候 ...