動画フォーマットとテクノロジー
HTML5の互換性
この文書はできる限り最新の状態を保つように努めていますが、タブレット/モバイルデバイスのブランド/モデル、オペレーティングシステムのバージョン、Webブラウザの種類/バージョン等、膨大な量の選択肢から想定される組み合わせとそこから生じる事態を全て網羅することは非常に困難です。
このドキュメントに全く誤りがない事、考えられる全ての可能性を網羅している事は保証されない、という事をご了解ください。
また、未だに検出されていない問題が存在する可能性もあります。
HTML5ビデオ
必要条件
・HTML5およびH.264/WebM動画をサポートするWebブラウザ。
※旧バージョンのMobile OperaおよびMobile FireFox、ならびにOpera DesktopはWebMビデオフォーマットのみをサポートしているため、H.264フォーマットで動画を再生することはできません。
・H.264/WebMビデオをサポートするPC/スマートフォン/タブレット。
詳細については、以下の互換性チャートを確認してください。
注: INTER-STREAMはデフォルトでH.264のみの動画で機能します。
WebMビデオフォーマットも使用したい場合は、設定ファイル(config/Config.inc.php)を通してWebMサポートを有効にする必要があります。
また、各画質/動画に対応するWebMファイルをアップロードする必要があります。
一般的な問題
HTML5は現在なお進化し続けている規格であり、また全てのWebブラウザで同じように実装されているわけではない為、HTML5動画を表示するときに問題が発生するWebブラウザもあります。
自動再生
大半のデスクトップブラウザでは自動再生がデフォルトで有効になっています。しかし自動再生を可能にするために必要な条件については以前よりも厳しくなっています。
Chromeはバージョン66以降、動画がミュートされているか或いは訪問者が以前にWebサイトと交流をおこなっていた場合にのみ自動再生を許可する仕様に変更となりました。また、Firefox 62もChrome 66と同様の自動再生ポリシーを実装する予定です。バージョン11以降のSafariでは、自動再生を許可するにはミュートビデオも必要となっています。
一方、殆どのモバイルブラウザでは自動再生はデフォルトで無効になっています。その為、動画の再生を開始するには何度もタッチやクリックが必要になります。最近のモバイルブラウザでは、ミュート状態で再生が開始された場合はそのまま自動再生が許可されています。
INTER-STREAMでは広範囲のブラウザで自動再生を可能にするためにデフォルトで音声をミュートすることが可能です。
ブラウザ上での自動再生ポリシーに関する詳細情報
- Chromeバージョン66:自動再生ポリシーの変更
- Safariバージョン11:MacOSのための自動再生ポリシーの変更
- Safariバージョン10(iOS版):iOSの新しい<video>ポリシー
- Firefoxバージョン62:動画の自動再生について
- モバイルデバイス:HTML5 video autoplay on mobile revisited
全画面表示
フルスクリーン機能はWebブラウザによって異なります。Webブラウザがフルスクリーンモードをサポートしていない場合、INTER-STREAMビデオプレーヤーはブラウザウィンドウいっぱいに表示されます。
ビデオプレーヤーを別のWebサイトに埋め込む場合(Iframeコードを使用)、iPhone/iPadやネイティブAndroid Webブラウザ(バージョン5より前)のような「全画面モード」をサポートしていないデバイス/ブラウザではフルスクリーンは機能しません。
歪み
Dolphin HDとネイティブAndroidブラウザ(バージョン4.1 Jelly Beanより前)では、画面のサイズと向きによっては動画が歪む場合があります。
iOS:iPhone/iPod Touchの制限
一般
iOS 9.x以降を搭載したiPhoneデバイスは、動画の再生に統合されたビデオプレーヤーを使用します。再生ボタンを押すと動画はINTER-STREAMの「外側」で再生されます(フルスクリーン)。
その為、動画のインタラクティビティやPlayerLogo機能拡張など、INTER-STREAMビデオプレーヤー側の独自の機能は作動しません。
デモ動画をデバイスからご覧になって、実際の動作確認をおこなう事をお勧めします。
自動再生
iOS 10以降では、デフォルトで音声をミュートする事により自動再生をおこないます。
iOS 9.x以前では、自動再生はiPhoneおよびiPod Touchでは機能しません。その為、チャンネルプレイリストの再生では、次の動画へ移動する度に再生が中断されます。再生を続けるには、もう一度[Play]ボタンをクリック/タップする必要があります。
また、動画/チャンネルを選択する際にも、再生を開始するのに[Play]ボタンをクリック/タップする必要があります。
埋め込み
上述の「全画面表示」の文書を参照してください。
Android 4.4x KitKat:動画再生中の問題
"Android 4.4 KitKat"(4.4x)には動画が途切れて再生される問題が報告されています。もしAndroid 4.4xを実行するデバイスを持っている場合、動画がスムーズに再生されない可能性が非常に高いです。
また、これまでにインターネット上でHLSの再生に関する問題についてもいくつかの報告があります。 これらの問題が発生している場合は留意してください。
Xiaomi社製AndroidにおけるネイティブのMIUIブラウザ問題
Xiaomi社製Androidにおいて、ネイティブインターフェイス(MIUIブラウザ)はINTER-STREAMの動画プレーヤーのほとんどの機能を無効にします。
HTML5規格によると、Webブラウザでネイティブの動画再生インタフェースを表示するためには<video>要素に"controls"属性を追加する必要があります。つまり"controls"属性が指定されていない場合、ブラウザはそのネイティブインタフェースを表示しません。
Xiaomi社のネイティブWebブラウザは"controls"属性の有無にかかわらずそのインタフェースをオーバーレイで表示します。これはINTER-STREAMの動画プレーヤーが提供するほとんどすべての機能が失われることを意味しています。
互換性チェック
お使いのデバイス/ブラウザがHTML5動画をサポートしているかどうかを確認するには、(お使いのデバイス/ブラウザから)以下のサイトにアクセスし、[Video]セクションの結果を確認してください。
HTML5test
互換性チャート
注:表はあくまで参照用としてご確認ください。これは一部のデバイスでテストをしたに過ぎず、部分的なものであり排他的なものではありません。
また、情報に誤りがないことを保証するものではありません。
プラットフォーム | ブラウザ | 結果 | 備考 |
---|---|---|---|
Android | ネイティブブラウザ (Chromeベース) バージョン:6.x〜7.x |
OK | これまでのところ問題は報告されていません。 |
ネイティブブラウザ バージョン:5.x |
OK | これまでのところ問題は報告されていません。 | |
ネイティブブラウザ バージョン:4.1〜4.4 |
OK ※ | ※フルスクリーンモードはサポートされていません。 | |
ネイティブブラウザ バージョン:2.2〜4.0x |
OK ※ | ※ビデオストレッチ(歪み)の問題があります。また フルスクリーンモードはサポートされていません。 注:Androidデバイスの中にはH.264/HTML 5ビデオをサポートしていない場合がありますが、最近の殆どのデバイスではサポート済です。 |
|
Chrome | OK | これまでのところ問題は報告されていません。 | |
Dolphin HD | OK ※ | ※ビデオストレッチ(歪み)の問題があります。また フルスクリーンモードはサポートされていません。 Jetpackを使用している場合、フルスクリーンボタンは機能しません。 |
|
Firefox | OK ※ | ※バージョン17以降からH.264をサポートしています。それ以前のバージョンではWebMが必要です。 | |
Opera | OK ※ | ※バージョン15以降からH.264をサポートしています。それ以前のバージョンではWebMが必要です。 最初の再生時には、ブラウザはネイティブデバイスのビデオプレーヤーで動画再生します。 フルスクリーンボタンは、一部のバージョンでは機能しません。 |
|
Android (Xiaomi社製) |
ネイティブMIUIブラウザ | 非推奨 | ブラウザは常にINTER-STREAM動画プレーヤーのインターフェースをオーバーレイにする為、ほとんどの機能を無効にします。 |
iOS(iPad) | ネイティブブラウザ (Mobile Safari) |
OK ※ | ※フルスクリーンモードがサポートされていないため、Webブラウザの最大可能領域を埋めるように動画プレーヤーのサイズを変更することによってシミュレートされます。 |
iOS(iPhone) | ネイティブブラウザ (Mobile Safari) iOSバージョン10以降 |
OK ※ | ※動画プレーヤーインターフェースを表示するために、<video>要素の"playsinline"オプションが使用されています。 フルスクリーンモードがサポートされていないため、Webブラウザの最大可能領域を埋めるように動画プレーヤーのサイズを変更することによってシミュレートされます。 |
ネイティブブラウザ (Mobile Safari) iOSバージョン9.xより前 |
OK ※ | ※動画はネイティブデバイスの動画プレーヤーでフルスクリーンで再生されるため、INTER-STREAM動画プレーヤーのインターフェイスは表示されません。 | |
Windows | IE9以降/Edge | OK ※ | ※フルスクリーンモードはサポートされていません。 注:Internet Explorer 9より前のバージョンではHTML5ビデオをサポートしていません。 |
Windows/Mac | Chrome15以降 | OK | これまでのところ問題は報告されていません。 |
Firefox | OK ※ | ※バージョン21以降からH.264をサポートしています。それ以前のバージョンではWebMが必要です。 | |
Opera | OK?※ | ※WebMのみ対応。 | |
Safari5以降 | OK | これまでのところ問題は報告されていません。 | |
Windows Phone (スマートフォン) |
IE Mobile10以降 (Edge) |
OK | これまでのところ問題は報告されていません。 |
IE Mobile9以降 | OK ※ | ※動画はネイティブデバイスの動画プレーヤーで再生されるため、INTER-STREAM動画プレーヤーのインターフェイスは表示されません。 | |
BlackBerry | BlackBerryブラウザ | ? | ※未検証。 BlackBerryのオンラインドキュメントによると、HTML5動画の再生は以下の通りサポートされています。 BlackBerry Phone:OS4.2.2以降及びBlackBerryブラウザ7.0以降 タブレット:OS1.0以降及びBlackBerryブラウザ1.0以降 |