htmlの埋め込みでmp4動画が再生されない時の裏技・ウエブ運営者へ贈る連続画像スライダー

ヒカルです。

ウエブ運営をしていると「動画を表示させて、コンテンツの内容を魅力的に伝えたい」っていうことって結構ありますよね。

けれどいろんな課題を感じて結局このような理由で断念することもあると思います。

• htmlの埋め込みコードを改善しても結局mp4動画が再生されない
• 動画編集してる時間ある？時間かかって難しそう
• you tubeを埋め込むとサーチコンソールにリソースをブロックされてindexもできないんでしょ？
• スマホ対応の動画を埋め込むのって結局そんな簡単じゃない
• 特定のメディアプレイヤーを持つ人だけに再生される動画じゃ意味がないんじゃないの？誰でも再生される動画じゃないと

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

 

ウエブ上でmp4動画が再生できない原因と対策方法

全世界中で実にさまざまなディバイスが利用されており、動画を再生するメディアプレイヤーだってたくさんあります。

しかもchromeなどのバージョンアップの関係もあって、どんな環境で閲覧されるかは、ウエブ運営者に全て把握できるわけでもないんですよね。

むしろ把握できないことがあって自然、だと思います。

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

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

スマホで撮影した動画もこれに該当するので、ウエブサイトでもmp4のファイルで動画がアップされるケースも多いと思います。

しかしhtmlで動画を埋め込みして結局mp4が再生されないというケースが結構多発するようです。

この原因は下の２つのケースのように「メディアプレイヤーがmp4に対応していない」という場合が最も多いような気がします。

• 動画再生のプログラムが正常に動いてない、またはインストールされていないディバイスを使っている
• mp4のファイル形式がディバイスのメディアプレイヤーと互換性がない

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

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

• videoタグ
• mp4動画再生のためのアプリ

videoタグ

はじめにhtmlでmp4を再生する方法としてvideoタグを工夫しよう、と紹介される場合が多いです。

前提条件としてmp4動画のアップロードからはじめにお伝えします。

アップロードされたmp4ファイルを、htmlで表記してウエブサイト上に表示させる一般的なタグは以下のとおり。

 

このvideoタグに加え以下のタグが紹介される場合も多いです。

 

私の場合はやるだけやってみても、プレビュー画面で「mp4動画の痕跡すら見えない」というケースもありました。

動画再生のためのアプリのインストール

前述したように動画再生のためのメディアプレイヤーが動画に対応していないというのがmp4動画が再生されない最も多い原因です。

だから対応するアプリをインストールすればいい、という考え方もあります。

このアプリとして有名どころを挙げると以下の３つ。

• 5KPlayer
• VLC
• MPC-HC

理想としては後述するように「動画はBGMのごとく流れていた方が理想的では？」と思います。

理想はどんな人にも同じようにmp4動画が再生されること

ウエブ運営者がサイト上にmp4動画を埋め込みたいと考えるとき、重要なのは「どんな人にもmp4動画が再生されること」です。

自分のディバイスですら表示されない、自分が知らない閲覧者はどんなディバイスを使っているか知らない、

こんな状況で「特定のメディアプレイヤーを持つ閲覧者だけ」に動画が再生されるなんてことは、ウエブ作成者にとって意味はありません。

動画である理由は「動きによる魅力的な訴求(PR)」にあって、それはテキストでも静止画でも匹敵しなかったはずです。

 

テキストや静止画同様に、誰にでも同じようにmp4動画が再生される状態じゃないと「魅力的に見せるための動画が一気に痛い状態」になります。

だからどんな人にも同じようにmp4動画が再生されるように、私からある提案があります。

私が実践してほぼ100％再生される埋め込み動画・you tube以外の必殺テク

私は「ウエブ上でmp4動画を再生させるのって、こんなに技術的な問題があるのか…」といのが正直な実感です。

自分が再生できても、会えない閲覧者が再生できるとは限りません。

何とも不安定な状況で動画を配信するのは心許ないですものね。

 

ここでは私が試した対策方法として以下２つをご紹介します。

