htmlの埋め込みでmp4動画が再生されない!ウエブ運営者へ贈る連続画像の裏技

htmlの埋め込みでmp4動画を再生できない場合の対策を検証しました。

動画の需要が爆発的に増え、ウエブ運営者も「動画を表示させて、コンテンツの内容を魅力的に伝えたい」と思う機会は爆発的に増えましたが、想像以上に再生がうまくいかないと実感する人もたくさんいます。

ここではhtmlでの埋め込みがうまくいかず動画が再生されない、と言った場合に同等の改善方法として「本当は教えたくない驚くような裏技」をお伝えします。

おすすめ
その動画ニコ動で収益化できるかも・youtubeとの二刀流で収益化する方法

続きを見る

htmlで動画を埋め込みして結局mp4が再生されない原因

mp4は汎用性の高い動画ファイル形式です。

スマホで撮影した動画もこれに該当するので、ウエブサイトでもmp4のファイルで動画がアップされるケースは爆発的に増えているわけです。

しかしhtmlで動画を埋め込みして結局mp4が再生できないというケースがはかなり多発しており、この原因としては以下4つが考えられます。

再生できない原因

  1. mp4のファイル形式がディバイスのメディアプレイヤーと互換性がない
  2. 再生プログラムが正常稼働しない
  3. ディバイスにプログラムがそもそもインストールされてない
  4. 表示速度の高速化機能が、JavaScriptファイルと干渉している

1と2の原因については「ユーザーが使用しているメディアプレイヤーがmp4に対応していない」といった根本的な原因に依存しているパターンです。

全世界中で実にさまざまなディバイスが利用されていますので、「あらゆるディバイスに対応する」というのも現実的でないのかもしれません。

しかもchromeなどブラウザが個々いつバージョンアップされるかわからない、といった問題に依存するところもあり、ウエブ運営者が原因全てを把握できるとは限りません

つまり、ウエブ運営者ができることは限られてしまう、というのが現実です。

「むしろ把握できないことがあるのが自然」という前提で、mp4動画が再生できない原因と対策を模索してみました。

htmlの埋め込みでmp4動画を再生する方法として「よく紹介されている方法」

htmlでmp4動画を再生する方法としてよく紹介されている方法は2つ。

  1. videoタグ
  2. mp4動画再生のためのアプリ

①videoタグ

htmlを埋め込んでmp4を再生する方法として「videoタグを工夫する」と紹介される場合が多く、この行程は以下3つの行程が必要です。

mp4動画を再生する行程

  • mp4ファイルのアップロード
  • htmlタグをウエブ上に貼り付ける
  • 動画が再生されるかを確認

1⃣ mp4ファイルのアップロード

まずはじめに以下①か②のmp4動画のアップロード作業を行うと、埋め込みに必要なmp4ファイルがウエブ上にアップロードされたことになります。

【①FTPソフトを活用】

①デスクトップに動画mp4ファイルを用意しておく

②FTPソフトを起動、ローカル側でmp4ファイルを探し、リモートサイト側でpublic.htmlファイルを選択

public.htmlファイルへmp4ファイルをアップロード、リモート側にmp4ファイルがアップロードされたかを確認

二つ目のアップロード方法としてレンタルサーバーのファイルを活用する方法があります。

【②サーバーを活用】

①デスクトップに動画mp4ファイルを用意しておく

②レンタルサーバーのファイルマネージャーにログイン

public,htmlファイルを選択し、動画mp4ファイルをアップロード

③mp4ファイルがアップロードされたかを確認

2⃣ htmlタグをウエブ上に貼り付ける

アップロード後、実際ウエブ上に貼り付けて活用するhtmlタグは以下の通りです。

【mp4のhtmlタグ】

<video src="ファイル名.mp4"></video>

このvideoタグに加え、以下のタグもカスタマイズとして有効活用できます。※コピペ可

  • 再生ボタンの表示<video src="ファイル名" controls></video>
  • 自動再生:<video src="ファイル名.mp4" autoplay></video>
  • ループ再生:<video src="ファイル名.mp4" ioop></video>
  • 横幅、縦幅調整:<video width="300px" height="300px" src="ファイル名.mp4"></video>

