使用 core-version-manager 解决版本号的问题

最近在写工具处理的时候,想到做这么一个库,用于解决版本号之间的问题,比如打小,比较等问题。常见的比如确定 A/B 两个版本谁比较新,又或者 选出一系列版本中最大的。于是 core-version-manager(名字有点土) Github 怎么使用 $ npm install --save core-version-manager 引入模块; import version from 'core-version-manager' API 详情 »

JS 中匹配任意字符方案

背景,最近需要匹配出某段脚本里的字符串比如: <script type="text/javascript">window._debug = false</script> 从中截取 到下面内容: window._debug = false 第一时间想到了 .* 来进行中间的匹配: /<script .+>(.*)<\/script& 详情 »

PWA fetch 事件不生效

PWA fetch 事件不生效 最近接入 PWA (Progressive Web App), 我们不是 从 0 开始做,而是基于现在已有的架构,我们是服务端 Node 层做大前端支持,前端构建基于 Ykit 来进行 less 和 es6 的处理。 大概照着 官方教程 做的时候, 详情 »

使用 JS 直接截取 视频片段 生成 gif 动画

最近大家对这个表情 非常熟悉。 最近看到 张大大 《纯前端实现可传图可字幕台词定制的GIF表情生成器》 写的关于 前端做 GIF 的文章。由于最近也一直接触的视频,所以就干脆直接再进一步,以后直接通过一个库快速生成 gif 。 直接放参考 DEMO 效果 实现原理 其实相对而言,也是利用了一个核心库 gif.js, 它可以直接将传入 canvas 对象实现截图然后保存为最后 blob 对象。 详情 »

使用 mediaSession 实现媒体播放的通知栏控制

Chrome 在其移动版本的 57 开始后 支持了一个的 新的 API mediasession。(目前桌面版本浏览器不支持) 它能够做什么呢? 你可以通过提供自定义的 metadata 信息来设置通知栏的效果。 我们以音频为例的话,差不多是你可以在播放音乐的时候你可以设置锁屏或者通知栏上的效果: 1: 默认播放 2:通知栏 3: 锁屏 我们看小具体的代码: if ('mediaSession' in navigator) 详情 »

Chrome 新的自动播放策略

最近看 来自 Chrome 团队在 IO 2018上的 分享 《Build awesome media experiences on the web》 。大概主要是说关于 音视频在 Chrome 上的更新。其中业务团队需要及时关注新的 自动播放策略,虽然在去年9月份 Chrome 团队就更新了博客 《Autoplay Policy Changes》 详情 »

FFmpeg 比较实用的命令

ffmpeg 是一款非常强大的音视频处理工具,它可以完成对视频的编码,解码以及整合等等功能。它有着强大的命令行操作选项,下面罗列一下非常使用的命令,方便大家处理视频(不依赖Adobe Premiere 等比较复杂软件)。 截取分帧的图片 ffmpeg -i video.mp4 thumb%04d.jpg -hide_banner 获取某一帧的图片 ffmpeg -i video.mp4 -ss 详情 »

引入 Brotli 进行 Web Server的压缩

目前我们大多数网站都是启用的 gzip 来进行 资源传输的压缩,这有利于我们更加快速的访问我们的网站;但是除了 gzip 外,我们或许还有别的选项,而且性能会更好,比如 Facebook 便是启用的 Brotli 算法; Brotli Brotli 最初发布于2015年,用于网络字体的离线压缩。Google软件工程师在2015年9月发布了包含通用无损数据压缩的Brotli增强版本,特别侧重于HTTP压缩。新版本还展现了跨平台的性能改进,以及减少解码所需的内存。 与常见的通用压缩算法不同,Brotli使用一个预定义的120千字节字典。该字典包含超过13000个常用单词、 详情 »

修复 IE8 webpack 兼容性的问题

由于需要支持 IE8 ,因此我们直接使用 babel 转换出来的 es5 代码在 IE8 上并不能很好的运行,而且修复这个问题会让大家 头痛 ヽ(`Д´)ノ。 大概这里简单说下解决问题的一些关键方法吧。 es3ify-loader es3ify-loader 大概是第一个让你看到希望的。你需要在 postLoaders 或者放在 babel 转换前。 module: { loaders: [ { test: 详情 »

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

上一篇写了 Media Source 系列 - 播放 m3u8 文件 , 写了使用 MSE 来播放一个包含分片内容的资源。同样除此之外,我们可以借助 MSE 来进行更加 细粒 的缓存控制调度。 HTTP Range HTTP Range ,HTTP 协议范围请求允许服务器只发送 HTTP 消息的一部分到客户端。范围请求在传送大的媒体文件, 详情 »