查看详情

聊聊 Web 视频播放的画中画模式

Chrome 在升级到 70 的时候开始对视频播放的画中画模式开始支持了，用户在浏览器 Web 页面可以通过 画中画的形式强当前画面停留在屏幕正上方，无论你在使用其他软件还是切到其他 Tab ，都可以看到当前画面。 最新的 caniuse 我们可以看到已经覆盖了很多了浏览器版本，包括 最新的 Safari 甚至移动 Android 的 Chrome 浏览器。 特征检测 我们可以通过 video 元素上的 requestPictureInPicture 的方法以及 document.pictureInPictureElement 来判断浏览器是否支持画中画模式。 if ('pictureInPictureEnabled' in document) { // do something } else { // not support } if (typeof videoEl.requestPictureInPicture === 'function') { // do something } else { // not support } API 调用 我们可以通过调用 requestPictureInPicture 来实现画中画播放模式。 someBtn. 详情 »

查看详情

【译】Web 视频播放前前后后

这应该是目前写的最为完整的关于 Web 视频播放的文章。从简单的 Video 元素到 MSE 直播的应用，作者给出了具体的代码，文章由浅入深，普及现代 Web 播放技术的前前后后。五星推荐阅读。 @Paul Berberian 原文地址: https://medium.com/canal-tech/how-video-streaming-works-on-the-web-an-introduction-7919739f7e1 注意：本文是JavaScript视频流的介绍，主要针对Web开发人员。这里的大部分示例都使用HTML和现代JavaScript（ES6）。如果您对它们还不够熟悉，那么您可能会发现很难继续学习，尤其是代码示例。 原生视频 API 从2000年代初期到后期，网络上的视频播放主要依靠Flash插件。 ** 警告用户安装Flash插件 ** 这是因为当时没有其他方法可以在浏览器上流式传输视频。作为用户，您可以选择安装Flash或Silverlight之类的第三方插件，还是根本无法播放任何视频。 为了填补这个空白，WHATWG 开始研究 HTML 标准的新版本，其中包括本地的视频和音频播放。苹果公司在其产品上禁用 Flash 后，这一趋势更加明显。而该标准后面成为现在的 HTML5 的标准。 因此，HTML5除其他新的标签外，将 < 详情 »

查看详情

Web 播放 AV1 概述

前言 AV1 是 Google 协同 Netflix, Amazon, Huawei等知名公司所建 AOMedia 联盟推出的一款开放，免费的视频编码格式。而它的直接竞争对手便是目前也非常火热的 HEVC。本文将详细介绍 AV1 的由来和特点，以及如何转码和播放。 发展历史 音视频编解码发展已经有三十余年时间，其实发展的方向也就是两条: 更好的压缩率 更多的播放场景 很早以前我们只能在电视或者 DVD 上看，而现在我们更多的在移动设备或者浏览器上看视频。众所周知，H.264 目前依旧是现在非常主流的编解码方式，它由运动图像专家组开发发布，然而从最早1999年到现在，播放的形式已经千变万化，比如 HDR, 8K ,360° 视频等。为了满足当前的形式发展，H.265 诞生了，在视频压缩上更进一步。然而，不好的事 H.265 需要支付昂贵的专利费用，这是很多厂商无法接受的。 因此一些公司开始尝试别的视频格式，其中 Google VP9, 它是谷歌内部用来代替 H.264 详情 »

查看详情

【译】VMAF 视频质量评估工具概述

原文地址: https://medium.com/netflix-techblog/vmaf-the-journey-continues-44b51ee9ed12 本文是 Netflix 关于自家的 VMAF(Video Multi-method Assessment Fusion) 的介绍，它可以很好的去评估一个视频的质量通过借助人类视觉模型以及机器学习，它目前已经开源，并且集成在诸如 ffmpeg 这些第三方工具上。 by Zhi Li, Christos Bampis, Julie Novak, Anne Aaron, Kyle Swanson, Anush Moorthy and Jan De Cock Netlfix 是如何评估一个视频的质量的？ 哪种视频的编码方式更好？ Codec A 或者 Codec B？ 对于这个剧集，1000 kbps 是否比 HD 分辨率更好，或者 SD(标清) 更好？ 当我在从事提升 详情 »

查看详情

QUIC 对视频播放的影响

Google/QUIC, Quick UDP Internet Connections 是一种实验性的网络传输协议，位于OSI模型的传输层。由Google开发，在2013年实现。QUIC使用UDP协议，它在两个端点间创建连线，且支持多路复用连线。 现代 TCP 是在 RFC 793 中定义的，进过数十年的的实验，实践出来。它在 1981 年发布。HTTP Working Group 在2013开始关注 HTTP/2 的工作，他们聚焦到如何优化 HTTP 在 TCP 的使用上。他们尽可能的消除队头阻塞, 提升对连接的利用。HTTP/2 支持了多路复用，从而高效的利用 TCP 连接。但是 队头阻塞的问题并没有完全解决，因为包传输是有序的，于是 QUIC 为了克服这个问题，将 数据流层移至传输层，它在 UDP 之上构建了一个类似 TCP 详情 »

查看详情

【译】AR/VR 显示技术原理 (上)

原文地址： https://medium.com/hackernoon/fundamentals-of-display-technologies-for-augmented-and-virtual-reality-c88e4b9b0895 @Kore 随着 Google Glass 和 HTC Vive 给大家带来了对于增强现实和虚拟现实的体验，头戴设备正在成为新型趋势。核心的是对于 头戴设备屏幕 (head-mounted displays，HMDs)，它包含两个基本的元素: 光学元件和 图形显示。 光学 在了解光学基础之前，我们需要先弄懂人眼的基本属性。 视场 FOV (Field of View) 它主要表示人眼所能看到的图像最大角度范围。一般人的话，我们水平方向双眼是 200 度，会有 120 度的重叠。双眼重叠部分对于人眼构建立体和景深非常重要，这个我们会在后面讲到，而垂直视角大约为 130 度。 瞳间距 IPD (Inter-pupillary distance) 这个比较好懂，就是人眼瞳孔的距离，它在双目视觉系统有着重要的影响。瞳距在不同的人之间，性别之间以及人种之间都不一样。错误的瞳距计算会影响眼镜的对齐，图形失真，视觉疲劳以及头晕。 详情 »

查看详情

【转】你真的了解当年看过的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: ', 详情 »

查看详情

Oculus 自动唤起 VR 模式

移动设备相对传统 PC , 对 Web 的限制相对而言会更加严格一点，尤其 Webkit 针对 网页的权限限制非常严格。 比如我们常见的自动播放，随着 Safari 的限制，后面 Chrome 也开始限制音视频的自动播放功能。 同样的对于头显类设备，注入 Facebook Oculus 系列(Go, Quest 等)，三星 MR 等，作为移动设备对音视频同样采取了一些限制。我们在开发 VR 的时候，必然需要唤起 VR 模式， 类似自动播放 的策略，我们也需要做唤起 VR 的手势交互逻辑。 当然唤起失败后，我们需要在界面出现点击的按钮，让用户手动点击。 // display 是 之前 navigator.getVRDisplays() 获取的关于可用头显设备对下 display.requestPresent([ { source: canvasElement, }, ]) .then(() => { console.log( 详情 »