3⃣ 再生できるかを確認

 

▼ここに海についてのmp4ファイルを埋め込んでいます

シロクマ
何も見えない笑
熊谷ヒカル
私の場合は上みたいに「mp4動画の影も形も見えない」というケースが結構ありました。

②mp4動画再生のためのアプリ

mp4動画が再生されない最も多い原因として、メディアプレイヤーがmp4動画に対応していないといった点を挙げていました。

このメディアプレイヤーのアプリとして有名どころを挙げると以下の3つ。

メディアプレイヤーアプリ

  • 5KPlayer
  • VLC
  • MPC-HC

ウエブサイトで閲覧者に向かって「動画が再生できないときはこのアプリをインストールしてください」と促す事もできるかもしれません。

しかしよほど見たいと思える動画でないと、アプリをインストールまでしてみたいと思える人は少ない、というのが現実です。

理想としては「どんな場合にも同様にmp4動画が再生され、BGMのごとく流れていることでは?」と思います。

おすすめ


その動画ニコ動で収益化できるかも・youtubeとの二刀流で収益化する方法

続きを見る

【裏技・youtube以外】私が実践してほぼ再生される埋め込み動画

熊谷ヒカル
正直、ウエブ上でmp4動画を再生させるのって、こんなに技術的な問題があるのか…と思いました。

自分のディバイスで動画が再生できたと確認できても、閲覧者はそうとは限りません。こんな不確実なな状況で動画を配信するのはかなり心許ないものです。

ここでは私が試した対策として成功した方法を2つをご紹介します。

mp4動画再生の成功事例

  • 裏技①:GIFによるアニメーション
  • 裏技②:連続画像によるスライダーで動画を作成する
シロクマ
他にうまくいかなかったパターンも紹介するよ!

【裏技①】GIFアニメーションで動画もどきにする

おすすめ度~

はじめにご紹介するのは、GIF画像を使って動画もどきにする方法です。

これは動画によっては出来る出来ない・向き不向きもありますので、状況に応じて使い分けていただければと思います。※かなり短い動画でないと動画っぽくはなりません

まずは実際の動画をご覧になってみてください。

これはGIFアニメと呼ばれる画像を活用して動画もどきにしています。

【GIFで動画もどき作成】

①この作成にはGIFアニメ作成サイトを使って複数の画像をアップロードして行きます。

例として先ほどの「ガラスの豚が歩く画像6枚」をアップロードしてみました。

②次の画像が表示されるまでの間隔を選択し、保存を押します。

ココがポイント

動きが自然に見えるように、何度か試して間隔を何秒にするかを調整するのがおすすめです。

③デスクトップに画像を保存します。

④画像保管場所(ワードプレスならメディア)に画像をアップロードしてhtml上に画像を挿入すれば完了です。

GIFをもっと詳しく

6枚の画像をアップロードして作成したGIFアニメは、「一枚の画像としてファイル化」されます。

ココがポイント

GIFの場合は、スライダーよりも課題が少ないです。どんなディバイスでも環境や条件に左右されず動画っぽく表示されます。

シロクマ
GIFが一番問題が少ないように思えてくる

【裏技②】スライダーで連続画像を動画化する

おすすめ度~

次にお伝えするのは、スライダーで連続画像を動画化する、と言った方法です。

これも動画によっては出来る出来ない・向き不向きもありますので、状況に応じて使い分けていただければと思います。※かなり短い動画でないと動画っぽくはなりません

まずはその「連続画像を用意してスライダー機能で作成した動画もどき」をご覧いただきます。

ガラス製のブタが遠くの方へ歩いている動画で、その連続画像とは以下の6枚の画像になります。






コマ撮り撮影・パラパラ画像のつなぎあわせ・連写を動画っぽくしただけです。

上のスライダーは以下のように作成しています。

コマ送り風スライダー必須事項

  • 撮影する場合:カメラの位置と角度を変えない
  • 画像の大きさ:全て揃える(死守)
  • スライダーの遅延表示(表示時間)を調整して動画のように見せる

2つ目に関しては特に縦幅が1pxでも不揃いだと、表示で画面が揺れて閲覧者に違和感を与えてイライラさせてしまうのでご注意ください。

