从浏览器在线播放 HEVC / H.265 编码的探索与思路
配图

背景

HEVC / H.265 是新一代的视频压缩标准,相比 AVC / H.264,它的一大特色是能在更高的画质下保持更低的文件体积,这对视听行业的未来——4K,乃至8K都至关重要。而仅在 1080P 下,HEVC / H.265 也有着十分优秀的表现。这一编码标准已经被监控安防、视听等行业广泛运用。

但目前,主流的浏览器,像是 Chrome 或 FireFox, 均不支持在浏览器内硬件解码 HEVC。这是因为在 HEVC / H.265 技术的背后,正有着数个组织或公司正在收取其专利费。高昂的专利授权费用使得 Google 等公司不再计划推进这项技术。2015年,谷歌、微软 Mozilla 和思科等多家大型 IT 公司发起了开放媒体联盟,计划创建一个名为 AV1 的开放免费编解码器,至今已经取得了不少成果。但也因为以上原因,HEVC 基本无望受到各大浏览器的青睐。

AV1 相比 HEVC 拥有着更多优势——免费、比 HEVC 更上一层的压缩比,在海外的主流内容平台如 YouTube 、Netflix 被采用,其正被视为挑战 HEVC 的强有力对手。这一局面,造就了 Chrome / Edge、FireFox (AV1 阵营) 和 Safari (HEVC 阵营) 对编码格式支持的不同:

那为什么还要从浏览器播放 HEVC?

研究这个方法主要是因为近一段时间在制作一个私人的番剧库。国内的番剧字幕组或压制组,目前主要偏好的编码格式便是 AVC / H.264 和 HEVC / H.265。同时,由于 HEVC 编码的资源,通常会和内封ASS字幕一起打包到MKV内,因此浏览器完全无法胜任这类资源的播放。

最开始的想法是自己用开源的解码库制作一个带有播放能力的软件。但实际上我只会一点点 Js,根本不可能实现。深入学习打算看看其他大的视频平台是如何处理类似的问题的,了解到视频云。视频云是一种各大云厂商提供给你的服务,你可以将任意格式编码的视频上传到云,由服务器来为你转码成兼容性最佳的 AVC / H.264 编码格式,这样就能实现在任何地方播放。但这是一个商业性质的解决方案,转码成本贵的飞起,更不用说每个月把视频存储在云上的收费……

后来又了解到B站的解决方案。B站今年来推行HEVC格式,到目前,所有上传的视频都会被二压成HEVC、AVC两种编码,使用FLV和DASH格式封装。根据B站视频云技术在LiveVideoStackCon2019上的分享,B站2018年全站H.265的流量占比已超过50%,预计2019年末单日H.265流量占比将会达到80%左右。今年是2022年,这个比例应该会更加成熟。那么,这是如何做到的呢?答案是软解。上面提到的所有支持/不支持,都是建立在硬解(GPU解码)的基础上的。而与之相对的是软解(CPU解码)。软解由于其解码过程完全由软件控制,因此拥有非常强的兼容性,但是性能也会更差。同样,软解则需要开发人员更高的技术力,而不是单纯的使用硬件提供的接口。

不过我也深知个人的能力和技术有限,社区内也没有比较完善好友的开源软解库(也可能是我没找到)。遂放弃软解这一条路。并且除了 HEVC 编码,同样被封装在MKV内的还有ASS特效字幕。目前浏览器中能够通过JS实现字幕显示,ASS渲染倒是有相关的解决方案:weizhenye/ASS: A JavaScript ASS subtitle format renderer,但是由于是MKV,ASS内封于文件,仅在浏览器内解出字幕再渲染,想想难度应该就不小…

URL Protocol

由于种种困难,我们无法实现在浏览器内完成解码到渲染的全部工作。最好的方法还是脱离浏览器,拥抱兼容性强、性能高、更加稳定的本地播放器。经过一段时间的探索,我发现了 URL Protocol —— 自定义协议调用本地软件的一个浏览器通用协议。

