videoタグの「WEBM」動画が、再生できないときの解決方法は?

WEBデザイン

「webm」をvideo タグで埋め込んだのに、動画が再生できないんです!って疑問を、解決していきます。

video タグをつかって「mp4」を、ブログに埋め込むと、iPhone や Mac で再生できるのに、「webm」だと再生できなくなるんですよね。その原因は、2020 年になっても Safari のサポートが対応していないことが原因でした。

実はわたしも、「webm」動画を埋め込んでみたのですが、この問題にハマってしばらく悩んでしまいました。解決方法をみつけたので、サクッとシェアさせていただきます。

この記事でわかること
  • videoタグの「WEBM」動画が、再生できないときの解決方法や原因
  • videoタグの「WEBM」動画が、再生できなかったときの状況
  • 「mp4・webm VP8・webm VP9」の動画埋め込みの再生テスト
  • 2020年6月現在、動画の埋め込みファイルは何が最適化?

というわけで今回は、videoタグの「WEBM」動画が、再生できないときの解決方法について解説していきます。

videoタグで埋め込んだ「WEBM」動画が、再生できないときは?

videoタグで埋め込んだ「WEBM」動画が、再生できないときの解決方法を解説していきます。

  • 解決方法
  • 原因
  • 状況
  • 検証
  • 今後の対策

以上のポイントをふまえて、ブラウザで再生できなかった「WEBM」形式の動画を再生する方法をまとめました。実際に webm 動画を埋め込んだときに、スマホのブラウザで動画が表示されなかった経験からお話しさせていただきます。

解決方法はむずかしくありませんので、まずは解決方法からよみこんでみてください、きっと、あなたのブログで再生できない webm 動画が再生できるようになっているはずですよ。それでは、いってみよ〜!

【解決方法】source タグを使って、ブラウザに合わせて動画を出力する

解決方法その1
<figure class="wp-block-video">

 <video controls preload="auto" width="1920" height="1080">

  <source src="動画URL.webm" type="video/webm">

  <source src="動画URL.mp4" type="video/mp4">

  Sorry, your browser doesn't support embedded videos.
 </video>

 <figcaption>動画の説明文</figcaption>
</figure>

解決方法は、source タグを使って、ブラウザに合わせて動画を出力することです。

video タグのあいだに、source タグを挟むことで複数の動画ファイルを出力することができるんですよ。動画ファイルに対応しているブラウザごとに、自動で出力してくれるから便利なんです。

デメリットとしては、複数の動画ファイルを用意する必要があることです。サーバーのファイル容量に、余裕を持った選び方をする必要がありますね。

今回の解決方法については、ブラウザ Firfox で有名な Mozilla の開発者向けのウェブサイトを参考にしました。動画メディアを、ブログに埋め込むみたいと思った時に勉強になるので、ぜひめを通してみてください。

それでは、実際に動画がブラウザごとに出力されているか、確認してみましょう。下記に mp4 と webm VP9 でエンコードした動画ファイルを、ブラウザごとに出力するコードで表示させてみました。

Chrome など webm 対応ブラウザと、Safari などの非対応ブラウザで確認できる動画の拡張子がかわっているはずですよ。

mp4・webm VP9 の出力確認の動画
サウンドオルビス
サウンドオルビス
ここから先は、videoタグの「WEBM」動画が、再生できなかった体験談をまとめていきますよ。

【原因】webm に対応していないブラウザだったから

videoタグの「WEBM」動画を再生できなかった原因は、対応していないブラウザだったからです。

今回の問題は、Google Chrome でブログのチェックをしていたため、気がつくのが遅れてしまいました。一息ついて、iPhone の Safari で記事を確認したら、「動画が再生できないぞ?」ってことに気がつくことができたんですよ。

ちなみに、webm の各ブラウザのサポート(対応状況)については、「Can I use」というサイトがわかりやすいのでご紹介しておきます。

Caniuse webm check

2020年6月13日時点だと、iOS Safari や Mac の Safari では、「VP8」でエンコードされた webm 動画ならばサポートしているとなっていました。

なるほど、勉強になります。次の見出しでは、実際にどんな感じで動画が再生できなかったのか?状況について、説明していきますね。

【状況】「WEBM」動画が、ブラウザ「Safari」で再生できなかった

Webm cannot play
画像:webm 動画に斜線がはいり、再生できない。サウンドテック・ラボ内記事

「WEBM」動画が、ブラウザ「Safari」で再生できなかった状況について、説明していきます。

上記画像のような感じで、webm 動画の再生ボタンに斜線がはいっていました。Mac の Safari でも、iPhone の Safari でも同じでした。ブラウザがサポートしていないので、当然といえば当然なんですけどね。

