いろんなデバイスの AV1 コーデック対応状況

AV1 コーデックが出てからちょっと時間が経過して、YouTube や Netflix で一部使われ始めているようですが、各種デバイスのネイティブプレイヤーではどうなの？
と気になって調べてみました。

# 準備

まずは AV1 コーデックの動画ファイルを作成する必要があり、AWS Media Convert を使って作ってみました。

## 元素材

なるべく高画質なものと思い下記から 4K UHD 60fps なものをダウンロード。


http://bbb3d.renderfarming.net/download.html

Big Buck Bunny
Copyright (C) 2008 Blender Foundation | peach.blender.org
Some Rights Reserved. Creative Commons Attribution 3.0 license.
http://www.bigbuckbunny.org/

## 変換

MediaConvert で画角 1920x1020 ビットレート 1Mbps、その他設定はデフォルトで MP4 と DASH に変換。

変換時間は高速変換で MP4 でも DASH でも 11-13分程度。

![スクリーンショット 2022-11-04 15.46.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172426/63bc5dc1-3fc1-e626-ffe7-1317ceb6cc59.png)

MediaConvert では HLSのAV1は作成できないんだけど仕様なのかしら。

# 再生方法

MP4 はブラウザのURL欄にURLを直打ちして再生する方法と、HTML video tag で URL を指定する方法。

```html
<video width="1080" height="720" controls>
  <source src="https://xxx.s3.ap-northeast-1.amazonaws.com/MC/encoded/av1/file/av1.mp4" type="video/mp4">
</video>
```

DASH は clappr を使って再生しました。

```html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/gh/clappr/clappr@latest/dist/clappr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/clappr/dash-shaka-playback@latest/dist/dash-shaka-playback.js"></script>
  </head>

  <body>
    <div id="player"></div>
    <script>
      var player = new Clappr.Player(
        {
          source: 'https://xxx.s3.ap-northeast-1.amazonaws.com/MC/encoded/dash/av1/bbb_sunflower_2160p_60fps_normal.mpd',
          plugins: [DashShakaPlayback],
          shakaConfiguration: {
            preferredAudioLanguage: 'pt-BR',
            streaming: {
              rebufferingGoal: 15
            }
          },
          shakaOnBeforeLoad: function(shaka_player) {
            // shaka_player.getNetworkingEngine().registerRequestFilter() ...
          },
          parentId: '#player'
        });
    </script>
  </body>
</html>
```

# 再生してみる。

## Mac 

いつも業務で使ってる Mac で試してみます。

### Chrome 
まずは MP4 URL直打ちで。

![スクリーンショット 2022-11-04 16.06.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172426/ab5e1fd7-6dde-e4d5-f449-0383bea91c1e.png)

おお、再生できた！

次は video tag.

![スクリーンショット 2022-11-04 16.05.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172426/e03a8934-c21c-5563-b65b-6fdabf57830c.png)

これもOK。

最後に DASH。

![スクリーンショット 2022-11-04 16.14.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172426/f1d7de67-cd2d-14e1-d502-deee8817e785.png)

すごいな。
全部再生できた。

### Safari

Safari はどうだろ？

MP4

![スクリーンショット 2022-11-04 16.21.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172426/83f2f7b4-941d-49d6-f2c9-b8ce011f9f8e.png)

う〜ん。

video tag

![スクリーンショット 2022-11-04 16.21.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172426/cad1b04f-e228-37af-c98a-e8fde3107823.png)

白画面・・・
エラーも出ない

DASH。

![スクリーンショット 2022-11-04 16.21.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172426/65be39d7-c804-aa17-079d-e356394e81eb.png)

こっちはエラー表示あり。

やっぱ Safari は駄目だったか。

## iPhone

予想通りぜんぶ駄目でした。

![IMG_7798.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172426/e30ec210-723f-28aa-bfcd-bb7f5244b393.png)
![IMG_7799.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172426/b7d987ee-2b0d-6825-4002-f3aadcd2cfbd.png)
![IMG_7800.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172426/d1517564-37d5-0d4b-57e7-fde30d202e42.png)

ついでに Windows と Android でも試してみよう


# 結果

iPhone は何をやっても再生できず。
Windows Edge はイケるかなと思いきや再生不可。

| Devices | OS | Browsers | MP4 | HTML (videotag) | HTML (DASH) |
|:-:|:-:|:-:|:-:|:-:|:-:|
| MacBook Air (M1, 2020) | Big Sur | Safari バージョン15.5| 再生不可 | 再生不可 | 再生不可 |
| MacBook Air (M1, 2020) | Big Sur | Chrome 107.0.5304.87 | 再生可能 | 再生可能 | 再生可能 |
| MacBook Air (M1, 2020) | Big Sur | Firefox 106.0.3 | 再生可能 | 再生可能 | 再生可能 |
| PC/AT | Windows 10 バージョン 21H2 | Firefox 106.0.2 | 再生可能 | 再生可能 | 再生可能 |
| PC/AT | Windows 10 バージョン 21H2 | Chrome 106.0.5249.103 | 再生可能 | 再生可能 | 再生可能 |
| PC/AT | Windows 10 バージョン 21H2 | Edge 107.0.1418.26 | 再生不可 | 再生不可 | 再生不可 |
| iPhone 12 pro | iOS 16.1 | Safari | 再生不可 | 再生不可 | 再生不可 |
| iPhone 12 pro | iOS 16.1 | Chrome | 再生不可 | 再生不可 | 再生不可 |
| Xperia Ace | Android 9 | Chrome | 再生可能 | 再生可能 | 再生可能 |

# まとめ

この結果をみると、まだまだサービスとして提供するのは厳しいです。
特に iPhone が対応してくれないとツラいですね。
時期尚早。