クリエイターの教科書

ChatGPT, Stable Diffusion, Visual Studio, Excelなど教科書

【Windows 10】HTML5ビデオ再生の不具合と対処

HTML5を使えばビデオやオーディオ、画面描画などの機能をブラウザ内で使うことができます。そのためか、FlashやJavaがどんどん使われなくなってきています。

ここではHTML5再生時の不具合と対処法や、おすすめブラウザなどの情報についてまとめていきます。

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レンダリングでなく、ソフトウェアレンダリングを使用する」をチェックします。 

f:id:apicode:20160922091842p:plain

 

また、下のほうに「HTML5メディア要素の代替コーデックを有効にする」があり、こちらもオンもしくはオフにして影響が出ないか確認してみましょう。

f:id:apicode:20181111115011j:plain

 

 

設定を変更する:ファイアフォックス編

ファイアフォックスを利用している場合の対処です。

ファイアフォックスで「about:config」とアドレスバーに入れ、開発者用メニューを出します。

media.webm.intel_decoder.enabled」という項目を見つけ「true」に設定すると、動画再生の不具合が解消される場合があります。

参考:https://support.mozilla.org/ja/questions/1060237

 

 

 

 

 

HTML5の性能を調べる

HTML5の細かい性能は、ウェブブラウザによって結構違います。

チェックサイトとしては以下があります。興味ある方は、自分のブラウザのサポート状況を確認してみるとよいでしょう。

ディテクトマイブラウザー

アクセスすると、HTML5機能でどのファイルフォーマットに対応しているかを判定してくれます。

f:id:apicode:20150830233128p:plain

 以下サイトで利用できます。

detectmybrowser.com

 

 

HTML5テスト

こちらも細かくHTML5機能の対応度を教えてくれます。

f:id:apicode:20150830233400p:plain

主なところでは

subtitle:字幕

Audio track selection:オーディオトラックの選択

Video track selection:ビデオトラックの選択

DRM support:DRMへ対応。

  ...などを確認できます。

 

以下サイトで利用できます。

html5test.com

 

 

 

 

ブラウザ別の音声対応状況は?

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にも対応していません。

 

 

ブラウザ別の動画対応状況は?

クローム

全部に対応してます。

f:id:apicode:20150822122224p:plain

オペラ

いまいちマイナーなオペラですが、動画対応はばっちしです。

f:id:apicode:20150822122244p:plain

 

ファイアフォックス

あと一つ対応するといい感じです。

f:id:apicode:20150822122324p:plain

 

エッジ

ウィンドウズ10対応のマイクロソフトの新ブラウザ。2つ未対応です。

f:id:apicode:20150822122400p:plain

 

インターネットエクスプローラ

従来のマイクロソフトのブラウザ。こちらもエッジと同じく2つ未対応です。

f:id:apicode:20150822122429p:plain

 

Vivaldi

新しいウェブブラウザのヴィヴァルティ。こちらも2つ未対応です。

f:id:apicode:20150822122503p:plain

 

ルナスケープ

国産ブラウザ。2つ未対応。

f:id:apicode:20150822125658p:plain

 

スレプニエール

国産ブラウザ。こちらも2つ未対応。

f:id:apicode:20150822130130p:plain

 

上記の結果、いずれも32ビットウィンドウズ機で、ウィンドウズ10上で8月22日時点のブラウザを使用。バージョン変化やOSが違う場合にまた別の結果になる可能性があります。あくまで参照程度でご利用ください。

このブログは、ネットや書籍上の情報、個人の体験や感想を中心にまとめたものです。 正確性を期していはいますが、間違い・誤訳等あるかもしれません。 当サイトの情報によって生じたいかなる損失について一切の責任を負わないものとします. あらかじめご了承ください。

プライバシーポリシー |〇利用規約 |〇問い合わせ