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

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

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

Media Source 系列 - 播放 m3u8 文件

前一篇文章 《使用 Media Source Extensions 播放视频》 我们大致写了 Media Source Extensions, MSE 的基本介绍和使用。这篇文章是在之前基础上完成的,文章将实现如何借助 MSE 来播放流文件比如 m3u8 或者 dash。 自己之前在知乎上回答过这个问题 有支持M3U8格式的HTML5播放器吗? 有简单说一些基本实现思路,但是没有贴实现的代码,因为已经有很多前端开源的播放器了比如 hls.js, 详情 »

使用 mux.js 播放 .ts 文件

使用 mux.js 播放 .ts 文件 本篇大概是Media Source 系列 - 播放 m3u8 文件 的一篇补充。这里大概需要涉及一些视频的编码和解码方面的知识补充。 mux.js 是 videojs 团队出品的一款轻量级前端工具,用于嗅探或者修改 video 的视频的格式: Lightweight utilities for 详情 »

Mp4 转换为 Hls 或者 Dash 教程

最近接触流媒体的一些东西,大概这里安利两个命令行工具用于对 mp4 文件的操作; Ffmpeg ffmpeg 是一款非常出名的命令行工具,你可以用它进行格式转换(初中生的我只知道格式工厂),甚至对流进行编码; $ ffmpeg -i input.mp4 output.avi 除此之外你也可以使用它来进行媒体资源基本信息的查看,比如: $ ffmpeg -i videoplayback.mp4 你可以看到命令行的输出: 你可以看到视频的流的一些信息,比如分辨率,码率, 详情 »

谷歌开源 H5 流媒体播放器 shaka-player 初探

近些年,随着抖音或者快手大火,视频也成了前端比较热衷的领域,无论是最早的直播,还是现在的短视频,我们都离不开 Video ,我们也需要一个足够健壮的 HTML5 播放器来进行视频内容的播放。 Shaka Player 是 谷歌公司对外开源的一款 JavaScript 类库: Shaka Player is an open-source JavaScript library for adaptive media. 详情 »

Media Source 系列 - 使用 Media Source Extensions 播放视频

终于有时间写关于 Media Source Extensions (后面简称 MSE) 。Media Source Extensions 是在 2016年成为推荐的的 Html5 API。 This specification extends HTMLMediaElement [HTML51] to allow JavaScript to generate media streams for 详情 »