Web视频开发技术总结，视频开发常见问题分析，如何解决前端视频开发的常见问题。
59 篇文章Chrome 在 105 版本后更新了对 HEVC 的支持，意味着，你可以直接在 Chrome浏览中播放 HEVC(H265) 的视频了。 对这个新的更新，当然大家都非常开心，可以放心给 Web 测提供 HEVC 的内容了，然而，这里还有一个点需要大家注意： 不幸的是，当前最大的缺点是，不支持带有 Widevine DRM 的 HEVC，只支持清晰、不受保护的内容。目前尚不清楚 Google 是否计划在未来增加对此的支持。 近期的验证告诉我们，当前Chrome依旧不支持 DRM + HEVC. 所以你依旧需要选择 AVC + DRM 的方式或者 AV1。 https://support.google.com/chrome/thread/206528835/does-chrome-desktop-107-support-hevc-with-widevine-drm?hl=en https://stackoverflow.com/questions/ 详情 »
这篇文章摘自《在线视频-技术精要》。这是一本非常适合从事多媒体工作的开发人员的手册，里面设计了非常多的方便，不单单是视频编解码，也包括其延伸和基础服务这些。 这里简要罗列下最近阅读的章节，前沿技术趋势。 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指令可以指定文档的播放次数、是否能被备份或转发。 详情 »
最近一直在做 MSE 相关的事情，机缘巧合下碰到了关于 ReadyState 和它有可能触发的事情的研究，于是写下这篇文章作为记录。 前面一篇文章 HTML5 Video 元素 Ready State 分析 分析了 readyState 状态的具体含义，今天则会根据状态和关键事件来进行分析。 VIdeo 关于启动播放，有下面这些事件选择： loadedmetadata: 事件在元数据（metadata）被加载完成后触发 loadeddata: 事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发。 canplay: 事件在终端可以播放媒体文件时（但估计还没有加载足够的数据来播放媒体直到其结束，即后续可能需要停止以进一步缓冲内容）被触发。 canplaythrough: 事件在终端可以播放媒体文件时（估计已经加载了足够的数据来播放媒体直到其结束，而不必停止以进一步缓冲内容）被触发。 我们可以看到事件先后顺序是: loadedmetadata -> loadeddata -> canplay -> canplaythrough 我们再看看 3G 网速下的测试效果: 可以看到还是 loadedmetadata -& 详情 »
在 Web 开发中，我们依赖于 Video 元素进行视频播放，相对 Android 或者 Windows 客户端程序，我们更加依赖浏览器测对 Video 元素提供了什么样的能力。 而如果我们需要对丢帧率进行统计，现在有了 VideoPlaybackQuality 来完成改功能。 目前主流浏览器都得到了支持 VideoPlaybackQuality 对象表示了一系列描述视频播放质量的指标。 可以通过 HTMLVideoElement.getVideoPlaybackQuality() 创建一个实例来获取。 里面包含下面的属性; .creationTime 一个用毫秒表示从开始页面浏览到对象创建的 DOMHighResTimeStamp 对象 .totalVideoFrames 表示相 HTMLVideoElement 自从创建起的已创建和丢弃帧数数量总和的值 .droppedVideoFrames 表示相关联的 HTMLVideoElement 自从创建起的已丢弃帧数数量值 .corruptedVideoFrames 一个表示相关联的 HTMLVideoElement 自从创建起的损坏帧数数量的值。一个损坏帧可能属于创建帧或丢弃帧 这样我们通过简单的 droppedVideoFrames / totalVideoFrames 来实现一个丢帧比例的计算，从而实现一个质量的保证。而 hls.js-fps-controller.ts 也是采用相关 API 来实现播控质量的控制。 checkFPSInterval( 详情 »
最近一直在做 MSE 相关的事情，机缘巧合下碰到了关于 ReadyState 和它有可能触发的事情的研究，于是写下这篇文章作为记录。 Video 元素维持内部几个非常重要的状态，这些都是只读的: paused 属性，你可以直接从 video elment 上读取，当你暂停视频的时候，Video 元素会讲这个属性值改为 true, 这里还有一些别的情况，我会在后面一篇文章分析 readyState 属性，当然你也可以从 Video 元素上读取，不同 readyState 意味着 video 的不同状态。 官方罗列了这些状态值: // video element ready state Enum const unsigned short HAVE_NOTHING = 0; const unsigned short HAVE_METADATA = 1; const unsigned short HAVE_CURRENT_DATA 详情 »
对于很多初次尝试播放器的同学而言，在完成基本的开发的下一步，是需要对整个播放状况有个初步的认识，其中需要涉及到埋点设计和实现，因此这一块，对于新手而言是非常有难度的。 之前写过文章 基于 Android EXOPlayer 创建视频播放器 介绍过 ExoPlayer。它是谷歌开源的一款播放器，目前用于 YouTube 生产线，我推荐新手区学习它的原因，它整体包很小，里面有很多不错的实现帮助我们去理解播放最基本的事情。当然如果在生产线，还需要结合自己的实际情况取舍，可以参考 Ijkplayer、ExoPlayer、VLC播放器综合比较 的对比，再做实际选择，这里从 ExoPlayer 为基础，分析整个如何确保我们播放体验(QoE)文档。 接入 AnalyticsListener AnalyticsListener 是 Exoplayer 里面实现的一个接口，用于使用该播放器的开发同学方便的进行播放指标相关的统计。 class VideoQoEListener() : AnalyticsListener { override fun onRenderedFirstFrame(eventTime: AnalyticsListener.EventTime, surface: Surface?) { // Add Your Code to 详情 »
谷歌在开放 Android 套件的时候也非常方便的把自家的 Youtube 播放相关的前端开源总结了出来，也就是我们经常提到的 ExoPlayer 。这里也顺道说下其他端，如果你是 Web 端，你可以使用 谷歌家的 shaka-player , 如果你是 iOS 的话，你可以使用 AVPlayer 。他们都提供从基础 UI 空间到自适应分辨率的支持。当然你也可以选择其他框架。 创建一个简单的 MP4 播放器 首先我们引入依赖 implementation 'com.google.android.exoplayer:exoplayer:2.11.7' 这里我是直接用的最新的版本 2.11.7 接下来我们需要做一些初始化的工作 val player = SimpleExoPlayer.Builder(context!!).build() exoplayer_view.player = player val dataSourceFactory: DataSource.Factory = DefaultDataSourceFactory( 详情 »
Chrome 最新的版本更新了媒体控制菜单的按钮 UI，也就是每次我们的网页产生声音或者视频时候，菜单栏头像附近，方便我们在多个 Tab 进行控制时候加的，方便我们操作这些网页 Tab 下面的音视频。 尤其最新的样式实现非常酷炫，加入对封面的支持，这样整体效果看着非常棒。 很早之前我们写过一篇关于 使用 mediaSession 实现媒体播放的通知栏控制 这里介绍了我们如何在网页播放音频的时候锁屏控件如何显示当前播放音乐的封面和简介，或者控制上一曲下去。 同意视频播放现在也可以，你只需要监听 MediaSession 的相关事件然后设置 mediaSession MetaData 的信息就好。 设置封面标题 if ('mediaSession' in navigator) { var data = mediaList[index] navigator.mediaSession.metadata = new MediaMetadata({ title: data.title, artist: data.director, artwork: [ { src: data.cover, sizes: '192x192' } ] }); } 进行播放控制 // $video has 详情 »
各大厂商在媒体播放这块一般管控都比较严格，所以经常会出现一些非常规的行为，比如 iOS 唤出全屏，比如自动播放，比如画中画(PiP) 无法唤起等问题。 在 iOS 中，我们各个 App 引入的 Webview 容器都是官方推荐的 WKWebView ，我们需要它来加载我们的网页，从而完成部分功能。但是处于安全隐私的考虑，它默认的一些属性是并不开启的。其中我们比较关注的视频播放有这么几项： applicationNameForUserAgent 用于设置 WebView user agent allowsInlineMediaPlayback 是使用h5的视频播放器在线播放, 还是使用原生播放器全屏播放 mediaTypesRequiringUserActionForPlayback 允许哪些媒体格式需要用户手动触发播放 allowsAirPlayForMediaPlayback 是否允许 Apple 的 Airplay allowsPictureInPictureMediaPlayback 是否允许 画中画模式(PiP) 在 Swift 中，我们可以简单的初始化一个 webview struct WebView: UIViewRepresentable { let request: URLRequest var config = WKWebViewConfiguration( 详情 »