そしてたしかに、「SONY「MDR-CD900ST」のレビュー記事」で使用した webm 動画は、VP9 でエンコードしていました。だから、Safari で再生できなかったわけですね。クリックしても、タップしても反応がなかったので、今回解決方法にたどりつけてよかった、よかった嬉!!

【検証】mp4・webm VP8・webm VP9 が再生できるかチェック!!

動画の拡張子によって、再生できるのか?できないのか?検証していきます。

この見出しでは、「mp4・webm VP8・webm VP9」の3つの動画ファイルを掲載しています。ブラウザによって、再生できるのかチェックできるようになっています。Can I Use では、Safari でも VP8 であればサポートされていると記載があったと思うので、その確認をかねております。

ちなみにエンコードには、HandBrake を使用しました。それでは、それぞれのブラウザで再生できるかチェックしてみましょう!!

mp4 動画をチェック!!

mp4 の埋め込み動画をチェック!!
(Size: 776KB)

webm VP8 エンコード動画をチェック!!

webm エンコード VP8 の埋め込み動画をチェック!!
(Size: 823KB)

webm VP9 エンコード動画をチェック!!

webm エンコード VP9 の埋め込み動画をチェック!!
(Size: 642KB)

【今後の対策】

videoタグの「WEBM」動画が、再生できないときの対策についてまとめていきます。

いままでは、こちらのコードで動画を埋め込んでいました↓

【WEBM が再生できない場合があったコード】

<figure class="wp-block-video">
<video controls preload="auto" width="1920" height="1080" src="動画URL.webm"></video>
<figcaption>動画の説明文</figcaption>
</figure>

今後は、2つの動画ファイルを用意できる環境であれば、以下のコードで対応ブラウザにあわせて動画を出力していく予定です。

【WEBM が再生できたコード】

<figure class="wp-block-video">

 <video controls preload="auto" width="1920" height="1080">

  <source src="動画URL.webm" type="video/webm">

  <source src="動画URL.mp4" type="video/mp4">

  Sorry, your browser doesn't support embedded videos.
 </video>

 <figcaption>動画の説明文</figcaption>
</figure>

ブログに埋め込んだ動画が、再生できない問題について、この方法で対策していきますよ!!

ブログの動画なら、MP4 が現状の最適解か?

ブログの動画なら、MP4 が現状の最適解という判断もありえると思います。

なぜなら、2020年6月13日現在では、「mp4」をサポートしているブラウザの方が多いからですね。「Can I use」で、チェックしてみましょう。

Caniuse mp4 check

Mac や iPhone むけの記事もおおいメディアを運営している場合は、「mp4」で動画をブログに掲載していくほうが作業も少なく効率的です。ただ webm は今後普及していきそうな感じなので、できれば使っていきたいわけですが...

2020 年になって、そろそろ「webm」だけにしぼってもいいかな?なんてトライしてみたら、まだ時期がはやかったみたいです。といっても、Mac や iPhone に限ったユーザーの話かもしれませんが、わたしにとっては大問題。そして、同じような悩みを抱えているひとにとっても、解消したい悩みだと思います。

というわけで、もうしばらくはブログに動画メディアを埋め込むなら、「mp4」と「webm」を同時に使っていく必要がありますよって話でした!!

videoタグの「WEBM」動画が、再生できないときの解決方法まとめ

videoタグの「WEBM」動画が、再生できないときの解決方法について、解説していきました。まとめると、こんな感じです↓

この記事のまとめ
  • 解決方法:source タグを使って、ブラウザに合わせて動画を出力すること
  • 原因:webm に対応していないブラウザだったから
  • 症状:「webm」動画が、ブラウザ「Safari」で再生できなかった
  • 検証:検証中...
  • 今後の対策:可能であれば、2つの動画ファイルを出力する

「mp4」ならほぼすべてのブラウザで対応されているので、とにかく動画をブログに埋め込みたい!!という方は、「mp4」で問題なさそうです。しかし、わたしのように「webm」にトライしてみたかったけど、動画が再生されなくて困っている方は、記事でご紹介したコードで対応してみてください。

あらためて、解決方法をよんで挑戦する方は、「【解決方法】source タグを使って、ブラウザに合わせて動画を出力する」のリンクをご利用ください。記事のはじめに、移動することができますよ。

しらべてもドンピシャな回答がみつからず、いろいろ調べてしまいました。忘備録的に記事にまとめておきましたので、同じ悩みを抱える人の救いになれたら幸いです。

それでは、今回はこのへんで!?ほかにも、ブログや WordPress といった悩みを解決する記事を書いています。きになる方は、こちらの記事もあわせてごらんください。

【関連】ブログ記事まとめ | サウンドテック・ラボ

サウンドオルビス

5,900,655 views

サウンドテック・ラボ編集長兼ライター。「音楽×テクノロジー」で、あなたの「やってみたい」をお手伝いします。人生にドラマを!!

プロフィール

ピックアップ記事

カテゴリ内の記事