Blog

iOS10からiPhoneのSafariでHTML5のVideoをインラインで再生可能&無音なら自動再生も!

2016.09.20Cat:html5 video デザイナー
nino-eye

前回、iPhoneでウェブページ上でVideoをインライン再生する方法を紹介いたしましたが、
iOS10から、正式に、SafariでHTML5のVideoをインラインで再生できるようになりました。

また、無音の設定をすれば、自動再生も許可されるようになりました。

↓参考記事

モバイルブラウザのビデオ再生がいろいろ変わるので確かめてみた – Qiita

iOS10のiPhoneのmobile Safariではビデオ要素(videoタグ)をインラインで再生できるようになったし、無音のビデオなら自動で再生できるようになった模様 – みかづきブログ その3

HTML5からVideoタグが利用できるようになり、動画を使ったサイトが作りやすくなりました。

しかし、iPhoneでの操作の制限(自動再生できない、再生するときに強制的に全画面になる)の問題で、
スマホ向けサイトでは、HTML5でのVideoの利用方法が、制限されてきました。

しかし、今回のiOS10での変更でVideoのインライン再生と、無音の場合の自動再生が可能になったことで、ウェブページ上でのVideoの利用方法が広がって、動画をより自由に使ったサイトが増えそうです。

方法

DEMO

インライン再生

videoタグに「playsinline」属性をつける。

 

無音での自動再生

videoタグに「muted」属性と「autoplay」属性をつける。

 

ただ、iOS10のSafari、Android4系の標準ブラウザではこの方法が使えるのですが、
Chromeの場合、Andriod上ではインライン再生のみ可能、iOS上では、インライン再生、自動再生共に対応していないようです。

とはいえ、iOSのSafariで可能になったことから、Chrome上でも使える日は遠くはないのではないでしょうか。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