写在前面

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. Java相关面试题总结+答案（一）

    [Java基础] 1. JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,即Java开发工具包,提供了Java 的开发环境和运行环境. JRE:Java Ru ...

  2. TCP三次握手和四次挥手的全过程

    三次握手: 第一次握手:客户端发送syn包(syn=x)到服务器,并进入SYN_SEND状态,等待服务器确认:第二次握手:服务器收到syn包,必须确认客户的SYN(ack=x+1),同时自己也发送一个 ...

  3. 【Git之旅】1.Git常用命令

    1.创建初始化版本库 git init 2.将文件添加到版本库中 git add index.html (添加到暂存区) git add . 命令让Git把当前目录及目录中的文件都添加到版本库里 gi ...

  4. 死磕 java集合之LinkedHashSet源码分析

    问题 (1)LinkedHashSet的底层使用什么存储元素? (2)LinkedHashSet与HashSet有什么不同? (3)LinkedHashSet是有序的吗? (4)LinkedHashS ...

  5. Centos扩容swap分区

    今天在vps上装了个msf,装了一半竟然被kill掉了,因为RAM只有512M,swap也只有130M.遂到网上寻求解决办法,下面是我的笔记: 查看当前swap大小: free -h 修改swap大小 ...

  6. 从零开始学安全(四十五)●browser_autopwn2漏洞利用配合Ettercap工具实施DNS欺骗攻击

    系统:kali 2019  工具Ettercap,Metasploit 环境内网地址 首先 cd /etc/ettercap/ 移动在ettercap 文件下 在用vim 打开编辑 etter.dns ...

  7. Linux IO模型（同步异步阻塞非阻塞等）的几篇好文章

    聊聊同步.异步.阻塞与非阻塞聊聊Linux 五种IO模型聊聊IO多路复用之select.poll.epoll详解 ​

  8. es6 generator函数

    es6 新增了Generator函数,一种异步编程的解决方案 回顾一下,es6 提供了新的遍历方法,for of ,适用于各种数据集合,统一了遍历操作,原生支持for of 集合的数据集合有.数组,字 ...

  9. vue -webkit-box-orient: vertical webpack打包后被过滤掉了 线上没有这行代码

    (1)方法一:加上绿色注释,跳过webpack的css打包 .word-overflow-{ overflow:hidden; text-overflow:ellipsis; display:-web ...

  10. HashTable、ConcurrentHashMap、TreeMap、HashMap关于键值的区别

    集合类 key value super 说明 HashTable 不能为null 不能为null Dictionary 线程安全 ConcurrentHashMap 不能为null 不能为null A ...