16
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?