Webm进度条问题分析与解决
介绍
当我们使用getUserMedia
、MediaRecorder
等API生成的webm
视频时,会发现最终的webm是无法拖动进度条的。除非使用FFmpeg
把webm转成其他格式的视频文件,或者等webm视频播放完后,就可以拖动了。
分析
经过几个小时的排查,发现并不是MediaRecorder
使用有问题,因为在网上找的其他demo生成的webm也都不行。
一开始把分析点放在了进度条那里,结果在网上没有搜到任何相关文章,尝试了各种关键词都不行。
后来想到,可以使用FFmpeg
来对视频文件进行分析。于是使用ffprobe rebirth-demo.webm
命令进行分析:
$ ffprobe rebirth-demo.webm
ffprobe version 4.1.3 Copyright (c) 2007-2019 the FFmpeg developersbuilt with Apple LLVM version 10.0.1 (clang-1001.0.46.4)configuration: --prefix=/usr/local/Cellar/ffmpeg/4.1.3_1 --enable-shared --enable-pthreads --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags='-I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include -I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include/darwin' --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libmp3lame --enable-libopus --enable-librubberband --enable-libsnappy --enable-libtesseract --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libx264 --enable-libx265 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librtmp --enable-libspeex --enable-videotoolbox --disable-libjack --disable-indev=jack --enable-libaom --enable-libsoxrlibavutil 56. 22.100 / 56. 22.100libavcodec 58. 35.100 / 58. 35.100libavformat 58. 20.100 / 58. 20.100libavdevice 58. 5.100 / 58. 5.100libavfilter 7. 40.101 / 7. 40.101libavresample 4. 0. 0 / 4. 0. 0libswscale 5. 3.100 / 5. 3.100libswresample 3. 3.100 / 3. 3.100libpostproc 55. 3.100 / 55. 3.100
Input #0, matroska,webm, from 'rebirth-demo.webm':Metadata:encoder : ChromeDuration: N/A, start: 0.000000, bitrate: N/AStream #0:0(eng): Audio: opus, 48000 Hz, stereo, fltp (default)Stream #0:1(eng): Video: vp8, yuv420p(progressive), 1920x1080, SAR 1:1 DAR 16:9, 60 tbr, 1k tbn, 1k tbc (default)Metadata:alpha_mode : 1
复制代码
关键点来了,可以发现其中:Duration
和bitrate
的值都是N/A
,这是不正常的,于是去搜一下webm duration
,果然网上有很多的说明文章。
大体意思是,因为getUserMedia
、MediaRecorder
在生成webm时,并没有提供相关Duration
和bitrate
。导致出现这种问题。
解决方案
一、计算视频长度,分配给blob
这种方法的核心就是,在start
开始录制时,记录一个开始时间,然后在stop
停止录制后,把当前时间与记录的开始时间相减,在把时间赋值给blob
来解决这个问题。相关解决方案可见:fix-webm-duration
二、通过给audio标签一个很大的时间
在播放webm视频时,可以动态的给audio一个很大的时间,来解决这个问题,但是目前只针对chrome
有效。相关解决方案可见:How can I add predefined length to audio recorded from MediaRecorder in Chrome?
三、跳到结尾,再跳到开头
因为上文说过,当视频播放完后,就可以拖动了,那么只需要通过JS
来控制当前的视频位置就可以解决了。相关解决方案可见:hello-its-me
四、通过ffmpeg来解决
第一个解决的命令如下:ffmpeg -i rebirth-demo.webm xixi.webm
,但是这个命令会很漫长,不太推荐。30秒的视频,需要花费3分钟左右的时间。
第二个命令是:ffmpeg -i rebirth-demo.webm -vcodec copy -acodec copy new_rebirth-demo.webm
。这个十分的快,因为本身是直接复制,而不是转化:
ffmpeg -i rebirth-demo.webm -vcodec copy -acodec copy new_rebirth-demo.webm
ffmpeg version 4.1.3 Copyright (c) 2000-2019 the FFmpeg developersbuilt with Apple LLVM version 10.0.1 (clang-1001.0.46.4)configuration: --prefix=/usr/local/Cellar/ffmpeg/4.1.3_1 --enable-shared --enable-pthreads --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags='-I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include -I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include/darwin' --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libmp3lame --enable-libopus --enable-librubberband --enable-libsnappy --enable-libtesseract --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libx264 --enable-libx265 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librtmp --enable-libspeex --enable-videotoolbox --disable-libjack --disable-indev=jack --enable-libaom --enable-libsoxrlibavutil 56. 22.100 / 56. 22.100libavcodec 58. 35.100 / 58. 35.100libavformat 58. 20.100 / 58. 20.100libavdevice 58. 5.100 / 58. 5.100libavfilter 7. 40.101 / 7. 40.101libavresample 4. 0. 0 / 4. 0. 0libswscale 5. 3.100 / 5. 3.100libswresample 3. 3.100 / 3. 3.100libpostproc 55. 3.100 / 55. 3.100
Input #0, matroska,webm, from 'rebirth-demo.webm':Metadata:encoder : ChromeDuration: N/A, start: 0.000000, bitrate: N/AStream #0:0(eng): Audio: opus, 48000 Hz, stereo, fltp (default)Stream #0:1(eng): Video: vp8, yuv420p(progressive), 1920x1080, SAR 1:1 DAR 16:9, 60 tbr, 1k tbn, 1k tbc (default)Metadata:alpha_mode : 1
Output #0, webm, to 'new_rebirth-demo.webm':Metadata:encoder : Lavf58.20.100Stream #0:0(eng): Video: vp8, yuv420p(progressive), 1920x1080 [SAR 1:1 DAR 16:9], q=2-31, 60 tbr, 1k tbn, 1k tbc (default)Metadata:alpha_mode : 1Stream #0:1(eng): Audio: opus, 48000 Hz, stereo, fltp (default)
Stream mapping:Stream #0:1 -> #0:0 (copy)Stream #0:0 -> #0:1 (copy)
Press [q] to stop, [?] for help
frame= 3589 fps=0.0 q=-1.0 Lsize= 2107kB time=00:01:59.92 bitrate= 143.9kbits/s speed=4.75e+03x
video:2053kB audio:16kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 1.849351%
$ ffprobe new_rebirth-demo.webm
ffprobe version 4.1.3 Copyright (c) 2007-2019 the FFmpeg developersbuilt with Apple LLVM version 10.0.1 (clang-1001.0.46.4)configuration: --prefix=/usr/local/Cellar/ffmpeg/4.1.3_1 --enable-shared --enable-pthreads --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags='-I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include -I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include/darwin' --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libmp3lame --enable-libopus --enable-librubberband --enable-libsnappy --enable-libtesseract --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libx264 --enable-libx265 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librtmp --enable-libspeex --enable-videotoolbox --disable-libjack --disable-indev=jack --enable-libaom --enable-libsoxrlibavutil 56. 22.100 / 56. 22.100libavcodec 58. 35.100 / 58. 35.100libavformat 58. 20.100 / 58. 20.100libavdevice 58. 5.100 / 58. 5.100libavfilter 7. 40.101 / 7. 40.101libavresample 4. 0. 0 / 4. 0. 0libswscale 5. 3.100 / 5. 3.100libswresample 3. 3.100 / 3. 3.100libpostproc 55. 3.100 / 55. 3.100
Input #0, matroska,webm, from 'new_rebirth-demo.webm':Metadata:ENCODER : Lavf58.20.100Duration: 00:01:59.96, start: 0.000000, bitrate: 143 kb/sStream #0:0(eng): Video: vp8, yuv420p(progressive), 1920x1080, SAR 1:1 DAR 16:9, 60 tbr, 1k tbn, 1k tbc (default)Metadata:ALPHA_MODE : 1DURATION : 00:01:59.928000000Stream #0:1(eng): Audio: opus, 48000 Hz, stereo, fltp (default)Metadata:DURATION : 00:01:59.955000000
复制代码
可见已经没有问题了
总结
我个人倾向于最后一种,因为前面几个方法并没有实际性解决这个问题。
目前chrome团队不认为这是一个BUG。之前社区也讨论过。
社区讨论地址:bugs.chromium.org/p/chromium/…
作者信息:
- Author: Black-Hole
- Blog: bugs.cc/
- github: github.com/BlackHole1/
- Twitter: twitter.com/Free_BlackH…
- Email: 158blackhole@gmail.com
其他
我司(爱乐奇)招人,感兴趣的小伙伴可以来投简历呀。
弹性工作制、每日水果、同事都特别nice、965、团建、五险一金...
地点上海浦软大厦
转载于:https://juejin.im/post/5ce3aaf4f265da1b8e7073ff
Webm进度条问题分析与解决相关推荐
- 前端 mediaRecorder 录制视频源代码实例,和本地播放器无法定位进度条问题分析和解决
问题 mediaRecorder 本质上录制的是webm 当我们使用getUserMedia.MediaRecorder等API生成的webm视频时,会发现最终的webm是无法拖动进度条的 解决方案 ...
- webm进度条和修复问题
问题 我们使用getUserMedia.MediaRecorder等API生成的webm视频时,会发现视频的进度条无法拖动,等视频播放完一次后,这个进度条就可以拖动了 解决办法 1.转码为其他视频格式 ...
- Mac如何删除在磁盘空间中的可清除空间以及Mac开机时进度条卡100%的解决办法
Mac如何删除在磁盘空间中的可清除空间以及Mac开机时进度条卡100%的解决办法 1.Mac如何删除在磁盘空间中的可清除空间 对于mac来说磁盘的空间是十分宝贵的,小编会定期的查看一下自己电脑的磁盘使 ...
- 关于vs下载提示网络未连接,进度条为0的解决办法
遇到的问题: 下载visual_studio_community_2017_version_15.3.exe后点击运行,引导安装进度条为0,之后提示网络未连接. 解决方法: 尝试用浏览器解析域名aka ...
- win10重置进度条不动了_win10系统更新进度条不动了的解决方法
很多小伙伴都遇到过win10系统更新进度条不动了的困惑吧,一些朋友看过网上零散的win10系统更新进度条不动了的处理方法,并没有完完全全明白win10系统更新进度条不动了是如何解决的,今天小编准备了简 ...
- 戴尔笔记本开机logo进度条时间长的解决办法
戴尔笔记本开机,出现进度条,需要等30s才出现系统界面.. 这种问题的一个原因是,BOOT List option 选项选了UEFI 将此选项设置为Legacy 进度条瞬间几秒钟跳过. 亲测有效,系统 ...
- linux wget 进度条多行的解决办法
wget 出现的问题: 修改之后: mv /usr/share/locale/zh_CN/LC_MESSAGES/wget.{mo,mo.back} <enter> msgunfmt /u ...
- EXTJS+JSP上传文件带进度条
需求来源是这样的:上传一个很大的excel文件到server, server会解析这个excel, 然后一条一条的插入到数据库,整个过程要耗费很长时间,因此当用户点击上传之后,需要显示一个进度条,并且 ...
- 仿淘宝淘抢购进度条——鸿洋
接:http://www.jianshu.com/p/18240ea99f6e 本文由作者授权推送. 最近项目中新增了一个抢购模块,需要一个进度指示条,UI设计了几款出来后,PM一看,不行,太low了 ...
最新文章
- MVC3学习:将excel文件导入到sql server数据库
- 洛谷 P1208混合牛奶【贪心】
- 因为世界杯!我们为你承包了整个网易~
- 使用cmake安装mysql5.5.13
- python学习笔记一 一变量与运算符
- Flask-Login Flask-Security 登录与权限控制
- Call requires API level 3 (current min is 1)
- 工业级光纤收发器和协议转换器有什么区别呢?
- python 函数的参数对应
- Eclipse 格式化代码时不换行与自动换行WordWrap插件
- arm 饱和指令_ARM Neon 指令 解释
- 中科院-杨力祥视频教程	04课程
- java服务端监控平台设计
- 百度图片保存显示服务器错误,百度UEditor编辑器本地上传正常在服务器中上传图片失败的解决办法...
- android从九宫格全屏预览,仿微信朋友圈展示图片的九宫格图片展示控件,支持点击图片全屏预览大图...
- (翻译)黑底白字样式的使用时机
- cml sml区别_CML与SML有何联系和区别?
- 关于ios程序的后台运行
- 毕业设计答辩准备(双频介质谐振器天线)
- ABAP中的SET UPDATE TASK LOCAL是什么意思?
热门文章
- 雷达多普勒频率计算公式_雷达基础知识:雷达分类
- 图解数据结构:数组背后的故事
- C++ notes for beginners
- 我正在建造一座大教堂
- php 微信pic_url,PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法...
- 感觉用路由器上网变慢怎么办
- ITsMine在中国互联网安全大会(ISC)上被评为十大最具创新性的网络安全创业公司之一
- The Unreasonable Effectiveness of Recurrent Neural Networks
- ffmpeg中av_read_frame阻塞的原因与解决方案
- 中国大学MOOC创业融资题库及答案