ffmpeg 是一款非常强大的音视频处理工具，它可以完成对视频的编码，解码以及整合等等功能。它有着强大的命令行操作选项，下面罗列一下非常使用的命令，方便大家处理视频(不依赖Adobe Premiere 等比较复杂软件)。 截取分帧的图片 ffmpeg -i video.mp4 thumb%04d.jpg -hide_banner 获取某一帧的图片 ffmpeg -i video.mp4 -ss 00:00:07.000 -vframes 1 thumb.jpg 截取某个片段 ffmpeg -i video.mp4 -t 00:00:50 -c copy small-1.mp4 -ss 00:00:50 -codec copy small-2.mp4 剥离音轨 详情 »
很久没写了，大概这期间穿插很多小事情。 反寒 头一次经历北方四月飞雪的天气，作为一个南方人看见雪花似乎已经没了那么多惊喜感，反而这次只能大声惊叹： 斯可矣！ 到了北方这么久，也算是各种天气都经历了，经历过四月的沙城暴，经历过七月的大暴雨，经历过12月不见阳光的雾霾，这一次也算人生的另一种经历吧。虽然还是会冷，但是毕竟春天还是会来的。 复杂情绪 由于某厂的四月份要求，部分人会开始想着自己的职业发展，于是乎离职在这个月份久特别的多，看着一些之前的小伙伴陆续离开，也确实不是滋味。前些天 娜姐答应了去爱奇艺的 Offer ，虽然说她觉得面试不咋好，但还是回去了。Qsir 也准备换工作了，出去面试了，推荐了一些机会，自己希望他们都能够去大一点的平台，简历有的时候真的很重要!对于一些有其他诉求的同事，去小公司也不错，毕竟那里有更加足够的薪水和待遇，无论如何，结合自己的出境和诉求，做正确的选择。 回归 下周上班久又从新回到望京了，一算也有一年时间了，去之前没想打很多事情，但是自己还是坚持住了这一年。想想才去的五月份夜里的奋战，第一次接触大局营销，一起和小侄女排查劫持的问题，一起帮着洪帮主搞定脚手架的事情，一起看着它的取消，转折到上线。随后开始鼓捣播放器四个人的小团队的封闭开发，其实那段日子也很开心，接触了很多以前没有接触的内容，感觉超级棒。明天开始上班，希望不忘初心。 最后安利点轻松的 详情 »
目前我们大多数网站都是启用的 gzip 来进行 资源传输的压缩，这有利于我们更加快速的访问我们的网站；但是除了 gzip 外，我们或许还有别的选项，而且性能会更好，比如 Facebook 便是启用的 Brotli 算法; Brotli Brotli 最初发布于2015年，用于网络字体的离线压缩。Google软件工程师在2015年9月发布了包含通用无损数据压缩的Brotli增强版本，特别侧重于HTTP压缩。新版本还展现了跨平台的性能改进，以及减少解码所需的内存。 与常见的通用压缩算法不同，Brotli使用一个预定义的120千字节字典。该字典包含超过13000个常用单词、短语和其他子字符串，这些来自一个文本和HTML文档的大型语料库。预定义的算法可以提升较小文件的压缩密度。 对全球1000个访问量比较大的地址进行测试，使用 Brotli 算法可以得到明显的性能改善: 14% smaller than gzip for JavaScript 21% smaller than gzip for HTML 17% smaller than gzip for CSS 使用brotli取代deflate来对文本文件压缩通常可以增加20%的压缩密度，而压缩与解压缩速度则大致不变。 当然如同 HTTP2, 详情 »
由于需要支持 IE8 ，因此我们直接使用 babel 转换出来的 es5 代码在 IE8 上并不能很好的运行，而且修复这个问题会让大家 头痛 ヽ(｀Д´)ﾉ。 大概这里简单说下解决问题的一些关键方法吧。 es3ify-loader es3ify-loader 大概是第一个让你看到希望的。你需要在 postLoaders 或者放在 babel 转换前。 module: { loaders: [ { test: /\.js?$/, loaders: ['es3ify-loader'], }, { test: /\.js?$/, loaders: ['babel-loader'], }, ] } 这个是可以解决抛出 default 关键词的问题， 比如我们会看到 这样的问题： expected identifier es5-shim 当然这个问题解决后面，可能还会遇到这个问题: Exception throw and not caught 你可以在入口文件引入 require('es5-shim') require('es5-shim/es5-sham') 如果还是错误定位到 defineProperty 详情 »
已经是四月天～ 三月中，荣妈离职，小侄女一直叫荣儿，也不知道为什么想起这么叫，大概老是会说，散场似乎就这么来了，三四月份尤其严重，大概流动性就是这样。 月底放量，想起了去年的九月下旬，每一步都不容易，不过成就感还是会有些，算是近几个月付出的回报，从去年下半年到今年年初这几个月，一直都有接触些以前没有接触的内容，谈不上技术多么的深入，对于新鲜事物还保持着好奇心，保持着热度，不知道算不算一个优点～ 前些天和某些朋友聊起了 VR, 大概对于这块领域而言，自己的认知还停留在 游戏 活着 360 照片上。大概也是受人启迪，加上近些年的 FB 布局，想起了 十年前的 iPhone ，变革似乎总那么静悄悄，突然有一天给你来个爆发。大概新的交互方式，无论是 AR 还是 VR ，新的交互方式比较促进新的变革。未来，依旧有很多值得抓的领域。 今天见到硕爷发的大学同学的长沙小聚，去年重阳回的长沙，还是那家一样的烧烤店，今日加上看的日本毕业季视频，似乎青春真的好美，遗憾虽有，但是那些人，那些事，终将在记忆里深刻。 近些天看《这！ 详情 »
上一篇写了 Media Source 系列 - 播放 m3u8 文件 , 写了使用 MSE 来播放一个包含分片内容的资源。同样除此之外，我们可以借助 MSE 来进行更加 细粒 的缓存控制调度。 HTTP Range HTTP Range ，HTTP 协议范围请求允许服务器只发送 HTTP 消息的一部分到客户端。范围请求在传送大的媒体文件，或者与文件下载的断点续传功能搭配使用时非常有用。假如在响应中存在 Accept-Ranges 首部（并且它的值不为 “none”），那么表示该服务器支持范围请求。 比如我们请求一个视频的一部分: $ curl http://localhost:8000/media-source/vdeoplayback.mp4 -i -H "Range: bytes=0-1023" 使用 fetch 请求 视频的一部分内容 正如前面提到了，如果服务器支持请求 range 的内容， 详情 »
前一篇文章 《使用 Media Source Extensions 播放视频》 我们大致写了 Media Source Extensions, MSE 的基本介绍和使用。这篇文章是在之前基础上完成的，文章将实现如何借助 MSE 来播放流文件比如 m3u8 或者 dash。 自己之前在知乎上回答过这个问题 有支持M3U8格式的HTML5播放器吗？ 有简单说一些基本实现思路，但是没有贴实现的代码，因为已经有很多前端开源的播放器了比如 hls.js, 不过今天这篇文章会贴出一些基本的代码来实现这块逻辑； 了解 m3u8 文件 HLS, HTTP Live Streaming 苹果公司针对iPhone、iPod、iTouch和iPad等移动设备而开发的基于HTTP协议的流媒体解决方案。在App Store中的视频相关的应用，基本都是应用的此种技术。该技术基本原理是将视频文件或视频流切分成小片(ts)并建立索引文件(m3u8)。 参考上图，HLS 的架构基本都是会将一个完整的视频分割成不同的小视频，然后通过索引文件 m3u8 建立起联系； 我们可以看下 自己使用 ffmpeg 手动转换的 文件 index. 详情 »
使用 mux.js 播放 .ts 文件 本篇大概是Media Source 系列 - 播放 m3u8 文件 的一篇补充。这里大概需要涉及一些视频的编码和解码方面的知识补充。 mux.js 是 videojs 团队出品的一款轻量级前端工具，用于嗅探或者修改 video 的视频的格式： Lightweight utilities for inspecting and manipulating video container formats. 我们播放的视频现在有很多类型，比如 mp4, flv, 3gp 等。但是我们从浏览器角度出发，目前最好的格式 还是 mp4, 但是如果我们需要播放 .ts 的切片的文件（m3u8）单元或者 .flv 文件。这个时候，实际我们通过 Video 是无法直接播放的。(.m3u8 文件 Apple 详情 »
我们平时可能需要同时在一个 npm scripts 中运行多个 npm 命令。我们第一时间想到了 && 。当然大多数情况我们是可以完成既定的需求，因为其实这些都是在同个进程中，如果我们需要运行的命令需要拿到两个进程的的输出，比如我们同时启动两个 server ，不同端口号。 在日常我们经常会遇到一个用于静态资源的服务器，一个是 业务的 Web 服务器，我们可以使用 webpack 的 middleware 来实现，我们也可以单独拆分。 即分开成两个命令启动。这个适合使用 concurrently 就非常方便了。 比如我们需要启动一个 npm run watch-js 和 npm run watch-less 两个命令。 npm i concurrently -save-dev 安装完成后，我们只需要在我们的 npm scripts 里添加一个合并的命令: "start": "concurrently \"npm run 详情 »
很久没有写了，大概前面一阵子情绪一直都是特别低落。不过好在翻过农历新年后，心情稍微好点，感谢朋友和家里人的支持。 今天和 Team 聚餐，蓉妈离职请大家小聚。自己嘲笑自己，说是发现了小秘密: 坐在我左边的同事最后都走了～ 经常说起，职场就是 有聚有散 ,这样的道理大家都懂，只是说的云淡风轻，内心确实无数种无奈。 生活是那样的会给人 惊喜，除了接受，也只能接受。其实人处在低谷的时候确实会懒，懒的看书，懒得写字，懒得与人交流。不过当你度过这样的阶段，你会认清很多事情，什么是重要的，什么是自己去好好把握的。 前些天回答了 在你看过的电影或电视剧中，哪个片段最霸气、最有气势？ 里面这样写道： 大概那个时候 希望 这个词汇是那么有力量～ 明天会更好～ 详情 »
