写在前面

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. AI - TensorFlow - 过拟合（Overfitting）

    过拟合 过拟合(overfitting,过度学习,过度拟合): 过度准确地拟合了历史数据(精确的区分了所有的训练数据),而对新数据适应性较差,预测时会有很大误差. 过拟合是机器学习中常见的问题,解决方 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登录

    壹周回顾 哈喽,又是元气满满的一个周一,又与大家见面了,周末就是团圆节了,正好咱们的前后端也要团圆了,为什么这么说呢,因为以后的开发可能就需要前后端一起了,两边也终于会师了,还有几天Vue系列就基本告 ...

  3. ng跳转映射，被阿里云的云盾拦截，提示备案问题分析

    在一个云项目调试过程中,ng映射到云时,发现被云盾拦截,提示备案. 1.客户提供的二级域名已经在华为云备案,映射的主机部署在阿里云. 2.ng映射域名时,出现备案提醒,f12调试发现跳转时,被拦截了. ...

  4. 如何在ASP.NET Core程序启动时运行异步任务（3）

    原文:Running async tasks on app startup in ASP.NET Core (Part 3) 作者:Andrew Lock 译者:Lamond Lu 之前我写了两篇有关 ...

  5. Devexpress常见问题

    1.DevExpress控件组中的GridControl控件不能使横向滚动条有效. 现象:控件中的好多列都挤在一起,列宽都变的很小,根本无法正常浏览控件单元格中的内容. 解决:gridView1.Op ...

  6. jenkins maven 自动远程发布到服务器，钉钉提醒团队

    jenkins 自动远程发布到服务器 1.安装jenkins 安装过程:自行百度 英文不好的,不要装最新版的jenkins.建议安装Jenkins ver. 2.138.4,此版本可以设置中文语言,设 ...

  7. Pi Hybrids问题

    Pi Hybrids问题 清华大学肖秀波梁湧老师翻译的Rardin教授的<运筹学>[1]已于今年年中出版,感谢机械工业出版社张有利老师的推荐和赠书,让我能看到如此完美的千页级宏篇译著.该书 ...

  8. C++求集合的交集差集

    标准库的<algorithm>头文件中提供了std::set_difference,std::set_intersection和std::set_union用来求两个集合的差集,交集和并集 ...

  9. 每周分享五个 PyCharm 使用技巧（二）

    这是 「PyCharm 技巧分享」系列的第二篇分享.由于上一篇文章得到了大家的一些赞同,所以今天又来给大家推荐一些我平时自己有用的小技巧,大家择需所取即可. 先声明下,并不保证对所有的人都是有帮助的, ...

  10. WebServeice 动态代理类

    1, webservice是什么? 是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配置这些应用程序 ...