【转】Web端H.265播放器研发解密

原文地址: mp.weixin.qq.com 作者: 林晚 (淘宝技术) 很早之前写过 Web 播放 H265 的文章,今天淘宝的童鞋带来了更进一步的研究,包括音频的同步,以及对 WebAssembly 的使用,目前该方案其实并不太推荐部署到生产环境,一方面是出于性能帧数丢失,另一方面整个工程复杂度的考虑,不过还是可以学习下整体的思路。 随着音视频业务的快速发展,作为前端工程师,我们团队也逐步深入到音视频编解码领域,涉及到流媒体技术中的文本、 详情 »

HLS.JS 自定义 分片 TS 请求 URL

很早之前写过 hls.js 源码解读【1】 ,基本分析了 hls.js 这个库的设计和实现。阅读源码一方面是为了吸收对方设计或者编码上的优点,当然也有可能是另外一个原因,就是一些需求从表面的文档里找不到具体的实现思路。 默认情况下,我们并不需要对解析出来的 ts 分片地址做改造,但是如果真的需要的话,其实有两个思路。 思路 1 复写 Loader 。 自己实现一个关于请求的 Loader ,通过配置传入类似; class 详情 »

修复 CALL_AND_RETRY_LAST Node 运行问题

最近使用 react-native 的时候遇到了下面的异常: CALLANDRETRY_LAST Allocation failed - process out of memory 大概是因为你在 JS 执行比较大的 JSON.parse() 的时候,这个时候比较直接的办法是设置 --max_old_space_size。 在你的 .bash_profile 详情 »

iOS 12 静音模式下 AudioContext 无法正常播放的 Bug

最近收到用户反馈,网页的背景音乐播放没有声音。 然后我们就按照正常的流程 Debug 。但是我拿到我的 iPhone 7 测试的时候,但是发现是可以正常播放的,但是 iPhone XS 确没有办法播放。 而且这次非常悬疑的是,iPhone XS 的又是可以正常播放虾米音乐的的歌曲。 此时此刻,宝宝的心情,只能用如下图表示: 随后开始看代码,项目的背景音乐是启用了 AudioContext 。这个时候我们强制设置 AudioContext 的音量来, 详情 »

聊聊新的 Media API Media Capabilities

关于我们探测是否浏览器能够支持某种视频的播放,我们经常用的 MediaSource.isTypeSupported() 或者 HTMLMediaElement.canPlayType() 来判断,详情可以参看 《探测浏览器对 video 和 audio 的兼容性》 。不过今天介绍一个新的 API , Chrome 在版本 64 开始支持的 navigator.mediaCapabilities;它解决的问题是我们支持了这些格式,但是在当前设备那种格式表现最好呢? Media Capabilities 详情 »

AV1 VS HEVC VS VP9

之前写了关于 Web 对 H.265/HEVC 的播放支持,如果有兴趣的童鞋可以前往 《Web 播放 H.265视频》 了解,今天主要介绍 AV1(AOMedia Video 1) 和 H.265 的对比。 H.265/HEVC H. 详情 »

使用 Chrome 原生 lazyload 属性进行图片懒加载

在最近的 《Chrome Dev Summit - Key Techniques for Fast Websites》 ,Chrome 团队的成员介绍了,原生的 lazyload 属性即将登陆 Chrome。 一听到 lazyload ,大家可能印象最深的是就是早期瀑布流 Pinterest 网站的的加载效果。效果如下; 实现效果可以参考很早之前写的关于图片的 placeholder《实现类似Pinterest 的图片预加载功能》 详情 »

VeeR VR 长期招聘贴

About VeeR/关于我们 我们是全球增长最快的 VR 内容分享社区。2016年6月,获得顶级VC天使投资。10月,VeeR VR 正式上线,并于圣诞之际用户突破百万大关,跃居美国总榜前25,娱乐/视频榜前5。2017年初,VeeR创作者和原创内容数量覆盖160个国家地区,跃居全球同类第一,并完成A轮融资。VeeR VR是国内唯一获得Google Daydream, HTC Vive, Oculus 详情 »

【译】Netflix 网页性能优化案例

原文地址: https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9 由于自己最近一年半的事件都在做视频页面相关的,而且这次 Netflix 的技术栈也与我们相似,因此翻译这篇文章,希望大家一起学习。页面很多细节值得深入,但是整个分析下来其实给我们自己在做页面优化提供基本的思路。 Netflix 目前是全球非常非常出色的流媒体服务网站。自从 2016 年发布之后,Netflix 发现用户不仅会在移动端设注册,也会在 Web 上完成注册相关。 通过优化登出页面使用的 JavaScript 详情 »

Web 播放 H.265视频

本文主要从H.265 编码格式出发,介绍 H265 使用情况,以及对比 H.264的优势,随后分析如何在前端完成 H265 视频格式的播放。 H.265, HEVC 是当前非常火的视频压缩方式,相对于大家熟知的 H.264 ,平均可以带来接近于 50% 的宽度节省。这对于我们做视频的开发者而言,无疑我们可以在同等流量下拿到更多的 Buffer,无论是直播还是视频播放都是非常有收益的事情。 详情 »