查看详情

五月天

初夏 翻过四月，还记得4月初还下过雪，五月初短袖已经满大街都是了，毕竟这是属于夏天的时节。其实夏天，打小就不喜欢，毕竟热的非常难受，直到大二那个暑假，经历了长沙持续45天的高温后，似乎都温度依然没有那么敏感的直觉，在 30 度的傍晚打过球，在35度的晌午骑过车。已是五月天，May the force be with u. 机遇 上周五 XJ 哥离职，和他接触一年有余，最后还是选择做更有挑战的事情。大概五月份 可能会是浮躁的月份，但是也是一个值得思考更多的月份。关于未来趋势虽也说不准，但是每一次选择似乎都无在乎两个角度，个人喜好，待遇发展。有的时候很难都满足，大概与心底，还是想想现在的出境，做最合适的选择。 刺杀骑士团长 最近读完了《刺杀骑士团长-上册》。大概这部故事最开始给我印象最深的是主人公对于离婚后那几个月的处理，心情不好这是自然的，骑士这也侧面告诉我们，未来的人生有很多很难预料的事情发生，主人公开着车度过了些许时日，最后重新开始绘画，展开了后面离奇的经历。大概如同《1Q84》 ，似乎下册才是真正意义上故事最为精彩内容的开始。伴随回忆者，现在往往会畏惧，于是乎到能体会自来也物语中独白，说白了， 详情 »

FFmpeg 比较实用的命令

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 剥离音轨 详情 »

随笔-20180423

很久没写了，大概这期间穿插很多小事情。 反寒 头一次经历北方四月飞雪的天气，作为一个南方人看见雪花似乎已经没了那么多惊喜感，反而这次只能大声惊叹： 斯可矣！ 到了北方这么久，也算是各种天气都经历了，经历过四月的沙城暴，经历过七月的大暴雨，经历过12月不见阳光的雾霾，这一次也算人生的另一种经历吧。虽然还是会冷，但是毕竟春天还是会来的。 复杂情绪 由于某厂的四月份要求，部分人会开始想着自己的职业发展，于是乎离职在这个月份久特别的多，看着一些之前的小伙伴陆续离开，也确实不是滋味。前些天 娜姐答应了去爱奇艺的 Offer ，虽然说她觉得面试不咋好，但还是回去了。Qsir 也准备换工作了，出去面试了，推荐了一些机会，自己希望他们都能够去大一点的平台，简历有的时候真的很重要!对于一些有其他诉求的同事，去小公司也不错，毕竟那里有更加足够的薪水和待遇，无论如何，结合自己的出境和诉求，做正确的选择。 回归 下周上班久又从新回到望京了，一算也有一年时间了，去之前没想打很多事情，但是自己还是坚持住了这一年。想想才去的五月份夜里的奋战，第一次接触大局营销，一起和小侄女排查劫持的问题，一起帮着洪帮主搞定脚手架的事情，一起看着它的取消，转折到上线。随后开始鼓捣播放器四个人的小团队的封闭开发，其实那段日子也很开心，接触了很多以前没有接触的内容，感觉超级棒。明天开始上班，希望不忘初心。 最后安利点轻松的 详情 »

查看详情

引入 Brotli 进行 Web Server的压缩

目前我们大多数网站都是启用的 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 webpack 兼容性的问题

由于需要支持 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 详情 »

查看详情

随笔-20180401

已经是四月天～ 三月中，荣妈离职，小侄女一直叫荣儿，也不知道为什么想起这么叫，大概老是会说，散场似乎就这么来了，三四月份尤其严重，大概流动性就是这样。 月底放量，想起了去年的九月下旬，每一步都不容易，不过成就感还是会有些，算是近几个月付出的回报，从去年下半年到今年年初这几个月，一直都有接触些以前没有接触的内容，谈不上技术多么的深入，对于新鲜事物还保持着好奇心，保持着热度，不知道算不算一个优点～ 前些天和某些朋友聊起了 VR, 大概对于这块领域而言，自己的认知还停留在 游戏 活着 360 照片上。大概也是受人启迪，加上近些年的 FB 布局，想起了 十年前的 iPhone ，变革似乎总那么静悄悄，突然有一天给你来个爆发。大概新的交互方式，无论是 AR 还是 VR ，新的交互方式比较促进新的变革。未来，依旧有很多值得抓的领域。 今天见到硕爷发的大学同学的长沙小聚，去年重阳回的长沙，还是那家一样的烧烤店，今日加上看的日本毕业季视频，似乎青春真的好美，遗憾虽有，但是那些人，那些事，终将在记忆里深刻。 近些天看《这！ 详情 »

查看详情

Media Source 系列 - 结合 range 控制媒体请求缓存大小

上一篇写了 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 系列 - 播放 m3u8 文件

前一篇文章 《使用 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 文件

使用 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 详情 »

查看详情

使用 concurrently 运行多个 npm 命令

我们平时可能需要同时在一个 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 详情 »