Web视频开发技术总结，视频开发常见问题分析，如何解决前端视频开发的常见问题。
58 篇文章大家才开始学习 MediaSource 的时候，我们都会好奇，其中指定 mimeCodec 的行为: var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) { var mediaSource = new MediaSource(); //console.log(mediaSource.readyState); // closed video.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener('sourceopen', sourceOpen); } else { console.error('Unsupported MIME type or codec: ', 详情 »
一般接触音视频开发的前端比较少，但实际里面涉及的知识点非常多，因此做一个脑图，帮助有兴趣的同学学习和研究相关知识点。 基本 Web 多媒体开发覆盖非常多的方面，其中，视频，音频，以及 WebRTC 都比较成熟，而近年来的 WebXR(AR/VR) 也成为大家比较热情研究的内容。它旨在给人类带来听觉和视觉上的冲击。 其实 Mozilla 做过一个专项的列表 Web media technologies ，列举出当前音视频的知识点。 Audio Video WebRTC Media Capture and Streams API WebGL WebXR WebVR 虽然看着只是一个小的点，但是进去了解后，其实每个领域都需要掌握一定基础知识才能深入学习。 于是自己的初衷便是罗列一些关键的知识点帮助大家有一个总体的概念。 Github 地址: https://github.com/JackPu/web-media-developer-guide 罗列一些常用的知识点和资源： Video Video 元素 Video Element Video Events 详情 »
原文地址: https://medium.com/netflix-techblog/modernizing-the-web-playback-ui-1ad2f184a5a0 这一篇是奈飞前端工程师分享 Web团队在构建新的播放器时候遇到的困惑和解决思路，我们在设计播放器的时候，可能需要考虑到诸多方面，UI 扩展，测试，底层设计，面向多业务多团队等。希望这篇文章可以帮助到你。 从2013年开始，Netflix 的团队一直将重心放到开发视频播放的新特性，而始终未关注播放的视觉UI的改进。 而在过去两年，Web UI 团队制定了一个非常长远的计划，给我们的会员提供更加出色的播放体验。 播放由下面三个维度构成: 播放前(Pre Play，前贴) 主要是视频播放前给用户呈现的内容 视频播放中(Video Playback， 中场) 当用户正在观看视频，用户进行视频播放、暂停控制，调节音量等 播后结束(Post Play， 后贴)当用户观看的视频结束的时候，出现下一集或者推荐内容等 在经过复杂的 AB 测试， 以及随后的总结，我们完成了我们播放器的 UI，下面是我们的分享这一路的心得体会。 成功没那么容易 从2016开始，我们优先是使用 React 详情 »
小编最近在修测试反馈的微信播放视频的问题时候，发现微信播放视频，快进偶尔会回退几秒。才开始一直一直以为是代码在 play 之后事件监听问题。微信（X5 nn内核） Android 必须在 (durationchange) 事件触发后才能进行正常 Seek 操作。可是无论怎么调试都还是有问题，于是尝试播放了一个外链的 mp4 文件，结果惊呆了。 心情💢ORZ <imgsrc="http://img1.vued.vanthink.cn/20160801164141_2drSZ.thumb.700_0.jpeg" /> 目前问题已经反馈了涉及到QQ浏览器(9.5.0.5052+ X5: 039515GPU-SS)和微信(7.0.5)内嵌的浏览器。只能期待官方修复把，感觉腾讯 X5 团队还是需要颜控代码继承和功能回归测试。 详情 »
如果第一次接触 Media Source ，大家都会注意到有一个关于 视频 codecs 的指定。 var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) { var mediaSource = new MediaSource(); //console.log(mediaSource.readyState); // closed video.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener('sourceopen', sourceOpen); } else { console.error('Unsupported MIME type or codec: ', 详情 »
才开始大家一直在想，什么是移动均线？ 哪里会用到？？ 对于常规的页面，实际上很难说需要到具体到有需要用到 网络宽带的预估，但是对于流媒体或者上传服务时候，这个就很重要了，我们需要根据不同网速情况，做策略上的更改，从而改善体验。 做视频播放的很多童鞋，经常在 Youtube 上看到这么一个仪表盘，界面。 大家会看到网速的实际情况。 如果叫大家来实现，实际上，或许很轻而易举会想到用一个网络资源的请求，和时间来完成做一次除法就OK了。 const start = Date.now() fetch(url, {}).then((result) => { const end = Date.now(); const bw = length / (end - start) * 8000; }) 似乎，这样就可以表示一个当前分片的网速了，但是我们实际上并不会用当前的瞬时值作为一个衡量当前宽带是否满足我们播放某种清晰度的标准。 而 hls.js 巧妙的借鉴了 移动平均 来反映当前网络的一个趋势。 移动平均 移动平均（moving average，MA），又称“ 详情 »
Chrome 将会在 73 的版本，带来新的媒体控制策略。其中为了推进 PWA 的进度，扩展了媒体播放与键盘的交互。 如果我们使用 Mac 的话，大家一定见过最上面(如果带 touch bar，则是 touch bar) 快进，下一曲，暂停，静音等按键。 很早之前我们介绍过 使用 mediaSession 实现媒体播放的控制 ，在移动端设备上，你可以在锁屏或者通知栏来进行 Web 音乐的播放，而现在，你可以在 PC 上实现这些功能。 navigator.mediaSession.setActionHandler('previoustrack', function() { console.log('prevoious') }); navigator.mediaSession.setActionHandler('nexttrack', function() { console.log('next') }); navigator.mediaSession.setActionHandler('play', function( 详情 »
原文地址： mp.weixin.qq.com 作者： 林晚 （淘宝技术） 很早之前写过 Web 播放 H265 的文章，今天淘宝的童鞋带来了更进一步的研究，包括音频的同步，以及对 WebAssembly 的使用，目前该方案其实并不太推荐部署到生产环境，一方面是出于性能帧数丢失，另一方面整个工程复杂度的考虑，不过还是可以学习下整体的思路。 随着音视频业务的快速发展，作为前端工程师，我们团队也逐步深入到音视频编解码领域，涉及到流媒体技术中的文本、图形、图像、音频和视频多种理论知识的学习，并有机会大规模应用到具体实践中。 我们自研了Web播放器并支持h.265解码，保持画质不变情况下，将码流降低50%，达到减少带宽成本，真正做到了h265解码播放的全域覆盖。本文主要分享了我们基于WebAssembly实现H.265格式的解封装、解码和播放。 背景 H.265又称HEVC(全称High Efficiency Video Coding，高效率视频编码)，是ITU-T H.264/MPEG-4 AVC标准的继任者。相比H.264，H.265拥有更高的压缩率， 详情 »
很早之前写过 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 详情 »
