HTMLのvideoタグを使用してWebページに動画を埋め込む際、iOSデバイスで動画が自動再生されないことがあります。
これは、iOS固有の制約や設定によるものが多く、適切な対応を行うことで解決可能です。
この記事では、iOSでmp4動画が自動再生されない場合に確認すべきポイントと対処法を2つに絞って紹介します。
①videoタグの使い方が間違っていないかを確認
1 2 3 4 |
<video playsinline muted autoplay loop poster="poster.jpg"> <source src="movie.webm" type="video/webm"> <source src="movie.mp4" type="video/mp4"> </video> |
videoタグの中は
1 |
playsinline="" muted="" autoplay="" loop="" |
のような書き方もあるみたいですが、
1 |
playsinline muted autoplay loop |
と記述します。
②WordPressブログの場合、.htaccessの記述を確認
WP Fastest Cacheのようなキャッシュプラグインを使い、よくわからないまま設定をONにしていると、サーバーの.htaccessの記述が上書きされます。WP Fastest Cacheを外しても良いですが、.htaccessファイルの以下の記述を除去することで正常に再生される場合があります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<FilesMatch "\.(webm|ogg|mp4|ico|pdf|flv|avif|jpg|jpeg|png|gif|webp|js|css|swf|x-html|css|xml|js|woff|woff2|otf|ttf|svg|eot)(\.gz)?$"> <IfModule mod_expires.c> AddType application/font-woff2 .woff2 AddType application/x-font-opentype .otf ExpiresActive On ExpiresDefault A0 ExpiresByType video/webm A10368000 ExpiresByType video/ogg A10368000 ExpiresByType video/mp4 A10368000 ExpiresByType image/avif A10368000 ExpiresByType image/webp A10368000 ExpiresByType image/gif A10368000 ExpiresByType image/png A10368000 ExpiresByType image/jpg A10368000 ExpiresByType image/jpeg A10368000 ExpiresByType image/ico A10368000 ExpiresByType image/svg+xml A10368000 ExpiresByType text/css A10368000 ExpiresByType text/javascript A10368000 ExpiresByType application/javascript A10368000 ExpiresByType application/x-javascript A10368000 ExpiresByType application/font-woff2 A10368000 ExpiresByType application/x-font-opentype A10368000 ExpiresByType application/x-font-truetype A10368000 </IfModule> <IfModule mod_headers.c> Header set Expires "max-age=A10368000, public" Header unset ETag Header set Connection keep-alive FileETag None </IfModule> </FilesMatch> |
コメント