HTML5を使えばビデオやオーディオ、画面描画などの機能をブラウザ内で使うことができます。そのためか、FlashやJavaがどんどん使われなくなってきています。
ここではHTML5再生時の不具合と対処法や、おすすめブラウザなどの情報についてまとめていきます。
HTML5動画とは?
HTML5とはウェブを表示する技術のフォーマットを指します。動画についてもHTML5によって再生することにしました。
ただしブラウザによっては、細かい動画や音声フォーマットへの対応が異なるので注意が必要です。
HTML5動画再生で不具合の場合は?
HTML5はユーチューブやVineなどがサポートしています。
動画再生で不具合があるときは以下お試しください。
セーフモードで試してみる(ハードウェアアクセラレーション・アドイン)
ブラウザにはセーフモードがあり、これは余計な機能をオフにして起動するというものです。
エッジならプロンプトから
cmd /c "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" -disable-extensions
で起動します。
クロームならプロンプトから
cmd /c "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -disable-extensions
で起動します。
セーフモードでは
・ハードウェアアクセラレーションはオフ
・すべてのアドオン、プラグインなどが無効
となります。
セーフモードで起動してビデオが再生できた場合、ハードウェアアクセラレーションあるいはアドオンやプラグインに何らかの問題があることがわかります。
ハードウェアアクセラレーションをオン、またはオフにきりかえて動作をチェック。
エッジの場合、「設定>システムとパフォーマンス」から「使用可能な場合はハードウェアアクセラレータを使用する」をオン、またはオフにします。
また不要なアドインは一度オフにしてから動作を確認してみましょう。
ブラウザを修復、リセットする
一時的なバグで再生できない場合、ブラウザを修復したりリセットすると治るかもしれません。
エッジの修復は、「設定>アプリ>Edge」で「変更」を選ぶと修復画面が出てきます。
また「設定>設定のリセット」から「設定を復元して規定値に戻します」を実行します。
ブラウザを変えてみる(アップデート、キャッシュ削除)
まずはお使いのブラウザが最新版になるようアップデートしておきましょう。
動画ファイルの余計なキャッシュがなくなるように、履歴・キャッシュ・クッキーをクリアしておきましょう。
ブラウザは、動画コーデック対応状況などが違います。クロームやファイアフォックス、IEなどいくつかのブラウザで動画サイトが見れるかどうか確認してみましょう。
SMPlayerを試す
ユーチューブ動画もプレイできるウィンドウズ用ソフトがあります。それを使って再生可能かどうかチェックしてみましょう。
SMPlayerを以下よりダウンロードできます。
SMPlayerのダウンロード : Vector ソフトを探す!
インストール後、「開く」>「URL」を選び、ユーチューブのURL(例えばhttps://www.youtube.com/watch?v=bqHIbTNYRW8)のように入力します。
するとこのプレイヤーでユーチューブ動画が見れます。
コーデックエンジンを内蔵しているため、場合によってはこちらの方がスムーズに再生できるかもしれません。
設定を変更する:インターネットエクスプローラ編
ブラウザとしてIEを利用している場合の対処です
設定からインターネットオプションを開きます。
「詳細設定」で「GPUレンダリングでなく、ソフトウェアレンダリングを使用する」をチェックします。
また、下のほうに「HTML5メディア要素の代替コーデックを有効にする」があり、こちらもオンもしくはオフにして影響が出ないか確認してみましょう。
設定を変更する:ファイアフォックス編
ファイアフォックスを利用している場合の対処です。
ファイアフォックスで「about:config」とアドレスバーに入れ、開発者用メニューを出します。
「media.webm.intel_decoder.enabled」という項目を見つけ「true」に設定すると、動画再生の不具合が解消される場合があります。
参考:https://support.mozilla.org/ja/questions/1060237
HTML5の性能を調べる
HTML5の細かい性能は、ウェブブラウザによって結構違います。
チェックサイトとしては以下があります。興味ある方は、自分のブラウザのサポート状況を確認してみるとよいでしょう。
ディテクトマイブラウザー
アクセスすると、HTML5機能でどのファイルフォーマットに対応しているかを判定してくれます。
以下サイトで利用できます。
HTML5テスト
こちらも細かくHTML5機能の対応度を教えてくれます。
主なところでは
subtitle:字幕
Audio track selection:オーディオトラックの選択
Video track selection:ビデオトラックの選択
DRM support:DRMへ対応。
...などを確認できます。
以下サイトで利用できます。
ブラウザ別の音声対応状況は?
HTML5TESTではいろんなサウンド周りをチェックしてくれます。
30/30 クローム
グーグルクロームは30点中30で満点でした。
30/30 オペラ
速度に定評のあるオペラブラウザ。30点中30で満点でした。
30/30 ヴィヴァルディ
ブラウザの新興勢力ヴィヴァルディは、30点中30と表示されますが、AAC、MP3サポートはXとなっています。
25/30 ファイアフォックス
モジラのファイアフォックスは30点中25点でした。ただしマイナス点はスピーチ合成などに未対応ということで、音楽再生には影響ないでしょう。
25/30 エッジ
ウィンドウズ10より標準搭載のマイクロソフトの新ブラウザは30点中25点でした。PCMやOGG,WEBMなどのコーデックに未対応です。
20/30 インターネットエクスプローラ
マイクロソフトの従来よく使われていたブラウザは30点中20点でした。PCMやOGG,WEBMなどのコーデックに未対応です。またウェブAPIにも対応していません。
ブラウザ別の動画対応状況は?
クローム
全部に対応してます。
オペラ
いまいちマイナーなオペラですが、動画対応はばっちしです。
ファイアフォックス
あと一つ対応するといい感じです。
エッジ
ウィンドウズ10対応のマイクロソフトの新ブラウザ。2つ未対応です。
インターネットエクスプローラ
従来のマイクロソフトのブラウザ。こちらもエッジと同じく2つ未対応です。
Vivaldi
新しいウェブブラウザのヴィヴァルティ。こちらも2つ未対応です。
ルナスケープ
国産ブラウザ。2つ未対応。
スレプニエール
国産ブラウザ。こちらも2つ未対応。
上記の結果、いずれも32ビットウィンドウズ機で、ウィンドウズ10上で8月22日時点のブラウザを使用。バージョン変化やOSが違う場合にまた別の結果になる可能性があります。あくまで参照程度でご利用ください。