写在前面

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. Oracle11g创建表空间、创建用户、角色授权、导入导出表以及中文字符乱码问题

    [转载]原文地址:https://www.cnblogs.com/bjh1117/p/6605037.html 前提:本机已经安装了Oracle11g数据库. 需求:使用PL SQL数据库连接工具操作 ...

  2. 来一波C#发送邮件

    1.所用工具和资源:VS2012   在.NET Frameword类库中提供SmtpClient类(System.NET.Mail) 2.运行截图 3.具体代码实现如下: using System; ...

  3. VS2013 百度云资源以及密钥

    https://pan.baidu.com/s/1eu3XycWO8fWItmkFeYNv9w提取码:dy9r 密钥:BWG7X-J98B3-W34RT-33B3R-JVYW9 vs2015 http ...

  4. Python开发：部分第三方库无法在线安装解决方法

    前言:Python开发:Python2和Python3的共存和切换使用 一.问题如下: 1.截图: 2.错误信息: Could not find a version that satisfies th ...

  5. 【Android Studio安装部署系列】十二、Android studio代码混淆

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 为什么需要代码混淆呢?原因很简单,你的apk很容易被反编译出来,你写的代码都会被看到,因此我们需要在编译过程中对代码进行一定程度的混 ...

  6. TabTopLayout【自定义顶部选项卡区域（固定宽度且居中）】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡并居中显示.结合显示/隐藏view的方式实现切换功能(正常情况下可能是切换fragment). 效果图 代码分析 T ...

  7. Redis哨兵机制

    Redis Sentinel物理结构图 角色 IP Port 别名 master 127.0.01 6379 主节点 slave-1 127.0.01 6380 slave-1节点 slave-2 1 ...

  8. 2.4配置的热更新「深入浅出ASP.NET Core系列」

    希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,谢谢关注. 大家知道通常我们修改网站的配置文件比如,webconfig的时候,网站需要重启才能读取到最新的修改,所谓热更新就是 ...

  9. 页面优化，谈谈重绘(repaint)和回流(reflow)

    一.前言 偶尔在面试过程中遇到过重汇与回流reflow的问题,毕竟页面优化也是考核一个开发者能力的关键之一,上篇文章聊了下documentfragment也是为了减轻回流问题,那么本篇文章好好介绍下重 ...

  10. EF 查询视图出现重复数据

    解决方案: 由多张表组成的视图,要加实体键.而且实体键组合要能确保唯一性. 个人理解:确保唯一性,一个或多个实体键,实现了复合主键或组合主键的效果. 这样查询是,延迟加载机制,才知道哪些需要重新从数据 ...