• 失敗例：you tubeやグーグルマイドライブにアップロードして再生させる
• 成功例：連続画像によるスライダーで動画を作成する

you tubeやgoogleフォトでアップロードした動画で再生を試みた

 

you tubeによる埋め込み

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

方法としてはyou tubeにmp4ファイルをアップロードしてから、埋め込みタグとして出力できる<iflame>タグを使う方法です。

問題が起きないような場合は、これで済ませておくのがいいと思います。

理由は最もオーソドックスで簡単だし、①autoplayタグ(自動再生)や②loopタグ(ループ再生)の設定もできるからです。

 

しかし私の場合、you tubeでアップロードした動画をウエブサイトに埋め込んだ後に必ずと言っていいほど問題が起こります。

• サーチコンソールでそのページを登録しようとすると、リソースがブロックされてインディックスできない、となる
• ページスピードへの影響<外部から動画を読み込むので、負荷がかかる>

you tubeの動画が埋め込まれているウエブサイトは珍しくもなく一般的ですが、実際のサイト運営にはこんな裏事情が起こることもあるわけなんですよね。

特に「モバイルで動画を自動再生する」場合、アンドロイドでは無理ですから、やはりmp4動画の再生って考える以上に簡単ではなかったんです。

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

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

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

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

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

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

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

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

 

スライダーで連続画像を動画化してしまうという必殺テク・youtube以外の方法として

ここからはyou tubeやグーグルドライブによる埋め込み以外で動画を再生する方法をお伝えします。

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

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

• 閲覧者のディバイスごとのメディアプレイヤーすべて(ほぼ全てとか、多くのメディアプレイヤーの意味に対応する動画が配信できない
• モバイル、特にアンドロイドで動画が再生されない
• youtubeの場合はインディックスできない場合もある
• 外部から読み込む関係上、重たくなって表示速度が遅くなる

冒頭でもお伝えした通り、ウエブ運営者がこれらの課題をサクッと数分で解決できるわけではないと思います。

私の場合は、「連続画像を用意してスライダー機能で動画のように見せる」といった方法で上の課題を切り抜けるケースが多いです。

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

ガラス製のブタが遠くの方へ歩いている動画です。

なお、連続画像とは以下の５枚の画像になります。

まるでyoutubeの埋め込みのように見えて、実はスライダーであり、「コマ撮り撮影・パラパラ画像のつなぎあわせ・連写を動画っぽくした」だけです。

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

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

なお、連続画像をスライドにして動画もどきを作成する場合は、以下の３つを死守するようにしています。

1. 撮影位置・カメラの角度を変えない
2. 画像の大きさを全て揃える(死守)
3. 連続画像に合わせてスライダーの遅延表示(表示時間)を変えて動画のように見せる

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

私の場合はスマホのスクエアで静止画を撮影して、同じ大きさで縮小するようにしてます。

 

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

しかし前述してきた通り、

videoタグを使ったmp4のhtmlの埋め込みでは、閲覧者のメディアプレイシャーに互換性があるわけでもない、

iframeタグを使ったyou tubeやグーグルドライブの読み込みの場合も表示速度に影響するなど、課題がゼロとは言えません。

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

2006年から利用されているプログラムで、videoタグを使ったmp4のhtmlの埋め込みや表示速度への影響についても、前述してきた方法よりはより良い手段になると思われます。

まとめ

htmlでmp4動画を埋め込む時に生じるトラブルやその原因、対策方法などをお伝えしてきました。

 

最後にご紹介したのはワードプレスのプラグインを使った方法ですので、限定された条件ではあると思いますが、動画による訴求で閲覧者がコールトゥアクションを起こすようであれば、やってみて正解と言えるでしょう。

 

ご質問があれば以下で登録して何でも聞いてくださいね(^-^) 上で登録して下さった方にはECサイト初心者が「まず５万円稼ぐためのノウハウをまとめた無料プレゼント」を贈呈しています(^-^)

無料のメルマガ講座&プレゼントとは何か？

ご質問があればご遠慮なくどうぞ。