IOS H5 视频无法播放

踩坑记录，ios H5 中 vedio 标签无法播放视频

问题描述：

今天在线上出现了一个怪异的问题，物料中的视频在 ios 系统中的微信浏览器无法播放，复现过程中发现安卓系统下全部正常，ios 系统下部分不正常。

随后我们查阅了iosHttp 流的官方文档，发现它所支持的视频格式目前只有

H.264 基准级别 3.0，H.264 基准级别 3.1，主要级别 3.1 和高级配置文件级别 4.1。

iosVideo

有了以上的定论，我们开始去做文件的溯源，发现了这个视频是 HEVC（H.265）编码，而物料中能够正常被 ios 播放的视频编码为 H.264

videoMsg

在讨论解决方法之前，我们不妨了解一下什么是 H.264 与 H.265

H.264: H.264 是当前主流编码标准，以高压缩高质量和支持多种网络的流媒体传输著称

H.265: H.264 编码器的下一代，它的主要优点提供的压缩比高，相同质量的视频是 H.264 的两倍。

至于他们的对比可以参考以下文章（强推，涨姿势）：

H.264 和 H.265（HEVC）深度解析及对比

从 HEVC 到通用视频编码的下一代视频压缩技术

总结 H.265 是一个比 H.264 体积更小却更清晰，传输带宽更少的视频编码

那问题来了，这么棒的东西，为什么连播都播不了？

以下是现代浏览器版本对 H.265 的支持度 (绿色为可用，红色不可用，黄色需加兼容前缀)

videoFormat

得到的结果非常令人失望，在这之后我去咨询了一位资深 ios 开发，被告知原生 Object-C 也无法支持这种编码格式，需要借助其他的解码器。

怎么解决

就目前来看，现代浏览器对 HEDV 的支持率非常低，我们也无法像阿里一样研发一个自己的解码器，所以目前的解决方案是协助客户，将视频编码格式转换成了 H.264。

其他解决设想：HEVC 的普及速度很慢，不过在上文中提到大部分安卓系统依然是能够正常的进行解码，所以为了更好的体验，我们要做的是：

第一种

判断是否支持播放，通过 source 控制文件

const supportHEVC = (video) => {
  // 是否可访问
  const playable = video.canPlayType('video/mp4; codecs="hevc"');

  return (
    typeof video.canPlayType === "function" &&
    ["maybe", "probably"].includes(playable)
  );
};

第二种

libde265.js

开源的第三方库，实现原理是通过将视频的 frame data 转化为 rgba 像素，再逐帧绘制到 Canvas 上。

阿里的解决方案

Web 端 H.265 播放器研发解密

可远观而不可亵玩焉

结语

我太菜了，连这都解决不了 QvQ