htmlの埋め込みでmp4動画を再生できない場合の対策を検証しました。
動画の需要が爆発的に増え、ウエブ運営者も「動画を表示させて、コンテンツの内容を魅力的に伝えたい」と思う機会は爆発的に増えましたが、想像以上に再生がうまくいかないと実感する人もたくさんいます。
ここではhtmlでの埋め込みがうまくいかず動画が再生されない、と言った場合に同等の改善方法として「本当は教えたくない驚くような裏技」をお伝えします。
-
-
その動画ニコ動で収益化できるかも・youtubeとの二刀流で収益化する方法
続きを見る
Contents
htmlで動画を埋め込みして結局mp4が再生されない原因
mp4は汎用性の高い動画ファイル形式です。
スマホで撮影した動画もこれに該当するので、ウエブサイトでもmp4のファイルで動画がアップされるケースは爆発的に増えているわけです。
しかしhtmlで動画を埋め込みして結局mp4が再生できないというケースがはかなり多発しており、この原因としては以下４つが考えられます。
１と２の原因については「ユーザーが使用しているメディアプレイヤーがmp4に対応していない」といった根本的な原因に依存しているパターンです。
全世界中で実にさまざまなディバイスが利用されていますので、「あらゆるディバイスに対応する」というのも現実的でないのかもしれません。
しかもchromeなどブラウザが個々いつバージョンアップされるかわからない、といった問題に依存するところもあり、ウエブ運営者が原因全てを把握できるとは限りません。
つまり、ウエブ運営者ができることは限られてしまう、というのが現実です。
「むしろ把握できないことがあるのが自然」という前提で、mp4動画が再生できない原因と対策を模索してみました。
htmlの埋め込みでmp4動画を再生する方法として「よく紹介されている方法」
htmlでmp4動画を再生する方法としてよく紹介されている方法は２つ。
- videoタグ
- mp4動画再生のためのアプリ
①videoタグ
htmlを埋め込んでmp4を再生する方法として「videoタグを工夫する」と紹介される場合が多く、この行程は以下３つの行程が必要です。
mp4動画を再生する行程
- mp4ファイルのアップロード
- htmlタグをウエブ上に貼り付ける
- 動画が再生されるかを確認
1⃣ mp4ファイルのアップロード
まずはじめに以下①か②のmp4動画のアップロード作業を行うと、埋め込みに必要なmp4ファイルがウエブ上にアップロードされたことになります。
二つ目のアップロード方法としてレンタルサーバーのファイルを活用する方法があります。
2⃣ htmlタグをウエブ上に貼り付ける
アップロード後、実際ウエブ上に貼り付けて活用するhtmlタグは以下の通りです。
3⃣ 再生できるかを確認
▼ここに海についてのmp4ファイルを埋め込んでいます
②mp4動画再生のためのアプリ
mp4動画が再生されない最も多い原因として、メディアプレイヤーがmp4動画に対応していないといった点を挙げていました。
このメディアプレイヤーのアプリとして有名どころを挙げると以下の３つ。
メディアプレイヤーアプリ
- 5KPlayer
- VLC
- MPC-HC
ウエブサイトで閲覧者に向かって「動画が再生できないときはこのアプリをインストールしてください」と促す事もできるかもしれません。
しかしよほど見たいと思える動画でないと、アプリをインストールまでしてみたいと思える人は少ない、というのが現実です。
理想としては「どんな場合にも同様にmp4動画が再生され、BGMのごとく流れていることでは？」と思います。
-
-
その動画ニコ動で収益化できるかも・youtubeとの二刀流で収益化する方法
続きを見る
【裏技・youtube以外】私が実践してほぼ再生される埋め込み動画
自分のディバイスで動画が再生できたと確認できても、閲覧者はそうとは限りません。こんな不確実なな状況で動画を配信するのはかなり心許ないものです。
ここでは私が試した対策として成功した方法を２つをご紹介します。
mp4動画再生の成功事例
- 裏技①：GIFによるアニメーション
- 裏技②：連続画像によるスライダーで動画を作成する
【裏技①】GIFアニメーションで動画もどきにする
おすすめ度~
はじめにご紹介するのは、GIF画像を使って動画もどきにする方法です。
これは動画によっては出来る出来ない・向き不向きもありますので、状況に応じて使い分けていただければと思います。※かなり短い動画でないと動画っぽくはなりません
まずは実際の動画をご覧になってみてください。
これはGIFアニメと呼ばれる画像を活用して動画もどきにしています。
GIFをもっと詳しく
６枚の画像をアップロードして作成したGIFアニメは、「一枚の画像としてファイル化」されます。
ココがポイント
GIFの場合は、スライダーよりも課題が少ないです。どんなディバイスでも環境や条件に左右されず動画っぽく表示されます。
【裏技②】スライダーで連続画像を動画化する
おすすめ度~
次にお伝えするのは、スライダーで連続画像を動画化する、と言った方法です。
これも動画によっては出来る出来ない・向き不向きもありますので、状況に応じて使い分けていただければと思います。※かなり短い動画でないと動画っぽくはなりません
まずはその「連続画像を用意してスライダー機能で作成した動画もどき」をご覧いただきます。
ガラス製のブタが遠くの方へ歩いている動画で、その連続画像とは以下の６枚の画像になります。
コマ撮り撮影・パラパラ画像のつなぎあわせ・連写を動画っぽくしただけです。
上のスライダーは以下のように作成しています。
コマ送り風スライダー必須事項
- 撮影する場合：カメラの位置と角度を変えない
- 画像の大きさ：全て揃える(死守)
- スライダーの遅延表示(表示時間)を調整して動画のように見せる
２つ目に関しては特に縦幅が１pxでも不揃いだと、表示で画面が揺れて閲覧者に違和感を与えてイライラさせてしまうのでご注意ください。
スライダーの設定方法
上のコマ送り風スライダーは、ワードプレスのスライダープラグインmeta sliderを使用しており、設定条件は以下の５つです。
- 自動再生：する
- 画像の切り抜き：無効
- スライドの遅延 800ms
- 停止ボタン表示：なし
- コマ送り矢印：非表示
お伝えしたように、この動画もどきは場合によって出来る出来ない、向き不向きがあると思います。
上のスライダー機能による動画もどきは、Jqueryと呼ばれる「動きをつけるプログラム」で自前の動画を用意するといった方法です。
解決し難い根深い原因を「全く違った方法で」解消する手段になると思われます。
しかし、スライダーも課題がゼロと言うわけではなく、スマホでは特に再生されない場合が多いです。
これは表示速度の高速化対策として知られる「レンダリングをブロックするJSを除外する機能」がONになっているケースで多発しやすいように思います。
詳細は以下を参考にしてください。
スライダーが「『レンダリングをブロックするJS』を除外する機能」で見れない
【難ありパターン】you tubeやgoogleドライブでアップロードした動画で再生
youtubeやグーグルドライブによるmp4のhtml埋め込みには以下のような課題があります。
冒頭でもお伝えした通り、ウエブ運営者が諸々な課題をゼロにして解決できるわけでもありませんが、以下難ありパターンとしてyoutubeやグーグルドライブによる方法を試してみました。
①グーグルドライブによる埋め込み
おすすめ度~
youtube以外のhtmlでmp4動画を埋め込む方法として、グーグルマイドライブを活用する方法があります。※グーグルフォトではありません。
グーグルマイドライブに動画をアップロードして、youtube以外の動画でmp4を再生させる方法としてはかなり有効です。
しかし外部から動画を読み込むのは後述youtubeと同じですので、負荷がかかってページの表示が遅くなることは変わりません。
②you tubeによる埋め込み
おすすめ度~
どんな人でもどんなディバイスでも同じように動画を再生できる方法として、you tubeが想定される場合は多いと思います。
具体的な作業内容としては以下のようになります。
上の動画を自動再生させる場合は以下のようにautoplayのタグをつけます。
<iframe width="560" height="315" src="動画URL rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
ココに注意
ただしこの自動再生autoplayタグはPC限定・モバイルで表示させる場合はi phoneだったら可能・androidでは無理で、こちらのサイトでタグの詳細が説明されています。
しかし私の場合、you tubeでアップロードした動画をウエブサイトに埋め込んだ後に必ずと言っていいほど以下のような問題が起こります。
you tubeの動画が埋め込まれているウエブサイトは珍しくもなく一般的ですが、実際のサイト運営にはこんな裏事情が起こります。
特に「モバイルで動画を自動再生する」場合、アンドロイドでは無理ですから、やはりmp4動画の再生は想像以上に簡単ではないように思います。
まとめ
htmlでmp4動画を埋め込む時に生じるトラブルやその原因、対策方法などをお伝えしてきました。
ココに注意
youtubeの動画をウエブサイトの貼り付けてユーザーに再生してもらう、ということは意外と難易度が高いです。
動画の内容に合わせて訴求する→動画チャンネルへの同線を引く、などといった「コンテンツに合わせた導線設計」も必要になると思います。
以下はyoutube以外の動画として注目される収益化方法となっていますのでよかったご参考くださいね。
-
-
その動画ニコ動で収益化できるかもしれません・youtubeとの二刀流で収益化する方法
続きを見る
動画による訴求でエンゲージメントが高まるようであれば、やってみて正解と言えるでしょう。
ただし、法令違反・公序良俗に抵触するご質問には一切お応えしません。