早年有使用过迅雷的网友应该都见过这样一种链接:thunder://xxxxxx。这是迅雷的一种链接和协议,在浏览器中打开“thunder://” 即可直接打开迅雷下载。它就像 ”magnet:?xt=”、“ed2k://” 甚至是QQ加群的链接一样,是一种能够调用本地程序的协议,被绝大多数浏览器所支持。那么,如何注册这一种协议呢?实际上很简单,只需要在注册表中添加几个键值对即可,添加后浏览器就能够识别自定义的协议前缀,并且通过命令行调用的方式启动应用并且传递参数。如果你感兴趣你的电脑上都有哪些软件可以被浏览器打开的话,可以打开注册表编辑器,查找一下[HKEY_CURRENT_USER]主键下的哪些目录包含“URL Protocol”这个键。我发现了比较奇妙的是有一个 calculator://,可以直接打开Windows上的计算器。具体添加的教程网上也有很多,这里不再赘述。

解决方法

目前,Windows 平台已知的支持 URL Protocol 的播放器,是 PotPlayer。使用 potplayer:// + URL 即可直接调用PotPlayer 播放,十分好用。示例:PotPlayer 打开 [Airota][Majo no Tabitabi][12][BDRip 1080p HEVC-10bit FLAC ASS].mkv。VLC Media Player 的桌面版不知为什么并没有此功能,但 GitHub 上有作者制作了一个补丁,这个项目也是一个很好的 URL Protocol 例子:

Android 和 iOS 端的 VLC 倒是支持了这一功能,使用 vlc:// + URL 即可实现调用。示例: 移动端 VLC 打开 [Airota][Majo no Tabitabi][12][BDRip 1080p HEVC-10bit FLAC ASS].mkv。Mac 平台似乎 IINA 是能够支持这一功能的。很可惜,目前我还没有找到一个能够在所有主流平台上使用、兼容性强、性能高还支持浏览器调用的播放器,如果有知道的dalao欢迎在评论区敲我~

效果

学了一个多月 JavaScript,目前我已在浏览器内达成了如上图所示的效果。当播放的媒体是 MKV 格式时,会自动提示浏览器不支持,然后提供数个外部播放器的启动按钮。昨天还新增加了一个直链复制的功能,通过 clipboard.js 实现,如果有机会再水一篇这个库的使用(

参考

为什么在浏览器不支持H265视频播放 – 井凉一一 – 博客园 (cnblogs.com)

哔哩哔哩H.265编码器在直播和点播的实践和应用 – 哔哩哔哩 (bilibili.com)

weizhenye/ASS: A JavaScript ASS subtitle format renderer (github.com)

利用URL Protocol实现网页调用本地应用程序_只要踏出一步,路就在前方——zssure-CSDN博客_网页打开本地程序

评论

  1. 云之巅
    Android Chrome 78.0.3904.96
    4月前
    2022-3-10 15:39:58

    路过
    Cloudreve 这个直链无法被弹弹play 播放(
    有啥下载下来之外的办法吗

    • Magma
      博主
      云之巅
      Android Chrome 98.0.4758.29
      4月前
      2022-3-10 16:13:01

      弹弹Play桌面端目前是不支持的Cloudreve直链的,原因:串流功能未对302跳转链接适配。而手机版弹弹Play可以直接播放。此前我已向官方反馈此问题,但目前作者没有更新,如果着急,可以去催一下https://support.qq.com/embed/phone/104929/post/163664218710811154?
      OneDrive一大特点就是不能生成永久链接,其下载链接一小时后便会失效。因此,用户在Cloudreve生成直链时,获取到的实际上是Cloudreve自己的一个API链接,访问此API链接,Cloudreve将会向微软服务器请求临时链接,然后将微软服务器返回的链接通过【HTTP 302 临时重定向】的方式返回客户端,这样就完成了一次资源的获取。PotPlayer和VLC都支持这种情况,但弹弹Play目前不行,可能设计上更像是一个本地播放器吧

      所以说,想办法用工具HTTP GET一下Cloudreve的直链,就能拿到302之后的地址了,实际上很简单,这个工具可以是浏览器

  2. iR
    Windows Edge 97.0.1072.62
    6月前
    2022-1-16 20:16:38

    网站备案了啊,感觉速度快了一些

    • Magma
      博主
      iR
      Windows Edge 97.0.1072.62
      6月前
      2022-1-16 20:36:31

      是的

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