[HTML]videoタグのmp4がiOSで自動再生されない時に確認すること

HTML
スポンサーリンク

①videoタグの使い方が間違っていないかを確認

<video playsinline muted autoplay loop poster="poster.jpg">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
</video> 

videoタグの中は

playsinline="" muted="" autoplay="" loop=""

のような書き方もあるみたいですが、

playsinline muted autoplay loop

と記述します。

②WordPressブログの場合、.htaccessの記述を確認

WP Fastest Cacheのようなキャッシュプラグインを使い、
よくわからないまま設定をONにしていると、
サーバーの.htaccessの記述が上書きされます。

WP Fastest Cacheを外しても良いですが、
.htaccessファイルの以下の記述を除去することで、
正常に再生される場合があります。

<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>

コメント

タイトルとURLをコピーしました