みなさん、こんにちは。
MEGIDO(メギド)です。

WEBサイト制作で動画を表示させるとなった場合、iframeタグを
使用してYouTubeなどの動画サイトから読み込むパターンが多いです。

しかしながら直近の制作案件でサーバーにアップロードした動画ファイルを
videoタグを使って表示させる機会がありました。

その中で「、、、なんでや!スマホやchromeで動画が自動再生されん」となり
解決する為にけっこう調べたのはいい思い出。。。(笑)

今回は意外にすんなりと上手くいかず、WEB制作初心者の方が
調べそうな「videoタグの動画をスマホで自動再生させる方法」
備忘録も兼ねてお伝えしようと思います。

 

Videoタグの基本的な使い方

ほとんどの方がご存知だと思いますが、基本の復習としてvideoタグの
基本的な使い方をおさらいしておきましょう。

<video src=“video/video.mp4”></video>

videoタグでの動画の表示方法はシンプルで上記のように書くだけ。

imgタグで画像を表示するのと同じようにsrc属性に表示させたい
動画のパスを書けば動画が表示されます。

imgタグの要領でコーディングすれば簡単に動画が表示されますが、
これだけではスマホで自動再生されないのです。。。

 

スマホで自動再生させる方法

それではvideoタグで読み込んだ動画をスマホで自動再生させる方法をお伝えしていきます。

videoタグで読み込んだ動画をスマホで自動再生させるには、
・動画に自動再生させる設定を加える
・自動再生の設定をスマホでも適用させる

この2つを満たす必要があります。
どちらもvideoタグに属性を追加させるだけで簡単に設定が可能です。

まず「動画に自動再生させる設定を加える」方法からご紹介します。

<video src=“video/video.mp4” autoplay></video>

上記のようにautoplay属性を付け加えると
webページを読み込んだ時点で動画が自動再生されます。

しかしこれだけでは「自動再生の設定をスマホでも適用させる」ことは出来ません。

「自動再生の設定をスマホでも適用させる」にはautoplay属性に加えて下記の属性が必要です。

<video src=“video/video.mp4” autoplay muted></video>

muted属性という属性が必要になります。
muted属性は動画の音量の初期設定をミュートにする属性です。

iPhoneやMacのpcでよく使用されるブラウザであるsafariと
androidやpcでよく使用されるブラウザであるchromeは、
音声が流れない条件の元でautoplay属性が有効になる仕様です。

その為にスマホで自動再生を適用させる為にはmuted属性が必須になります。

基本的には上記の2つの属性を付け加えれば
videoタグで読み込んだ動画をスマホで自動再生させれます。

しかし上記だけでは自動再生されなかった場合は、
playsinline属性を加えてみてください。

playsinline属性は動画を「インライン再生」させることが可能になる
WEB制作初心者には中々馴染みがない属性です。

iOSのバージョンによってはvideoタグを使う時にplaysinline属性が
ないと表示されなかったり動画が自動再生されない事象が発生するので、
そういった際はこのplaysinline属性を追加してみてください。

 

まとめ

今回は「videoタグの動画をスマホで自動再生させる方法」をご紹介しました。

videoタグには今回、紹介した属性以外にも属性を設定することが可能です。
そう使用する機会はないかもしれませんが、興味がある方は調べみてください!

それでは今回はここまで。
最後までお読みいただきありがとうございました。

まとめ

SHARE

アバター
TEXT BY MEGIDO

CATEGORIES

RECOMMENDED POSTこの記事もおすすめ!