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

大家才开始学习 MediaSource 的时候,我们都会好奇,其中指定 mimeCodec 的行为: var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; if ('MediaSource' in window && MediaSource.isTypeSupported( 详情 »

Oculus 自动唤起 VR 模式

移动设备相对传统 PC , 对 Web 的限制相对而言会更加严格一点,尤其 Webkit 针对 网页的权限限制非常严格。 比如我们常见的自动播放,随着 Safari 的限制,后面 Chrome 也开始限制音视频的自动播放功能。 同样的对于头显类设备,注入 Facebook Oculus 系列(Go, Quest 等),三星 MR 详情 »

微信小程序连接蓝牙打印机采坑之旅

目前小程序生态越来越丰富,微信给予了小程序一定的硬件通信能力这是之前 Web 很少尝试的事情。 关于蓝牙,常见的就下面几个 API: startBluetoothDevicesDiscovery 开始搜寻附近的蓝牙外围设备 openBluetoothAdapter 初始化蓝牙模块 wx.onBluetoothDeviceFound 监听寻找到新设备的事件 wx.writeBLECharacteristicValue 向低功耗蓝牙设备特征值中写入二进制数据 wx.onBLEConnectionStateChange 监听低功耗蓝牙连接状态的改变事件 wx.createBLEConnection 连接低功耗蓝牙设备 不过实际我们在实现过程中,我们可能还会遇到一些本身 API 详情 »

Web 多媒体开发指南

一般接触音视频开发的前端比较少,但实际里面涉及的知识点非常多,因此做一个脑图,帮助有兴趣的同学学习和研究相关知识点。 基本 Web 多媒体开发覆盖非常多的方面,其中,视频,音频,以及 WebRTC 都比较成熟,而近年来的 WebXR(AR/VR) 也成为大家比较热情研究的内容。它旨在给人类带来听觉和视觉上的冲击。 其实 Mozilla 做过一个专项的列表 Web media technologies ,列举出当前音视频的知识点。 详情 »

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

原文地址: https://medium.com/netflix-techblog/modernizing-the-web-playback-ui-1ad2f184a5a0 这一篇是奈飞前端工程师分享 Web团队在构建新的播放器时候遇到的困惑和解决思路,我们在设计播放器的时候,可能需要考虑到诸多方面,UI 扩展,测试,底层设计,面向多业务多团队等。希望这篇文章可以帮助到你。 从2013年开始,Netflix 的团队一直将重心放到开发视频播放的新特性,而始终未关注播放的视觉UI的改进。 而在过去两年,Web UI 团队制定了一个非常长远的计划,给我们的会员提供更加出色的播放体验。 播放由下面三个维度构成: 详情 »

【译】21个 VSCode 快捷键,帮助你快乐编程

原文: https://medium.com/better-programming/21-vscode-shortcuts-to-make-coding-faster-and-more-fun-b18b25083def @jsmanifest 我们通过安装一些工具或者扩展,有助于提升我们的编程效率,同样的掌握一些非常有用的快捷键,可以促使我们更加愉悦的开发。虽然每个人并不一定有足够的时间和经历去掌握每个快捷键的细节,但是下面 21 个快捷键一定可以帮到你。 一次性搜索全部文件 Windows: Ctrl+ Shift+ F Mac: Control+ Shift+ F 设置 Tab 详情 »

微信视频快进回退的Bug

小编最近在修测试反馈的微信播放视频的问题时候,发现微信播放视频,快进偶尔会回退几秒。才开始一直一直以为是代码在 play 之后事件监听问题。微信(X5 nn内核) Android 必须在 (durationchange) 事件触发后才能进行正常 Seek 操作。可是无论怎么调试都还是有问题,于是尝试播放了一个外链的 mp4 文件,结果惊呆了。 心情💢ORZ 目前问题已经反馈了涉及到QQ浏览器(9.5.0. 详情 »

使用 JS 获取视频 Codec

如果第一次接触 Media Source ,大家都会注意到有一个关于 视频 codecs 的指定。 var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; if ('MediaSource' in window && MediaSource.isTypeSupported( 详情 »

技术人员如何做出苹果风格的 PPT

确实标题党了,不过还是可以关心一下。最近看到苹果内部公开的一些 PPT,其中覆盖到产品说明,SDK 使用,以及具体的代码展示这些,有差不多十几个 PPT ,虽然只是 PDF ,但是还是觉得这其中有些很重要的 "原则" 值得大家去学习。后面也会提供苹果的 PDF 的下载 参考。 使用表格 其实做类比的时候,表格一直都是最直观的手段去进行对比,而这次表格非常直观的用了单线条去展示,没有混用背景色,非常清楚。 展示代码 详情 »

Web Components

React.js, Vue.js 的流行不是偶然,现代的工程化体系中离不开组件化的体系。我们充分享受了组件化带来工程效率的提升以及社区的优势。 Web Component是 是一些 W3C 官方定义的一些技术的合集表现,主要是下面三个内容: 自定义元素 Shadow DOM HTML 模板 自定义元素 自定元元素,也就是在 Html 中实实在在的标签,就像 DIV, SPAN 详情 »