- Webサイトの埋め込み動画が自動再生されない・ループ再生されない
- Webサイトに埋め込み動画を入れてみたいけど、やり方が分からない
- LPの埋め込み動画を自動再生させてCVRを上げたい
「Webサイトに埋め込み動画を取り入れたけど、自動再生されないし、リピート再生されないから画像と変わらない！」と悩んでいませんか？アクセス流入の中心がSEOで、コンテンツがテキスト重視だとしても、動画というコンテンツは必要になってきます。動画を使いたいという時に、使えるようにはしておきたいものです。
実は、簡単にあなたの望むように、動画が再生される方法を知ってます。私もつまずいたんですけど、知ってからは「そんなことか」と思うくらい簡単な方法です。それは記述を書き換えるということ。
実際にWordPressで、どの記述なら自動再生されるされない、リピート再生されるされないを試しました。なのでWordPressでの正解は出ています。またこの記事で教える記述のやり方を知れば、他プラットフォーム、違う環境で同じ現象が起きても、自動再生・ループ再生ができるヒントとになるはずです。
この記事では、Webサイトの埋め込み動画の自動再生・ループ再生の設定と、いま設定の設定では動作しなかった時の解決方法を教えます。
videoタグの属性設定
下記はスタートと表示されてる2秒と、ゴールと表示されてる2秒の、計4秒の動画を自動再生させ、ループ再生させています。設定している再生がされているはずです。もしされてないブラウザや環境があったらコメントで教えてください。
成功したvideoタグの属性設定
記述の順番が、video、動画ファイルのURL、属性、これで自動再生とループ再生がされました。これが基本の形です。
<video src="https://example.com.mp4" loop autoplay></video>自動再生だけしたvideoタグの属性設定
記述の順番が、video、width、height、動画ファイルのURL、属性、これでは自動再生はされましたが、ループ再生がされませんでした。これは自動再生はされるので、ループ再生されてないことを見落としてしまった注意が必要な例です。埋め込み動画を導入する際には、自動再生だけでなく、ループ再生も確認しましょう。
<video width="100%" height="" src="https://example.com.mp4" loop autoplay></video>再生されないvideoタグの属性設定
動画ファイルのURLの前に属性を記述した例です。これは自動再生されなかったのですぐ失敗と分かります。
<video loop autoplay src="https://example.com.mp4"></video>videoタグが動作しない時の解決方法
私が失敗したvideoタグの記述をした原因は、コピペで使用していたためです。そしてその時は、解決方法を知らなく、ググっても「コピペすればそのまま使えます。」とだけのブログが多く、コピペに泳がされました。そこで私がお伝えするのは、プラットフォームや環境で、埋め込み動画の自動再生・ループ再生がうまく動作しない場合、記述の順番、記述の方法を替えましょうということ。
前の項目videoタグの属性設定で、解説したvideoタグの属性設定の成功例と失敗例を比べてみて、その順番によって動作の影響があったのが分かると思います。なので、うまく動作しなかった場合は、videoタグの中の記述の順番を替えてみてください。それでもダメだった場合は
<video loop autoplay>
<source src="https://example.com.mp4" type="video/mp4">
</video>videoタグとsourceタグで分けて試してみてください。つまりうまく埋め込み動画が動作しなくても記述の書き換えで対応できますということです。
videoタグ属性一覧
videoタグの属性には、自動再生、ループ再生以外にも設定ができます。それぞれの用途に合わせて、組み合わせて使うことで、Webサイト、LP内で埋め込み動画を活用できるのが、videoタグの属性です。| 属性 | 詳細 | |
|---|---|---|
| loop | 動画を繰り返し再生 | |
| autoplay | ページ読み込み時に動画を自動再生 | |
| muted | 動画の再生音をミュート状態にする | |
| playsinline | 別ウィンドウで再生しない | |
| webkit-playsinline | playsinlineとほぼ同じ webkitブラウザ (Chrome、Safariなど) にのみ対応 |
|
| poster | 動画のサムネイル画像を設定 | |
| controls | 動画プレーヤーコントロールパネルの表示設定 | |
| preload | 動画の事前読み込み方法を指定 | |
| track | 字幕や音声トラックを追加 |
videoタグのまとめ
- 自動再生とループ再生ができる成功した記述の順番は、video、動画ファイルのURL、属性で、これ以外の順番では、自動再生だけされたり、そもそも再生されなかった
- ググっても「コピペすればそのまま使えます。」という言葉に泳がされて、videoタグの記述を替えるという発想がなかったけど、記述の順番、記述の方法を替えて対応できる
- この記事で紹介しているvideoタグの記述の順番で、うまく動作しなかった場合は、この記事で紹介している以外のvideoタグの記述を順番を試してみて
コメント