Cloudflare Streamで縦長Portraitなストリーミング動画配信をしてみた

はじめに

清水です。Cloudflareの動画配信プラットフォームのサービスCloudflare Stream、これまでライブストリーム、オンデマンド動画（VOD）といろいろな機能を試してきました。

• Cloudflare Stream の記事一覧 | DevelopersIO

さて、これまでの検証はいずれも横長動画（Landscape、16:9など）で行ってきました。動画といえばまずこの横長動画をイメージする場合が多いのではないでしょうか。テレビなどで普段目にするのはこちらの横長動画ですよね。しかし最近はスマホの普及に伴い、縦長動画（Portrait、9:16など）を目にする機会も増えているのではないでしょうか。スマホで動画撮影する際に手に持っているスマホ本体の向きを変える必要がありません。スマホでそのまま動画を再生する場合もスマホの画面がめいっぱい利用可能です。スマホのアプリなどでも縦長Portraitな動画を再生するものが増えてきているかと感じています。

さて、そんな縦長Portrait動画の普及を鑑みると、Cloudflare Streamでも縦長Portrait動画が扱えるかが気になってきます。本エントリではこのCloudflare Streamでの縦長Portrait動画の再生について、オンデマンド動画（VOD）、ライブストリーミングそれぞれで確認してみたのでまとめてみたいと思います。結論としてはオンデマンド動画、ライブストリーミングそれぞれでPortrait動画を問題なく扱うことができました。プレイヤーサイズ（向き）によっては左右に黒帯が入るので注意しましょう。

Cloudflare Streamで縦長Portraitなオンデマンド動画配信

まずはオンデマンド動画（VOD）についてPortraitな動画配信が可能か確認してみます。Portrait動画の素材は発売日に購入したiPhone 13 Proで始業前に散歩した桜の咲く井の頭公園のようすを撮影したものです。解像度3840*2160 (16:9)、4Kの縦長版ですね。

まずはダッシュボードからクイックアップロードでそのままアップロードします。

特にエラーなどにはならず、そのまま処理中になりました。サムネイルの左右の黒帯がちょっときになるな、などドキドキしながら処理の完了を待ちます。

処理が完了しました。ビデオ詳細画面のプレビューでは左右の黒帯がありますね。とりあえずビデオのタイトルを変更しておきます。

もともとPlayerサイズが16:9の横長Landscapeだと左右の黒帯は必然的に発生してしまうよな、、と、ブラウザサイズでPlayerサイズが変更されるiframe.videodelivery.netのページを直接開いてみます。横長のブラウザサイズでは以下のように左右の黒帯は残ったままですが、縦長のブラウザサイズにすることで左右の黒帯がなくなります。

横長なPlayerサイズ	縦長なPlayerサイズ

発売日に購入したiPhone 13 Proでもiframe.videodelivery.netを開いて再生してみました。左右の黒帯は発生せず、しっかり縦長Portraitの動画として再生できていることが確認できますね！

Cloudflare Streamで縦長Portraitなライブストリーミング配信

続いてライブストリーミングでの縦長Portraitな動画配信を確認してみましょう。Cloudflare Stream側、ライブ入力はいつもと変わらず手順で（名前だけを指定するかたちで）作成しておきます。

ライブ映像を打上げるStreaming Software側でもPortraitに対応している必要があります。今回はPortraitに対応しているStreaming Softwareとして、発売日に購入したiPhone XS上でLarix Broadcasterを利用しました。

Larix Broadcasterの設定、Resolutionは1920x1080とします。さらに設定項目OrientationでPortraitを選択することで、縦長Portraitで映像を打上げることができます。そのほかの設定は以下の通りです。

実際のLarix Broadcasterの画面は以下のようになります。iPhoneを横向きに変えてもUIは縦向きのままPortraitで映像を打ち上げ続けます。

いざ、Larix Broadcasterで映像を打ち上げます。ダッシュボードのライブ入力詳細画面のプレビューでは左右に黒帯がついています、これは先程のVOD動画の場合と同じですね。

プレイヤーサイズの調整ができるStream Player、iframe.videodelivery.netドメインで開いてみます。以下URLにアクセスします。

• https://iframe.videodelivery.net/$LIVE_INPUT_ID

プレイヤーのサイズが横長な場合は左右に黒帯がありますが、縦長のプレイヤーサイズにすることで黒帯がなくなります。ライブストリーミングでも縦長Portraitの動画として扱われていますね。

横長なPlayerサイズ	縦長なPlayerサイズ

VOD動画のときと同様、発売日に購入したiPhone 13 Proでもiframe.videodelivery.netを開いて再生してみます。こちらも問題なくPortrait動画としてライブストリーミングされています。スマホだとやはりPortrait動画のほうが相性がよさそうですね。

まとめ

Cloudflare StreamでPortraitな縦長動画のストリーミング配信を行ってみました。Portrait動画でもオンデマンド動画、ライブストリーミングともに問題なく扱うことができます。主にスマホで撮影した動画を使うサービスなどでも、Cloudflare Streamは導入しやすいのではないでしょうか。なお、動画自体は縦長Portraitでもプレイヤーのサイズが横長の場合はその間を埋めるために黒帯が入ります。ここはプレイヤー側のサイズや向きを調整することで対応しましょう。