Web视频开发技术总结，视频开发常见问题分析，如何解决前端视频开发的常见问题。
60 篇文章很早之前写过 hls.js 源码解读【1】 ，基本分析了 hls.js 这个库的设计和实现。阅读源码一方面是为了吸收对方设计或者编码上的优点，当然也有可能是另外一个原因，就是一些需求从表面的文档里找不到具体的实现思路。 默认情况下，我们并不需要对解析出来的 ts 分片地址做改造，但是如果真的需要的话，其实有两个思路。 思路 1 复写 Loader 。 自己实现一个关于请求的 Loader ，通过配置传入类似; class XhrLoader extends Hls.DefaultConfig.loader { constructor(config) { super(config); var load = this.load.bind(this); this.load = function(context, config, callbacks) { // your code to handle context.url load(context,config, 详情 »
最近收到用户反馈，网页的背景音乐播放没有声音。 然后我们就按照正常的流程 Debug 。但是我拿到我的 iPhone 7 测试的时候，但是发现是可以正常播放的，但是 iPhone XS 确没有办法播放。 而且这次非常悬疑的是，iPhone XS 的又是可以正常播放虾米音乐的的歌曲。 此时此刻，宝宝的心情，只能用如下图表示: 随后开始看代码，项目的背景音乐是启用了 AudioContext 。这个时候我们强制设置 AudioContext 的音量来，看下是不是 iPhone XS 的问题； const audioCtx = new AudioContext(); let source = aCtx.createBufferSource(); let buf; const gainNode = aCtx.createGain(); // Create a gainNode reference. gainNode.connect(aCtx.destination); // Add context to gainNode 详情 »
关于我们探测是否浏览器能够支持某种视频的播放，我们经常用的 MediaSource.isTypeSupported() 或者 HTMLMediaElement.canPlayType() 来判断，详情可以参看 《探测浏览器对 video 和 audio 的兼容性》 。不过今天介绍一个新的 API , Chrome 在版本 64 开始支持的 navigator.mediaCapabilities；它解决的问题是我们支持了这些格式，但是在当前设备那种格式表现最好呢？ Media Capabilities 在 wicg 组的草案中明确描述了: This specification intends to provide APIs to allow websites to make an optimal decision when picking media content for the user. The APIs will expose information about 详情 »
之前写了关于 Web 对 H.265/HEVC 的播放支持，如果有兴趣的童鞋可以前往 《Web 播放 H.265视频》 了解，今天主要介绍 AV1(AOMedia Video 1) 和 H.265 的对比。 H.265/HEVC H.264 的成功，导致开发组开始尝试新的编码优化，H.265/HEVC 的编码架构大致上和H.264/AVC的架构相似, 而 H.265 的编码单位可以选择从最小的 8x8 到最大的 64x64， 同时，H.265的帧内预测模式支持33种方向（H.264只支持8种），并且提供了更好的运动补偿处理和矢量预测方法。反复的质量比较测试已经表明，在相同的图象质量下，相比于H.264，通过H.265编码的视频大小将减少大约 39-44% 。而 详情 »
本文主要从H.265 编码格式出发，介绍 H265 使用情况，以及对比 H.264的优势，随后分析如何在前端完成 H265 视频格式的播放。 H.265, HEVC 是当前非常火的视频压缩方式，相对于大家熟知的 H.264 ，平均可以带来接近于 50% 的宽度节省。这对于我们做视频的开发者而言，无疑我们可以在同等流量下拿到更多的 Buffer,无论是直播还是视频播放都是非常有收益的事情。 HEVC (H.265) Vs. AVC (H.264) H.265/HEVC的编码架构大致上和H.264/AVC的架构相似, 主要也包含，帧内预测（intra prediction）、帧间预测（inter prediction）、转换（transform）、量化（quantization）、去区块滤波器（deblocking filter）、熵编码（entropy coding）等模块。 详情 »
前面我先看了 React-360 源码阅读【5】- 核心 Compositor 里的内容，其中里面涉及了 video 作为背景的内容，今天分析一下 video 目录里面的内容；实际上我们如果要设置全景视频，可以直接通过调用; // Creating a Video Player const player = r360.compositor.createVideoPlayer('myplayer'); // Set the video to be played, and its format player.setSource('path/to/video.mp4', '2D'); 当然，这里我们主要分析 video 目录下的文件都做了什么事情。 getSupportedFormats.js const FORMATS = { ogg: 'video/ogg; codecs="theora, 详情 »
最近大家对这个表情 非常熟悉。 最近看到 张大大 《纯前端实现可传图可字幕台词定制的GIF表情生成器》 写的关于 前端做 GIF 的文章。由于最近也一直接触的视频，所以就干脆直接再进一步，以后直接通过一个库快速生成 gif 。 直接放参考 DEMO 效果 实现原理 其实相对而言，也是利用了一个核心库 gif.js, 它可以直接将传入 canvas 对象实现截图然后保存为最后 blob 对象。 var gif = new GIF({ workers: 2, quality: 10 }); // add an image element gif.addFrame(imageElement); // or a canvas element gif.addFrame(canvasElement, {delay: 200}); // or copy the pixels from a 详情 »
Chrome 在其移动版本的 57 开始后 支持了一个的 新的 API mediasession。(目前桌面版本浏览器不支持) 它能够做什么呢？ 你可以通过提供自定义的 metadata 信息来设置通知栏的效果。 我们以音频为例的话，差不多是你可以在播放音乐的时候你可以设置锁屏或者通知栏上的效果: 1: 默认播放 2：通知栏 3： 锁屏 我们看小具体的代码: if ('mediaSession' in navigator) { navigator.mediaSession.metadata = new MediaMetadata({ title: 'Never Gonna Give You Up', artist: 'Rick Astley', album: 'Whenever You Need Somebody', artwork: [ { src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' 详情 »
最近看 来自 Chrome 团队在 IO 2018上的 分享 《Build awesome media experiences on the web》 。大概主要是说关于 音视频在 Chrome 上的更新。其中业务团队需要及时关注新的 自动播放策略，虽然在去年9月份 Chrome 团队就更新了博客 《Autoplay Policy Changes》。 Chrome 会在 2018年 的第二个季度，采取新的自动播放策略。自己在去年 2017年9月 更新了关于 最新的 Webkit 内核团队关于新版本的 Safari 的 《MacOS High Sierra Safari 11限制了 video 自动播放》 一些处理方法，而这些方法也可以运用到现在的 Chrome 自动播放策略中去。 自动播放的策略调整 如图中所示: 页面中的视频处于静音状态下是允许自动播放的，大概这个产品交互可以参考 微博的主站策略 如果用户与当前页面有任何的交互比如点击或者 详情 »
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 剥离音轨 详情 »
