Web 开发技术分析，前端开发学习历程。
280 篇文章非常早之前写过关于一篇《[译]Medium 是如何优化图片加载的》 的文章。 最近在看一些视频封面的优化，其中会有一些黑屏的问题，于是乎想到了是不是可以借鉴这种风格。 大概原理还是，可以根据视频的 loadeddata 事件，然后将覆盖在上面的模糊的封面图隐藏，然后播放视频。 html <div class="video-container"> <video width="720" src=""></video> <div class="cover"></div> </div> CSS .video-container { position: relative; width: 720px; display: none; 详情 »
在公司工作，普遍采用了AB实验去验证某个 Feature 的效果，但是客户端或者前端工作而言，我们在做实验分析的时候还需要做更多的事情。 去年自己遇到一个 Case 便是如此。这里不太会透露很多业务的细则。 比如自己再做的的一个实验 A, 它在前端整体跑下来的结果是 显著 positive 的。比如它从设计的出发，会带来某个指标的增长。从假设出发，到最后的结果，我们发现符合预期的。因此我们计划将它应用到全量用户。 总的来说这里没什么问题，但是我们都知道前端其实面临非常多设备型号， 有可能存在某种型号在这个 feature 上的失效，带来负面的影响。虽然我们看到了总体的增长，但是部分用户我们其实并没有看到预期增长，这个是我们工作需要去重视的。 因此后来我们也提议，在做实验结果 Review 的时候，可以 Review Top5 的机型指标增长情况。 很多人提出为什么不再测试阶段去针对多个机型的测试呢？ 这里引入另外一个自己的 Case。前端工作的多重性，会让我们的工作总会有所疏漏。 自己在做的某个实验 B，它的假设是可以降低某种错误。然后我们开始进行多个平台的实验，发现普遍都取得了一些效果，然后我们准备去进行全量铺开。然后全量铺开的过程，发现它带来了某一项别的指标的异常上升。然后我们 Review 发现，它在某种机型某种条件下才会失效。 详情 »
很多公司都是企业组织在 Github 上进行代码的管理，因此大家可能需要一个工作的账户和个人的账户区分。其实这个非常好弄，只需要两部即可： Step1 配置多份配置 你可以在你的根目录，创建下面的的结构 ~ ├── .gitconfig <-- global └── Developer/ ├── personal/ │ ├── project_1/ │ ├── project_2/ │ ├── project_#/ │ └── .gitconfig <-- personal └── company/ ├── project_1/ ├── project_2/ ├── project_#/ └── .gitconfig <-- company 然后更新两份配置 # ~/Developer/personal/.gitconfig [credential] username = <github-user> [user] name = <github-user> email = <github-user>@users.noreply.github. 详情 »
这篇文章摘自《在线视频-技术精要》。这是一本非常适合从事多媒体工作的开发人员的手册，里面设计了非常多的方便，不单单是视频编解码，也包括其延伸和基础服务这些。 这里简要罗列下最近阅读的章节，前沿技术趋势。 10bit我们目前主流的 8bit，其实就是我们 RGB 进行组合会有 256 (28) * 256 * 256 总可能性。而 10Bit 也就是 1024(210) * 1024 * 1024 总可能性；这大概可以提供10.71个不同颜色，这无疑将会对图像还原提供更加精准的支持。但是考虑到市场大量的设备仅仅支持 8 bit,显示设备对尚未形成普遍需求。 全面应用还需要等待更长的时间使用颜色更加清晰的活泼的图像，会给人一种更好的体验 HDRHDR(高动态范围)频已经在照片领域广为流行，但是由于传感器所限图像和视频拍摄时，无法保留光照的完全细节需要节奏技术手段给不同种曝光，设置照片组合出HDR的图像HDR并非只影响明暗度，他们与更广的社育和更高的相处比绑在一起为了保证第二内容可以显示，设备上得到正确的渲染。 HDR对视频处理流程中带来的主要变化是显示的预处理和后处理细节，考虑到对SDR内容的兼容有两种流媒体的方案， 一种方案是基于可伸缩视频编码及SDR内容为基础，增强层带有额外的动态颜色范围信息分别进行编码和传述支持需要用专门的解码及极品 HDR 重建另一种方案，这事情生产一个层流和包含额外动态范围与颜色信息的原数据，传统的播放数据则忽略这些元数据，支持HDR的设备进行重建。目前很多设备包括手机都有对 HDR 的支持，总的来说这一块还算比较热门了。 详情 »
DRM （英语：Digital rights management，缩写为DRM）是一系列访问控制技术，通常用于控制数字内容和设备在被销售之后的使用过程[3][4][5]。DRM有时也称为拷贝保护、复制控制、技术保护措施等。许多数字出版社和软件厂商都使用了DRM，例如亚马逊、AT&T、AOL、Apple Inc等。它如今一次成为很多公司最为基本的一想服务和要求。而且在音视频，文档，电子书领域都有他的存在。这里自己主要介绍音视频中的 DRM。 如今，电视音乐已经成为我们生活的一部分。如果大家回忆历史的话，我们最初接触这些东西是通过电视，而不是 APP。那个时候大家还流行通过租借 VCD 的形式，来看成龙周星驰的电影。随着数字媒体的兴起，我们可以非常容易的在网上看到最新的电影，这给电影的制作商带来了非常大的利益损失。因此对于非常复制的盗版打击，一直都是这些从事内容提供商一直需要去处理的事情。 DVD论坛的内容扰乱系统是一个早期的DRM系统。它使用简单的加密算法，制作DVD播放器的厂商必须获得授权在产品中实现此技术，然后才能解密并播放DVD中的加密内容。授权条款规定了播放DVD内容的方式，包括输出信号的格式和方式，以保证在电视上播放时视频的加密不受破坏。 在1999年，微软发布了WMDRM，用于执行媒体文档包含的DRM指令，限制用户对媒体文档的使用。这些DRM指令可以指定文档的播放次数、是否能被备份或转发。 详情 »
准备开始写一系列关于 DRM。由于自己主要从事流媒体工作，这里也以流媒体的内容为主。 这里大概会写几篇，代码部分会聚焦在 Web 端的内容处理。自己最近一直在从事这方面的工作，因此也希望罗列整理一些资料，分享自己在这方面的一些心得。 DRM 目前已经存在于绝大多数的服务 APP 中。最直观的体验，就是你可以尝试看一些来自 Disney 等电影公司的电影，时候你可以尝试截图试一下： 我们可以从 Bilibili 网站点击进去，发现截图的时候是黑屏。这样也是为了防止录屏将视频流出去。尽管我们有 DRM 保护技术，但是还是依旧存在严重的流媒体盗版事件。因此DRM发展依旧有很长的路。 这一些列文章，自己将从下面几个部分区介绍: 什么是 DRM 常见的流媒体DRM 方案 Web 前端如何支持 DRM 深入理解 Widevine HDCP介绍 PSSH and PSSH Box 介绍 常见的 DRM 问题 希望这一系列文章，可以帮助大家去慢慢理解 DRM 工作，并且在日常工作中有所实践。 详情 »
Typescript 如今已经成为非常火的开发语言，很多公司都将它作为首要的项目搭配。自己也是在使用中，发现了国外工程师非常严苛的要求用对 unknown 和 any。 unknown 类型，顾名思义：任何值都可以分配给unknown类型，但如果没有类型断言，unknown则不能分配给除自身和any类型之外的任何值。unknown同样，如果没有首先断言或将其限制为更精确的类型，则不允许对类型设置为 as 的值进行任何操作。 any 则是当变量的类型未知或变量的类型尚未定义时使用的泛型类型 其实我们看一段代码就很好理解了: let vAny: any = 10; // We can assign anything to any let vUnknown: unknown = 10; // We can assign anything to unknown just like any let s1: string = vAny; // Any is assignable to anything let s2: 详情 »
大家可能偶尔会有碰到在 Web 端处理 XML 的文件 Case. 之前大家可能第一时间想的是正则表达式。 我们经常用它来进行标签或者属性的匹配。 但是今天会给大家带来一种全新的思路。我们知道 XHTML 是 XML 的子集。而且很早 HTML 就开始自己自定义的标签了。因此我们可以尝试借助 DOM Node 的思想把我们的 XML 文件字符串来进行 Dom 节点的转换。 var parser, xmlDoc; var text = `<?xml version="1.0" encoding="UTF-8"?> <!--Generated with https://github.com/google/shaka-packager version v1.5.1-c540e5a-release--> < 详情 »
最近一直在做 MSE 相关的事情，机缘巧合下碰到了关于 ReadyState 和它有可能触发的事情的研究，于是写下这篇文章作为记录。 前面一篇文章 HTML5 Video 元素 Ready State 分析 分析了 readyState 状态的具体含义，今天则会根据状态和关键事件来进行分析。 VIdeo 关于启动播放，有下面这些事件选择： loadedmetadata: 事件在元数据（metadata）被加载完成后触发 loadeddata: 事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发。 canplay: 事件在终端可以播放媒体文件时（但估计还没有加载足够的数据来播放媒体直到其结束，即后续可能需要停止以进一步缓冲内容）被触发。 canplaythrough: 事件在终端可以播放媒体文件时（估计已经加载了足够的数据来播放媒体直到其结束，而不必停止以进一步缓冲内容）被触发。 我们可以看到事件先后顺序是: loadedmetadata -> loadeddata -> canplay -> canplaythrough 我们再看看 3G 网速下的测试效果: 可以看到还是 loadedmetadata -& 详情 »
原文链接： https://medium.com/@lazerwalker/how-to-easily-test-your-webvr-and-webxr-projects-locally-on-your-oculus-quest-eec26a03b7ee WebXR 目前还是特别小众的项目，所以在 Oculus 上调试也是需要一些实践的，希望这篇文章可以提升这方面的效率 最近，我花了很多时间使用 Babylon.js 制作 VR 游戏原型。我喜欢 Babylon 和 WebXR API 等技术如何让我利用现代 Web 开发的快速迭代时间构建 VR 体验，而不是使用 Unity 等较慢的编译循环。 也就是说，直到最近，我的开发工作流程中有一部分让我很恼火！ 我的大部分测试都是在 Oculus Quest 上进行，开发则在 Mac 上进行。WebVR 和 WebXR API 都要求您从通过 HTTPS（而不是非安全 HTTP）提供服务的网页访问它们，大多数浏览器都为localhost. 由于我使用的是 Mac，因此无法通过 Quest 详情 »
