Web Video MimeCodec 究竟代表什么意思?

大家才开始学习 MediaSource 的时候,我们都会好奇,其中指定 mimeCodec 的行为: var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; if ('MediaSource' in window && MediaSource.isTypeSupported( 详情 »

Web 多媒体开发指南

一般接触音视频开发的前端比较少,但实际里面涉及的知识点非常多,因此做一个脑图,帮助有兴趣的同学学习和研究相关知识点。 基本 Web 多媒体开发覆盖非常多的方面,其中,视频,音频,以及 WebRTC 都比较成熟,而近年来的 WebXR(AR/VR) 也成为大家比较热情研究的内容。它旨在给人类带来听觉和视觉上的冲击。 其实 Mozilla 做过一个专项的列表 Web media technologies ,列举出当前音视频的知识点。 详情 »

【译】Netflix 是如何重构新的播放器 UI

原文地址: https://medium.com/netflix-techblog/modernizing-the-web-playback-ui-1ad2f184a5a0 这一篇是奈飞前端工程师分享 Web团队在构建新的播放器时候遇到的困惑和解决思路,我们在设计播放器的时候,可能需要考虑到诸多方面,UI 扩展,测试,底层设计,面向多业务多团队等。希望这篇文章可以帮助到你。 从2013年开始,Netflix 的团队一直将重心放到开发视频播放的新特性,而始终未关注播放的视觉UI的改进。 而在过去两年,Web UI 团队制定了一个非常长远的计划,给我们的会员提供更加出色的播放体验。 播放由下面三个维度构成: 详情 »

微信视频快进回退的Bug

小编最近在修测试反馈的微信播放视频的问题时候,发现微信播放视频,快进偶尔会回退几秒。才开始一直一直以为是代码在 play 之后事件监听问题。微信(X5 nn内核) Android 必须在 (durationchange) 事件触发后才能进行正常 Seek 操作。可是无论怎么调试都还是有问题,于是尝试播放了一个外链的 mp4 文件,结果惊呆了。 心情💢ORZ 目前问题已经反馈了涉及到QQ浏览器(9.5.0. 详情 »

使用 JS 获取视频 Codec

如果第一次接触 Media Source ,大家都会注意到有一个关于 视频 codecs 的指定。 var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; if ('MediaSource' in window && MediaSource.isTypeSupported( 详情 »

移动平均(EWMA)在 HLS.JS 的实践

才开始大家一直在想,什么是移动均线? 哪里会用到?? 对于常规的页面,实际上很难说需要到具体到有需要用到 网络宽带的预估,但是对于流媒体或者上传服务时候,这个就很重要了,我们需要根据不同网速情况,做策略上的更改,从而改善体验。 做视频播放的很多童鞋,经常在 Youtube 上看到这么一个仪表盘,界面。 大家会看到网速的实际情况。 如果叫大家来实现,实际上,或许很轻而易举会想到用一个网络资源的请求,和时间来完成做一次除法就OK了。 const start = Date.now() fetch( 详情 »

使用键盘的媒体按键控制视频播放

Chrome 将会在 73 的版本,带来新的媒体控制策略。其中为了推进 PWA 的进度,扩展了媒体播放与键盘的交互。 如果我们使用 Mac 的话,大家一定见过最上面(如果带 touch bar,则是 touch bar) 快进,下一曲,暂停,静音等按键。 很早之前我们介绍过 使用 mediaSession 详情 »

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

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

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

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

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

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