查看详情

聊聊 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除其他新的标签外,将 < 详情 »

查看详情

微信小程序适配 iPhone 11/Pro

最新版本微信更新了 iphone 11 和 12 的型号返回,可以直接判断。 由于目前 iPhone 发售的新机型,iPhone X / iPhone 11 系列,都是刘海屏。因此在小程序设计中,我们经常需要考虑到底部的适配。 常规的我们是通过获取系统信息模块来获取的。 cont app = getApp(); wx.getSystemInfo({ success: function(res) { //model中包含着设备信息 console.log(res.model) const model = res.model; if (model.search('iPhone X') != -1){ app.globalData.isIpx = true; }else{ app.globalData.isIpx = false; } } }) 而 iPhone 11 系列由于微信还未及时更新型号,返回的 详情 »

查看详情

在 FFMPEG 使用 VMAF

《VMAF 视频质量评估工具概述》 中对 Netflix 开源的视频质量评估工具有一个简单的介绍。 如果我们需要了解一个视频在转码过程中怎样的编码配置会产出最好的结果,我们需要尽可能获得一个比较高的分数 (0-100)。 安装 如果你之前没有安装 FFmpeg ,你可以先安装 FFmpeg; brew install ffmpeg 最新的版本已经默认启用 libvmaf 所以,你这样直接安装就好。如果想要自己构建的话,继续阅读下文。 我们要启用 libvmaf, 我们先 clone vmaf 项目。 git clone https://github.com/Netflix/vmaf.git 然后进入 ./libvmaf 目录,我们要 build libvmaf 。 meson build --buildtype release ninja -vC build 我们需要配置 ffmepg; git clone https://github.com/ 详情 »

查看详情

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 详情 »

查看详情

快速实现本地 https 预览

一般我们本地预览的时候,一般就用 localhost + 端口 就行了,再有需要的话,会类似修改 Hosts ,然后进行域名的绑定 127.0.0.1 dev.xxxx.com 这样我们可以借助本地 hosts 来实现对域名访问本地的服务。 借助 Fiddler 或者 Charles 可以实现代理,从而让手机进行域名的访问。 不过我们有的时候需要访问 https 的服务。 这个时候相对来说,我们可以在使用 serve 基础上,安装 https-localhost 来进行服务的启动。 在这之前,我们也需要安装 nss 。 brew install nss 然后,我们执行 npm 安装命令就好。 npm i -g --only=prod https-localhost 安装完成后,这个时候我们进入目录。 serve ./ 如果我们看到这些字样 Serving 详情 »

查看详情

【译】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) 这个比较好懂,就是人眼瞳孔的距离,它在双目视觉系统有着重要的影响。瞳距在不同的人之间,性别之间以及人种之间都不一样。错误的瞳距计算会影响眼镜的对齐,图形失真,视觉疲劳以及头晕。 详情 »

查看详情

WebP 可用性探测

webp 是目前 Web 比较流行的解决方案,相对于 Jpeg/png, 基于 VP8 的压缩,有着非常不错的压缩率。 WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index 比较基础的方法,还是检测 UA 白名单来说,毕竟这些版本都是很早就支持。 这个方法可控性大,而且能够支持 SSR 渲染,在服务端做 UA 判断然后输出对应的图片格式。 当然,常规的另外一种解决方式是,就是远程加载一张 webp 图片观测是否报错 function checkWebPSupport) 详情 »