查看详情

【转】你真的了解当年看过的AVi么

感谢 “珠思码记” 授权转载,微信搜索 “珠思码记” 关注公众号。 自从接手优酷的web播放器之后,点了快一年的播片儿技能点,感觉技术面变得越来越偏门,至少在前端界播片儿(音视频)技术一直水花甚少,真是一入片儿技深似海,从此前端是路人。 想在被世人遗忘之前 出书立传,又恐无人问津。 哈哈扯远了,既然一只脚伸到音视频技术这个泥潭里搅和了一圈之后,总要写点什么。这篇主要是来闲聊,从大家打小看过的片儿里扯一扯音视频格式的前世今生。 主要是讲故事,感兴趣的话可以一看。不感兴趣的话,可以直接点赞打赏红包转账了[手动狗头]。 想必很多人的硬盘里都会有这些奇奇怪怪的文件吧。文件名啥的可能各有不同,但扩展名大家一定耳熟能详:.avi .rmvb .mkv .3gp bla bla~。 而且随着时间的推移,当你在网上down片儿的时候,发现有些已经不常见了,新的又冒了出来。那这些都是什么玩意儿呢? 那我要先解释一个概念 敲黑板 0x01 封装格式/编码格式 可以看出,上面像mkv avi什么的都是视频的封装格式,或者说容器格式。如果把视频的内容比作酒的话,那所谓封装格式其实就是这个酒瓶。有酒瓶才好运输(网络传输下载)和保存(文件形式放在硬盘上) 详情 »

查看详情

理解 MPEG 的 MOVIE ATOM

原文地址: https://www.adobe.com/devnet/video/articles/mp4_movie_atom.html @Maxim Levkov 本文是来自 Adobe 的工程师撰写的,用于帮助大家学习 moov atom 以及对比了整个 Adobe Flash Player 支持的视频流格式,加深对 moov atom 的功能和位置的理解。有助于我们进一步理解视频编解码想过的知识。 User level Advanced 要在Adobe Flash Platform上播放的视频文件比较简单。但是,经常令人困惑的一个不太能够理解 moov atom, 它包含有关视频文件相关的信息。moov atom 也被叫做 Movie atom,它里面定义视频的时间尺度,时长,显示特性,以及含有用于在电影每个轨道信息。moov atom 的最佳位置取决于所选的传输方式。本文深入研究moov atom 周围的细节, 详情 »

查看详情

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

大家才开始学习 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 多媒体开发指南

一般接触音视频开发的前端比较少,但实际里面涉及的知识点非常多,因此做一个脑图,帮助有兴趣的同学学习和研究相关知识点。 基本 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 详情 »

查看详情

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

原文地址: 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 详情 »

查看详情

微信视频快进回退的Bug

小编最近在修测试反馈的微信播放视频的问题时候,发现微信播放视频,快进偶尔会回退几秒。才开始一直一直以为是代码在 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 团队还是需要颜控代码继承和功能回归测试。 详情 »

查看详情

使用 JS 获取视频 Codec

如果第一次接触 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: ', 详情 »

查看详情

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

才开始大家一直在想,什么是移动均线? 哪里会用到?? 对于常规的页面,实际上很难说需要到具体到有需要用到 网络宽带的预估,但是对于流媒体或者上传服务时候,这个就很重要了,我们需要根据不同网速情况,做策略上的更改,从而改善体验。 做视频播放的很多童鞋,经常在 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( 详情 »

查看详情

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

原文地址: 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拥有更高的压缩率, 详情 »