# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tech.banchengyun.com/archives/frontend/ios-video-h265.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.