Edited at

iOS11の「低電力モード」で、HTML5 videoのautoplayが動作しない


tl;dr;


詳細

iOS 11 (11.2以降?)から、

「低電力モード」使用時に、HTML5のvideoが自動で再生されなくなりました。

手元の環境で確認したところ、Safari, Chrome, Firefoxなど、主要なブラウザすべてでそのような挙動のようです。

いろんなApple公式のドキュメントを眺めてみたんですが、該当する情報は見つからず、

↓のstackoverflowの記事しか見つかりませんでした。

https://stackoverflow.com/questions/47655077/autoplay-muted-video-ios-11-2?rq=1


対策

autoplayさせることができないため、 ユーザー自身に再生ボタンを押して貰う必要があります

ビデオの上に他のUIが乗っていてユーザーが再生ボタンが押せない!!なんてことがないように

画面を設計しましょう。


付録

検証コード

https://jsfiddle.net/vneL2w03/

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="http://vjs.zencdn.net/7.1/video-js.min.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.1.0/video.js"></script>
</head>
<body>
<video id="test-video" class="video-js vjs-default-skin vjs-16-9" muted controls playsinline crossorigin="anonymous">
<source src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" type='application/vnd.apple.mpegurl' />
</video>
<script>
var main = function(){
player = videojs("test-video");
player.on(player, 'loadstart', function(){player.autoplay('any');});
}
main();
</script>
</body>
</html>