videoタグのinline再生の可否判定

iOS上でのvideoタグによるinline再生を行いたいのですが、アプリ内ブラウザなどではinline再生ができない場合があります。そこで、inline再生できなかったとき(フルスクリーンで再生されたとき)にアラートを表示するようにしたいです。

inlineなのかフルスクリーンなのかを判別することができるのか、できるならばその方法を教えていただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

iOS10以降、iPhoneでもvideo要素にplaysinline属性を付加していれば、inline再生となりましたが、
逆に言えば、同属性を付加していても、iPhoneかつ、iOSのバージョンが9以前であれば、必ずフルスクリーン？での再生となるので、userAgentから判定してみてはどうでしょうか？

実機で確認してないので、コードは参考程度としてください。

html
1<video src="..." playsinline>

javascript
1(function ($) {
2  var userAgent = navigator.userAgent;
3  var isIphone = !!userAgent.match(/iphone/i);
4  var ios_version = isIphone ? userAgent.match(/iphone os (\d+)/i)[1] : 0;
5
6  $(function () {
7    $('video')
8      .on('click', function () {
9      if (this.paused) {
10        this.play();
11      }
12      else {
13        this.pause();
14      }
15    })
16      .one('play', function () {
17      if (isIphone && ios_version <= 9) {
18        alert('フルスクリーンで表示されます');
19      }
20    });
21  });
22})(jQuery);