LoginSignup
16
8

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-07-31

tl;dr;

Image uploaded from iOS.jpg

Image from iOS.png

詳細

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>

16
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
8