当视频时间较长或者较大需要加载完才能开始播放时对用户体验及其不友好!这时就需要解决视频边加载边播放的问题;

第一次做视频教学网站,使用的ckplayer播放器,在测试时发现客户上传的视频必须加载完才能播放,如下图1-1:

1-1

但是我们自己上传的视频就可以边加载边播放,如下图1-2:

1-2

带着疑问我去后台把两个视频都下载下来寻找两个视频的共同点和不同点(2.mp4是正常边加载边播放的,hm.mp4是需要加载完才能播放的);

1-3

共同点:都是mp4格式;

接下来寻找不同点,根据ckplayer手册 http://www.ckplayer.com/tool/help/64.htm

提到:因为网页上的视频播放器播放视频是以流的形式加载(即没办法直接加载视频结尾的数据,只能从前向后加载),所以播放器必需要读取到元数据信息才可以进行播放,元数据信息需在视频的第一帧才可实现边加载边播放的效果;

根据这个我去验证了hm.mp4,直接把视频的元数据移入到第一帧,看是否成功;

下面介绍将视频的元数据移入第一帧的方法:

首先去下载ffmpeg  http://ffmpeg.zeranoe.com/builds/

和qt-faststart    http://www.ckplayer.com/down/qt-faststart.rar

然后运行下面3个文件:

1-4

接着ctrl + r输入cmd打开命令板,找到你所解压的bin文件夹下输入 qt-faststart.exe F:/hm.mp4 F:/hm2.mp4 (前面是你的源视频地址,后面是将视频元数据移到第一帧的视频地址,文件名可以自己随意命名) 再回车

结果发现并没有成功,报错信息“last atom in file was not a moov atom” 视频的最后的元数据不是视频moov信息,也就是尚未捕获到该视频的元数据;

1-5

这样我们就需要将视频先转码,使用刚开始下载的ffmpeg,里面有三个工具

ffmpeg.exe:音视频转码、转换器

ffplay.exe:简单的音视频播放器

ffprobe.exe:简单的多媒体码流分析器

1-6

使用ffmpeg.exe来实现视频转码,ffmpeg.exe -i F:\hm.mp4 -acodec copy -vcodec copy F:\hm2.mp4(第一个视频是源视频,第二个是转码后的视频地址)  回车

然后就看到了关于视频元数据的一些信息

1-7

接着我们把转码后的视频元数据移入第一帧,qt-faststart.exe F:/hm2.mp4 F:/hm3.mp4  回车

1-8

最后把hm3.mp4从后台上传,再播放视频的时候就可以实现边加载边播放了

使用ffmpeg解决网页端 视频不能边加载边播放的问题相关推荐

  1. 解决网页中Waiting (TTFB)数据加载过慢的问题

    解决网页中Waiting (TTFB)数据加载过慢的问题 最近做了一个网页,在本地测试良好,数据可以得到很快的反馈,但是当部署到云端Linux上时候,就会出现加载缓慢的问题.本地测试,得到数据大概3s ...

  2. 解决移动端视频层级最高的问题,修改video属性

    解决移动端视频层级最高的问题,修改video属性 参考文章: (1)解决移动端视频层级最高的问题,修改video属性 (2)https://www.cnblogs.com/shimily/articl ...

  3. Unity3D 网页插件Embedded Browser(ZFBrowser)PC端打包文件无法加载网页解决方法

    网页插件Embedded Browser(ZFBrowser)PC端打包文件无法加载网页 介绍:使用Embedded Browser开发unity项目内嵌网页,打包后发现出现一个问题网页插件无响应,而 ...

  4. 参考 | Python 下载网页端视频

    Python | 下载网页端视频

  5. 最简单的基于FFmpeg的移动端例子附件:IOS自带播放器

    ===================================================== 最简单的基于FFmpeg的移动端例子系列文章列表: 最简单的基于FFmpeg的移动端例子:A ...

  6. python博客下载本地文件_解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了...

    1.今天网上下载一个博客项目,发现本地访问,js,css加载不了. 我想应该是项目上线的安全措施,但是我想调试项目.找到方法如下 在settings.py里面编辑 添加 STATICFILES_DIR ...

  7. Coursera的视频一直加载无法播放问题的完整解决【win10】

    Coursera的视频一直加载无法播放问题的完整解决[win10] 问题来源:注册了coursera,准备原汁原味地学练吴恩达老师的机器学习和深度学习教程,自加入课程起会有日程安排,太懒了,拖到人家连 ...

  8. 节操 饺子视频一直在加载状态!!解决办法

    节操 饺子视频一直在加载状态!!解决办法 android:hardwareAccelerated这个是硬件加速 如果关闭则饺子视频 节操视频都会一直在加载状态 将 android:hardwareAc ...

  9. 用ffmpeg修改MP4文件头信息,使其支持流式加载及播放

    经常有用户反映,有些网页中加载的mp4文件,有的可以加载一点就开始播放,有的就必须全部加载完才能播. 经核实,主要是头信息的数据顺序有关,用工具:mp4info.exe可以查看mp4文件的结构信息: ...

最新文章

  1. apache不能能够解析php文件
  2. 用户画像解决方案视频教程
  3. mysql去除输入的字符串中的中文_Sql得到(去除)字符串中所有汉字,字母,数字的函数...
  4. Samba与Vsftpd结合在企业中的应用
  5. PMcaff-运营 | 用户运营中的认知丶考虑丶行动模型
  6. (3两个例子)从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
  7. 利用两款软件实现图片转文字
  8. Java之杨辉三角的实现
  9. java 泛型 class t_java 泛型中classT 和T的区别是什么?
  10. oracle中的数据读取与查找
  11. synchronized猎奇
  12. Silverlight 自定义表格 转
  13. android gridvie item,Android开发―解决自定义GridView高度第一个item高度异常问题
  14. 关于哈希表,你该了解这些!
  15. win7原版iso镜像下载 windows7官方原版全系列(正式版、专业版、企业版、家庭版)下载
  16. 爱希ISee人体感应器,雷达人体存在探测应用,毫米波雷达技术方案
  17. matlab刻度字体,matlab 设置横纵坐标刻度的字体!!
  18. Android自定义View之仿金山词霸加载效果
  19. 丰桥自助打印顺丰面单
  20. 关于B树的思考:m阶B树的非根非叶节点为什么要至少为ceil(m/2)个孩子? c/c++描述

热门文章

  1. 【论文解读系列】NER方向:FGN (2020)
  2. 操作系统android的收银系统,基于Android的小微商户移动收银系统设计与实现
  3. springboot jar包解压后运行
  4. Android编辑框不能输入汉字,Android编程中EditText限制文字输入的方法
  5. 【C++】CRTP:奇异递归模板模式
  6. 感知机 matlab,【详细】用matlab实现感知机
  7. 【D3D11游戏编程】学习笔记九:编译Effect的方法
  8. 狂涨结束:内存和固态硬盘终于要降价了
  9. flutter 桌面app启动图标右上角红点实现(消息通知)
  10. C++删除单链表指定元素