iPhone に搭載されている Safari 上でのインライン動画再生


iPhone に搭載されている Safari上でのインライン動画再生について調べる機会があったので、まとめました。

~iOS9

iOS9などiOS10より前のiOSに搭載されたSafarではインライン動画再生は許可されておりません。必ずフルスクリーンでの再生となります。(iPadではインライン動画再生可能です。)
iPhoneでインライン再生を行うにはWebViewアプリを作成し、インライン動画再生オプションを有効にする必要があります。

具体的には WebView (UIWebView) にはallowsInlineMediaPlayback と呼ばれるオプションが用意されており、このオプションを有効にし、かつHTMLコンテンツの動画に webkit-playsinline プロパティを追記することで、インライン動画再生が可能となります。


※ allowsInlineMediaPlayback は iOS 4 (2010年6月にリリース) にて追加されました。

アプリ側 (Swift) の記述例
class ViewController: UIViewController {
    @IBOutlet weak var webview: UIWebView!
    var url:String = "http://labs.irohasoft.com/inline"
    
    // loadURL関数を定義
    func loadURL() {
        let requestURL = NSURL(string: url)
        let request = NSURLRequest(URL: requestURL!)
        
        webview.allowsInlineMediaPlayback = true
        webview.loadRequest(request)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        loadURL()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}
HTML側の記述例
<video controls autoplay src="sample.mp4" webkit-playsinline></video>

iOS10以降

iOS10では(2016年8月現在まだリリースされていませんが) Safariにインライン動画再生機能が使用できるようになるため、アプリは必要なくなります。
ただし、HTMLコンテンツ側に playsinlineプロパティの追加を行う必要があります。

<video controls autoplay src="sample.mp4" playsinline></video>

実際に iOS10 Simulator上で、上記のコードのHTMLファイルを作成し、インライン動画再生されること確認致しました。

追記
2016.9.14 iOS10がリリースされたため、実機でテストしたところ、「webkit-playsinline」プロパティではなく、「playsinline」プロパティによってインライン動画再生されることが確認できました。

参考
Apple : Guides and Sample Code : Safari 10.0
https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
iOS10はiPhoneのSafariで動画のインライン再生をサポート
http://news.livedoor.com/article/detail/11647560/

サンプル
http://labs.irohasoft.com/inline/

関連記事:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください