HTML5エンコーディング

このトピックでは、ブライトコーブプレーヤーなどの HTML5 ビデオプレーヤーを使用して再生するビデオをエンコードする方法について説明します。

はじめに

HTML5 <video>のタグは素晴らしいことです。Flashのようなプラグインに依存するのではなく、現在のすべてのブラウザでネイティブビデオ再生を可能にします。Flash をサポートしていないデバイスで Web ビデオへの扉を開き、以前は Web 再生不可能だったコーデックを有効にします。

しかし、ビデオコンテンツを公開している場合、ブラウザーのサポートが混乱する可能性があります。Webビデオを本当にサポートするには、出力バージョンをいくつ作成する必要がありますか？WebM、Ogg、MP4？iPhoneとかAndroidってどうなの？低/中/高ビットレートバージョンはどうですか？

この質問に対する単一の答えはないので、HTML5 ビデオの出力を選ぶための短いガイドを以下に示します。

どのWebフォーマットですか？

一部のブラウザではネイティブに動作する 3 つのビデオフォーマットがあります。残念ながら、すべてのブラウザではフォーマットが機能しないため、意味のあるHTML5ビデオをサポートしたい場合は、少なくとも2つを実行する必要があります。

最小限、AAC または MP3 で MP4 + H.264を使用する必要があります。MP4ビデオは、サファリ、クロム、IE9（Vista/Windows 7）でネイティブに再生されます。また、Flashビデオフォールバックのためのあなたの最良の選択肢です, そして、多くのデバイスでネイティブに再生します (iOS, アンドロイド, ブラックベリー, PSP, Xbox, PS3, など).H.264 ハイプロファイルを使用して最高の品質を得るか、同じビデオをモバイルデバイス上で再生できるようにする場合は、ベースラインプロファイルを使用します。

それ以外にも、 WebM + VP8または Ogg + Theora を Vorbisオーディオで他のブラウザで使用してください。

推奨事項:最小限に、MP4 + WebMまたはOggのいずれか、またはその両方です。

モバイルデバイスは何ですか？

繰り返しますが、すべてのモバイルデバイスで動作する単一のモバイルプロファイルはありません。実際、モバイルビデオには、ウェブ用のものよりもさまざまな規格があります。しかし、幸いにも、いくつかのよく選択されたレシピは、最新のモバイルデバイスをカバーすることができます。

詳細については、モバイル用のビデオのエンコードに関するガイドをご覧ください。

1.最新のモバイルデバイスのほとんどは、MP4/H.264をサポートしています。これには、iOSシリーズ（iPhone、iPod、iPad、アップルテレビなど）全体、ほとんどのAndroidデバイス、現代のブラックベリーの携帯電話などが含まれます。これらのほとんどの場合は、必ず H.264 ベースラインプロファイルを使用してください。iOSとAndroidでは640x480以下を使用し、ブラックベリーサポートでは480x360以下を使用する。

iPhoneで再生される同じファイルは、HTML5（一部のブラウザ）または Flash を介してウェブ上で再生できます。したがって、バージョンを減らしたい場合は、同じバージョンを使用してください。しかし、ほとんどのモバイルデバイスではベースラインプロファイルに固執しており、メイン/ハイは大きな違いを生むため、各デバイスで最高の品質が必要な場合は、別々の出力バージョンを使用するのが良いアイデアです。

2.古いモバイルデバイスには 3GP/MPEG4 を使用します。ほとんどのBlackberrysといくつかのAndroidも3GPをサポートし、3GPは一般的にiPhone/iPodでも再生されます（iOSはMP4/MPEG-4を再生し、3GPはMP4のサブセットに過ぎないので）。

推奨事項:最小的に、MP4、640x480、480x360。最大限に、3つのMP4バージョン（480x360、640x480、720p +メインプロファイル）に加えて、1つまたは2つの3GPバージョン（320x240、おそらく176x144）。特定のエンコーディング設定については、以前の投稿を参照してください。

複数のビットレート

高速インターネット接続のユーザーに大きなビデオを配信するために、複数のビットレートを使用し、インターネット接続の遅いユーザーには小さなビデオを配信する必要がありますか？ユーザーがWeb上で高品質のビデオを見ている場合、答えはおそらく「はい」です。これを達成するために、2-3のサイズとビットレートを使用することを検討してください。例えば、640x360のビデオと1280x720のビデオです。今後の記事では、これについてもっと詳しくご検討ください。

ストリーミング

Zencoder は、iOS デバイス向けのHTTP Live Streaming、 Microsoft Smooth Streaming (Silverlight)にも対応している。

要約

1.HTML5ビデオの最小値はMP4 + WebMまたはOgg（またはその両方）で、FlashフォールバックにはMP4バージョンを使用します。

2.モバイルサポートの場合、 H.264/MP4出力で長い時間がかかることがあります。2-3は、より良い品質とより広い互換性を可能にします。

おすすめ

推奨される構成をいくつか挙げます。Zencoderはこれらの形式をすべてサポートしています。Zencoder を使用して最適な出力プロファイルを作成する方法が不思議な場合は、サポートチケットを開いてください。私たちはいつもあなたに助言を与えることをうれしく思っています。

1.それを働かせて

HTML5、フラッシュ、モバイル：MP4/H.264、ベースラインプロファイル、480x360 または 640x480
HTML5:WebMかOgg

{
    "input": "s3://bucket-name/file-name.avi",
    "outputs": [
    {
        "url": "s3://output-bucket/output-file-name.mp4",
        "size": "640x480"
    },
    {
        "url": "s3://output-bucket/output-file-name.webm",
        "size": "640x480"
    }
    ]
}

HTML5、フラッシュ:MP4/H.264、ハイプロファイル
HTML5:WebM
HTML5:Ogg
モバイル:MP4/H.264、ベースラインプロファイル、480x360 または 640x480

2.丸めよ

{
    "input": "s3://bucket-name/file-name.avi",
    "outputs": [
    {
        "url": "s3://output-bucket/output-file-name.mp4",
        "h264_profile": "high"
    },
    {
        "url": "s3://output-bucket/output-file-name.webm"
    },
    {
        "url": "s3://output-bucket/output-file-name.ogg"
    },
    {
        "url": "s3://output-bucket/output-file-name-mobile.mp4",
        "size": "640x480"
    }
    ]
}

3.すべてをサポートする

HTML5、フラッシュ:MP4/H.264、ハイプロファイル
HTML5:WebM
HTML5:Ogg
モバイル:MP4/H.264、ベースラインプロファイル、480x360、幅広い互換性
モバイル:MP4/H.264、メインプロファイル、1280x720、新しいiOSデバイス（iPhone 4、iPad、アップルテレビ）用
モバイル:3GP/MPEG4、320x240、177x144、非スマートフォン*

{
    "input": "s3://bucket-name/file-name.avi",
    "outputs": [
    {
        "url": "s3://output-bucket/output-file-name.mp4",
        "h264_profile": "high"
    },
    {
        "url": "s3://output-bucket/output-file-name.webm"
    },
    {
        "url": "s3://output-bucket/output-file-name.ogg"
    },
    {
        "url": "s3://output-bucket/output-file-name-mobile-480x360.mp4",
        "size": "480x360"
    },
    {
        "url": "s3://output-bucket/output-file-name-mobile-1280x720.mp4",
        "size": "1280x720"
    },
    {
        "url": "s3://output-bucket/output-file-name-mobile.3gp",
        "size": "320x240"
    }
    ]
}

ページコンテンツ