> For the complete documentation index, see [llms.txt](https://tech.banchengyun.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.banchengyun.com/archives/frontend/ios-video-h265.md).

# IOS H5 视频无法播放

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

### 问题描述：

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

随后我们查阅了[iosHttp 流](https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html)的官方文档，发现它所支持的视频格式目前只有

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

![iosVideo](https://bcy-scrm.oss-cn-hangzhou.aliyuncs.com/ebe5b6ca14fe4d3c8fc8376b3b90b1fa5e4a444b.png)

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

![videoMsg](https://bcy-scrm.oss-cn-hangzhou.aliyuncs.com/6690bb47acd18994bd15087627e4599aa51e1346.png)

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

> H.264: H.264 是当前主流编码标准，以高压缩高质量和支持多种网络的流媒体传输著称
>
> H.265: H.264 编码器的下一代，它的主要优点提供的压缩比高，相同质量的视频是 H.264 的两倍。

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

[H.264 和 H.265（HEVC）深度解析及对比](https://blog.csdn.net/weixin_42229404/article/details/84639538)

[从 HEVC 到通用视频编码的下一代视频压缩技术](https://blog.csdn.net/vn9plgzvnps1522s82g/article/details/106152333)

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

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

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

![videoFormat](https://bcy-scrm.oss-cn-hangzhou.aliyuncs.com/3ed0d0f64ffad147024f7bdac5d5d7a49f808f59.png)

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

## 怎么解决

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

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

#### 第一种

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

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

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

#### 第二种

[libde265.js](https://github.com/strukturag/libde265.js)

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

#### 阿里的解决方案

[Web 端 H.265 播放器研发解密](https://blog.csdn.net/Taobaojishu/article/details/99830527)

可远观而不可亵玩焉

## 结语

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