スライダーの設定方法

上のコマ送り風スライダーは、ワードプレスのスライダープラグインmeta sliderを使用しており、設定条件は以下の5つです。

  • 自動再生:する
  • 画像の切り抜き:無効
  • スライドの遅延 800ms
  • 停止ボタン表示:なし
  • コマ送り矢印:非表示

お伝えしたように、この動画もどきは場合によって出来る出来ない、向き不向きがあると思います。

上のスライダー機能による動画もどきは、Jqueryと呼ばれる「動きをつけるプログラム」で自前の動画を用意するといった方法です。

解決し難い根深い原因を「全く違った方法で」解消する手段になると思われます。

しかし、スライダーも課題がゼロと言うわけではなく、スマホでは特に再生されない場合が多いです。

これは表示速度の高速化対策として知られる「レンダリングをブロックするJSを除外する機能」がONになっているケースで多発しやすいように思います。

詳細は以下を参考にしてください。

スライダーが「『レンダリングをブロックするJS』を除外する機能」で見れない

【難ありパターン】you tubeやgoogleドライブでアップロードした動画で再生

熊谷ヒカル
私の場合スマホでyoutubeの動画は普通に再生できます。だから、「youtubeでアップロードした動画をサイトに貼り付ければ、難なく再生できるのでは?」と思ったりするのですが、そうとも限りません。

youtubeやグーグルドライブによるmp4のhtml埋め込みには以下のような課題があります。

よくある課題

  • 閲覧者のディバイスごとのメディアプレイヤーと動画に互換性がない
  • モバイル、特にアンドロイドで動画が再生されない
  • 外部から読み込む関係上、重たくなって表示速度が遅くなる

冒頭でもお伝えした通り、ウエブ運営者が諸々な課題をゼロにして解決できるわけでもありませんが、以下難ありパターンとしてyoutubeやグーグルドライブによる方法を試してみました。

①グーグルドライブによる埋め込み

おすすめ度~

youtube以外のhtmlでmp4動画を埋め込む方法として、グーグルマイドライブを活用する方法があります。※グーグルフォトではありません。

【②グーグルドライブによる埋め込み】

グーグルマイドライブにmp4動画をアップロードするには左上の「+新規」をクリックしてファイルのアップロードを行います。

アップロードしたファイルを選択、右上に表示される三つの点のマーク(その他の操作)をクリックすると、下記のように「新しいウインドウで開く」といった表示がありますのでこれを選択。

すると、また以下のように右上に三つの点(その他の操作)が現れるので、ここから「アイテムを埋め込む」をクリック。

すると、<iflame>タグが生成されますので、これをhtmlで埋め込みすればOKです。

 

グーグルマイドライブに動画をアップロードして、youtube以外の動画でmp4を再生させる方法としてはかなり有効です。

しかし外部から動画を読み込むのは後述youtubeと同じですので、負荷がかかってページの表示が遅くなることは変わりません

 

②you tubeによる埋め込み

おすすめ度~

どんな人でもどんなディバイスでも同じように動画を再生できる方法として、you tubeが想定される場合は多いと思います。

具体的な作業内容としては以下のようになります。

【youtubeによる埋め込み】

you tubeにmp4ファイルをアップロード

埋め込みタグとして表示される<iflame>タグをコピー

ウエブサイトにペーストして動画が再生されるかを確認。

上の動画を自動再生させる場合は以下のように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との二刀流で収益化する方法

続きを見る

動画による訴求でエンゲージメントが高まるようであれば、やってみて正解と言えるでしょう。

お問合せ

*は必須項目です *お名前またはニックネーム *メールアドレス (確認用) *お問合せ(文字数制限なし) Powered by FormMailer.

ただし、法令違反・公序良俗に抵触するご質問には一切お応えしません。

  • この記事を書いた人

熊谷ヒカル

2017年からインターネットビジネスを始め、いろんなジャンルの特化サイトを構築してきました。


現在はブログ初心者さん向け・同じような志を持つ人に教えながら特化サイト構築を両立しています。


2022年の実績は349万円(「2022年の累計実績」・2月15日現在)、詳細は下記よりどうぞ。