動画 動画のサイズを正しく設定する 動画のサイズを確認する

エンコード済み動画のフレームサイズは、動画要素のサイズによって違ってくる場合があります（画像を実際のサイズでは表示できない場合があるため）。
エンコードされた動画サイズの確認方法は、動画要素の videoWidth と videoHeight プロパティを使用します。
width と height は、動画要素のサイズを返します。
この値は、CSS またはインラインの width と height 属性を使用してサイズが設定されている事があります。



関連記事

• 動画のサイズを確認する
• 動画がコンテナからはみ出さないようにする

動画 動画プレーヤーをカスタマイズする

動画の表示方法はプラットフォームごとに違います。
モバイルではデバイスの向き（縦向きか、横向きか）を考慮しなければなりません。
Fullscreen API は動画コンテンツのフルスクリーン表示を制御できます。

詳しくは以下の記事を参考にしてください。

• さまざまなデバイスでのデバイスの向きの影響
• インラインまたはフルスクリーン表示
• コンテンツのフルスクリーン表示の制御

関連記事

• 動画を追加する
• レガシー プラットフォーム用の代替手段を提供する
• 動画プレーヤーをカスタマイズする
• 動画のサイズを正しく設定する
• 利用しやすさに関する問題
• クイック リファレンス

動画 動画プレーヤーをカスタマイズする コンテンツのフルスクリーン表示の制御

フルスクリーンでの動画の再生を強制できないプラットフォームでは、Fullscreen API が幅広くサポートされています。

出典：http://caniuse.com/fullscreen

Fullscreen API を使用すると、コンテンツやページのフルスクリーン表示を制御できます。


video:のように要素をフルスクリーン表示する方法
elem.requestFullScreen();

ドキュメント全体をフルスクリーン表示する方法
document.body.requestFullScreen();

フルスクリーン状態の変更をリッスンする方法
video.addEventListener("fullscreenchange", handler);

要素が現在フルスクリーン モードかどうかを確認する。
console.log("In full screen mode: ", video.displayingFullscreen);

また、CSS で :fullscreen 疑似クラスを使用して、フルスクリーン モードの要素表示方法を変更できます。

Fullscreen API をサポートしているデバイスでは、動画のプレースホルダとしてサムネイル画像を使用することを推奨しています。

実際の動作を確認するには、グーグルのデモをご覧ください。

グーグルのデモ画面スクリーンショット

注意：requestFullScreen() は現在プリフィックスベンダーです。
完全なクロスブラウザの互換性のための余分なコードが必要な場合があります。



関連記事

• さまざまなデバイスでのデバイスの向きの影響
• インラインまたはフルスクリーン表示
• コンテンツのフルスクリーン表示の制御

動画 動画プレーヤーをカスタマイズする インラインまたはフルスクリーン表示

動画の表示方法はプラットフォームごとに違います。
iPhoneのSafariは、動画要素をウェブページ内で表示しますが、再生するときはフルスクリーンモードになります。

縦向きの iPhone に表示された動画要素のスクリーンショット

Androidは、フルスクリーン アイコンをクリックすることでフルスクリーン モードをリクエストできます。
デフォルトではインラインで動画を再生します。

縦向きの Android の Chrome で再生している動画のスクリーンショット

iPad の Safari では動画をインラインで再生します。

横向きの iPad Retina の Safari で再生している動画のスクリーンショット

関連記事

• さまざまなデバイスでのデバイスの向きの影響
• インラインまたはフルスクリーン表示
• コンテンツのフルスクリーン表示の制御

動画 動画プレーヤーをカスタマイズする さまざまなデバイスでのデバイスの向きの影響

デバイスの向きは、デスクトップやノートパソコンでは問題になりません。
しかし、携帯端末やタブレット末端ではデザインを検討する際には非常に重要です。
iPhone の Safari は、縦向きと横向きでの切り替えが非常にスムーズです。

縦向きの iPhone の Safari で再生している動画のスクリーンショット

横向きの iPhone の Safari で再生している動画のスクリーンショット

iPadやAndroidでは、デバイスの向きが問題になる場合があります。

例　横向きの iPad での動画の再生をカスタマイズしなかった場合。

横向きの iPad Retina の Safari で再生している動画のスクリーンショット

CSS で width: 100% または max-width: 100% と設定すると、デバイスの向きによるレイアウトの問題の多くは解決できます。
また、フルスクリーンの代替手段も検討しなければならない場合があります。




関連記事

