最近接触流媒体的一些东西，大概这里安利两个命令行工具用于对 mp4 文件的操作； Ffmpeg ffmpeg 是一款非常出名的命令行工具，你可以用它进行格式转换(初中生的我只知道格式工厂)，甚至对流进行编码； $ ffmpeg -i input.mp4 output.avi 除此之外你也可以使用它来进行媒体资源基本信息的查看，比如: $ ffmpeg -i videoplayback.mp4 你可以看到命令行的输出: 你可以看到视频的流的一些信息，比如分辨率，码率，编码方式等。 MP4 转换为 HLS 使用 ffmpeg 你可以将 mp4 文件转为支持 HLS 的 m3u8 文件，一个命令就搞定; $ ffmpeg -i yourfile.mp4 -codec: copy -start_number 0 -hls_time 15 -hls_list_size 0 详情 »
近些年，随着抖音或者快手大火，视频也成了前端比较热衷的领域，无论是最早的直播，还是现在的短视频，我们都离不开 Video ，我们也需要一个足够健壮的 HTML5 播放器来进行视频内容的播放。 Shaka Player 是 谷歌公司对外开源的一款 JavaScript 类库: Shaka Player is an open-source JavaScript library for adaptive media. It plays adaptive media formats (such as DASH and HLS) in a browser, without using plugins or Flash. Instead, Shaka Player uses the open web standards MediaSource Extensions and Encrypted 详情 »
终于有时间写关于 Media Source Extensions (后面简称 MSE) 。Media Source Extensions 是在 2016年成为推荐的的 Html5 API。 This specification extends HTMLMediaElement [HTML51] to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams. 草案简单明了的指出这个 API 设计的目的: 允许 JavaScript 来生成看到播放的流媒体扩展了 HTMLMediaElement 对象。允许 JavaScript 详情 »
之前写过 《如何强制Html5视频进行全量加载》, 大致实现原理是 通过 XHR 进行资源的请求，然后在通过 URL.createObjectURL 创建一个本地播放对象。初次之外，我们现在还可以通过 prefetch 来实现视频的预加载。 Prefetch Prefetching 是 W3C 新草案提出一种资源预加载的的标记。它允许你提前将一些将来的用到的资源或者图片提前进行请求，并将它存在缓存中方便你调用； <link rel="prefetch" href="./image.png" /> <link rel="prefetch" href="./lib.js" /> 它对浏览器有要求，但是不能识别这个标记类型的，浏览器会自行忽略掉； 虽然不同浏览器的实现不一致，但是最新版本的浏览器都还是支持了这个属性，不过它还取决于网络条件，如果网络条件不是怎么好的话，可能浏览器会放弃这个请求； 当然除了 prefetch 我们还可以了解下 详情 »
最近在做 nunjucks 的 模板替换工作。然后在做 {% for %} 的时候遇到一个问题: {% for item in episodes %} <div {{ item.itemAttr }} class="{{ item.itemClass }}"> <a href={{ item.url }}>{{item.name}}</a> </div> {% endfor %} 其中 div 设置的样式是通过 display: inline-block; 也就是渲染一个普通的列表: 然而，在实际过程中，我们却看到变成 四个一行的，但是看过样式的距离，算出盒子理论每行确实应该容纳五个 div ； 然后查看 Chrome ,并没有发现异常，所以楼主当时心情: 两天纠结之后，重新排查这个问题，用 详情 »
Recently we have released our new image tool daycaca. A pure JS library to handle image via canvas <Canvas> is a magic element which helps you to draw some amazing effects in a web page. And it enables a power to draw images on the canvas. drawImage helps us draw an image on canvas. 详情 »
春节前 蹭 到了这么一次外出的机会。虽然前一阵子情绪都不是太好，可能是工作持续加班的原因也有可能是别的事情影响，但好歹还是顺顺利利出发了。 到了菲律宾，大概一下子从冬天到夏天，会让人有些不适，换了衣服后，穿上拖鞋短裤，大概似乎，暑假就开始了。 赤道附近的国家，自然这个季节，虽是1月份，但是北半球还是处于二十几度左右，温度也恰恰好，不冷不热。确实第一次看到这也的沙滩也会很震撼，自然的美景让人美不胜收。虽然去的几天都是阴天出没，但是海水依旧清晰透明。其实海边的活动也不是很多，去潜浮的时候还是可以看到很多鱼群(但是对于一个近视 好悲哀)，然后跳水什么的就真的不要太兴奋了，因为喝水真的是大概率事件。 大概到了海边，就适合静下来，然后慢慢的听海浪声。其实享受这边的风情，大概是这次是一个比较有意思的事情。无论吃的食物还是这边的周边店铺和服务。赶上了游行，一群人把自己涂成黑黑的，然后便随着强烈的节奏感的鼓声，舞动着穿行在沙滩上。他们会很热情的邀请你加入，很多老外也会拿着一个易拉罐啤酒，加入游行的队伍。 菲律宾的国民经济收入相对赶不上这个中国，大概这个目前都还不稳定的国家，还是会伴有发生战争的可能性，所以去之前最好确定是否去的时候南方局势是否稳定。或许正是这也的原因，这边的居民在经济发展上并不是很理性，对比我国过去三十年， 稳定性压倒一切 想起邓爷爷这句话，确实这三十年受益于大环境的稳定，以及经济发展为受的目标，让我们处在一个相对合适的成长环境中。因为现在我国的输出能力已经非常强，我们用着自己特色的产品吸引着周边的国家， 详情 »
Vanthink-UED 旗下开源项目所获的捐赠金额中的 80% 金额用于 世界动物保护协会 (World Animal Protection, WPA)。我们有责任也有义务去维持地球物种的多样性，保护濒临灭绝的动物。 这些捐赠将以 jackzoo.org 的名义进行，大家可以微信搜索公众号：jackzooorg 或者扫描二维码： 关注进展。 详情 »
原文地址: https://github.com/undoZen/bigpipe-on-node @ undoZen BigPipe 是 Facebook 开发的优化网页加载速度的技术。网上几乎没有用 node.js 实现的文章，实际上，不止于 node.js，BigPipe 用其他语言的实现在网上都很少见。以至于这技术出现很久以后，我还以为就是整个网页的框架先发送完毕后，用另一个或几个 ajax 请求再请求页面内的模块。直到不久前，我才了解到原来 BigPipe 的核心概念就是只用一个 HTTP 请求，只是页面元素不按顺序发送而已。 了解了这个核心概念就好办了，得益于 node.js 的异步特性，很容易就可以用 node.js 实现 BigPipe。本文会一步一步详尽地用例子来说明 BigPipe 技术的起因和一个基于 node.js 的简单实现。 我会用 express 来演示，简单起见，我们选用 jade 作为模版引擎， 详情 »
最近遇到的一个问题，就是我们通常设置视频或者 video 标签的播放速度的时候是通过 playbackRate 来实现的，比如我们需要快速播放或者慢速播放。 其中 playbackRate 的设置区间为[ 0.5 - 4]。 video.playbackRate = 2; 但是我们在使用过程中发现。 playbackRate 表示在播放过程中的调整播放速率，如果我们更换 src 后，效果将不在有用。 defaultPlaybackRate 表示在播放前设置当前 video 的播放速率； 因此如果我们在做播放器的时候我们要做 切换播放速率的问题，可以进行同时切换； video.playbackRate = 2; video.defaultPlaybackRate = 2; 测试demo See the Pen defaultPlaybackRate by Jack Pu (@Jack_Pu) on CodePen. 扩展阅读 详情 »