• さまざまなデバイスでのデバイスの向きの影響
• インラインまたはフルスクリーン表示
• コンテンツのフルスクリーン表示の制御

動画 レガシー プラットフォーム用の代替手段を提供する

https://developers.google.com/web/fundamentals/media/video/provide-alternatives-for-legacy-platforms?hl=ja

すべてのプラットフォームがすべての動画形式をサポートしていません。
プラットフォームでサポートされている動画形式を確認し、各プラットフォームで動画を再生できるようにします。
詳細は以下の記事を参考にしてください。

• サポートされている形式を確認する
• 複数の形式で動画を生成する
• 使用されている形式を確認する

関連記事

• 動画を追加する
• レガシー プラットフォーム用の代替手段を提供する
• 動画プレーヤーをカスタマイズする
• 動画のサイズを正しく設定する
• 利用しやすさに関する問題
• クイック リファレンス

動画 レガシー プラットフォーム用の代替手段を提供する 使用されている形式を確認する

ブラウザで選択されている動画形式を確認したい場合は、ソースを確認します。
JavaScriptは、動画の currentSrc プロパティを使用して、使用されているソースを取得できます。

Chrome と Firefox は chrome.webm を選択し、Safari は「chrome.mp4」を選択しています。





関連記事
サポートされている形式を確認する
複数の形式で動画を生成する
使用されている形式を確認する

動画 レガシー プラットフォーム用の代替手段を提供する 複数の形式で動画を生成する

同じ動画を異なる形式で保存できるツールがあります。

このツールを使い、様々なプラットフォームや形式で再生が出来るようにします。

代表的なツール

デスクトップ ツールFFmpeg・・・エンコード、トランスコード、マルチプレクサ、デマルチプレクサ、ストリーム、フィルタをデコードし、人間と機械が作成しているほとんど何でも再生することが主要なマルチメディアフレームワークです。
GUI アプリケーションMiro
HandBrake・・・近代的な、広くサポートされるコーデックの選択に、ほぼすべての形式からビデオを変換するためのツールです。
VLC・・・フリーなマルチプラットフォーム対応のマルチメディアプレイヤーであり、DVD、オーディオCD、VCDや様々なストリーミングプロトコルを再生可能なフレームワークです。
オンライン エンコーディング / トランスコーディング サービスZencoder・・・ライブでのパフォーマンスのリーダーとファイルクラウドエンコーディング、iOS用の完全なアダプティブビットレートソリューション、放送局やプロのコンテンツプロバイダのエンコード、マルチスクリーン、ライブストリームのためのアダプティブビットレートのトランスコーディング。
Amazon Elastic Encoder・・・クラウドのメディア変換サービス。高度なスケーラビリティ、使いやすさ、高い費用効率性を実現する設計で、開発者や企業は、メディアファイルをその元のソース形式からスマートフォン、タブレット、PC などのデバイスで再生可能できるバージョンに変換（または「トランスコード」）できます。

関連記事
サポートされている形式を確認する
複数の形式で動画を生成する
使用されている形式を確認する

動画 レガシー プラットフォーム用の代替手段を提供する サポートされている形式を確認する

サポートしている動画形式を検出する方法は、canPlayType() を使います。
このメソッドは、mime-type とオプションのコーデックで構成された文字列引数を受け取り、いずれかの値を返します。

関連記事
サポートされている形式を確認する
複数の形式で動画を生成する
使用されている形式を確認する

動画 動画を追加する

ユーザーの多くは動画を好む傾向にあります。
ユーザーにとって動画は、面白かったり判りやすかったりするからです。
携帯端末の場合、テキストや画像コンテンツより、動画コンテンツの方が情報を理解しやすい場合もあります。
一方で動画は帯域幅が必要な為、すべてのプラットフォームで常に同様に視聴できません。
ローディング時間が長く待たされたり、再生をタッチしても何も起きない場合があります。
その様な場合、ユーザーエクスペリエンスは最悪です。
動画をサイトに追加して、どのデバイスでも最高のユーザー エクスペリエンスを実現する方法が必要になります。
詳細は以下の各ページを参考にしてください。

• 動画要素を追加する
• 複数のファイル形式を指定する
• 開始時刻と終了時刻を指定する
• ポスター画像を含める

関連記事

• 動画を追加する
• レガシー プラットフォーム用の代替手段を提供する
• 動画プレーヤーをカスタマイズする
• 動画のサイズを正しく設定する
• 利用しやすさに関する問題
• クイック リファレンス