[iOS] YoutubeとVimeoに展開されている動画を再生する方法

#iOS

#iPhone

田中賢治

2017.12.22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんぬづは、弊社クラスメソッド株式会社は本日で本年の業務を終了しますが、それはさておき実家のリビングに転がっていたジンジャークッキーを食べたら辛すぎて辛い田中です。

さて本題です。最近、動画配信サービスに展開されている動画をiOSで再生する方法について調べたのでまとめます。

WKWebViewで再生する方法

動画配信サービスが生成してくれるiframeをhtmlのbodyに入れて、それをWKWebViewのloadHTMLStringの引数に加えます。

使うhtmlは以下のようなものになります。bodyのdiv要素内にiframeを入力します。

<html>
	<head>
		<style type=\"text/css\">body {background-color: transparent;color: black;}</style>
		<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes\"/>
	</head>
	<body style=\"margin:0\">
		<div>
			// !!! ここに埋め込み動画のiframeを入力する
		</div>
	</body>
</html>

Youtube

ブラウザで埋め込みたい動画のページに遷移して、iframeを取得します。

先述した通り、取得したiframeをhtml内に埋め込み、変数化します。その変数をWKWebViewのloadHTMLString内に指定することでYoutubeの動画の再生が可能になります。htmlをそのまま変数化するときは中の"、\でエスケープする必要があります。

import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet weak var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let embedHTML = "<html><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes\"/></head><body><div><iframe width=\"320\" height=\"180\" src=\"https://www.youtube.com/embed/JohoCyOiT1A\" frameborder=\"0\" gesture=\"media\" allow=\"encrypted-media\" allowfullscreen></iframe></div></body></html>"
        let url = URL(string: "https://")
        webView.loadHTMLString(embedHTML, baseURL: url)
        webView.contentMode = UIViewContentMode.scaleAspectFit
    }
}

Vimeo

手順はYoutubeと同じです。ブラウザで埋め込みたい動画のページに遷移して、紙飛行機のマークの共有ボタンからiframeを取得します。

先述した通り、取得したiframeをhtml内に埋め込み、変数化します。その変数をWKWebViewのloadHTMLString内に指定することでVimeoの動画の再生が可能になります。htmlをそのまま変数化するときは中の"、\でエスケープする必要があります。

import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet weak var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let embedHTML = "<html><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes\"/></head><body><div><iframe src=\"https://player.vimeo.com/video/246720687\" width=\"320\" height=\"180\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></body></html>"
        let url = URL(string: "https://")
        webView.loadHTMLString(embedHTML, baseURL: url)
        webView.contentMode = UIViewContentMode.scaleAspectFit
    }
}

ネイティブで再生する方法

Youtubeは方法がないようです。公式から提案されている方法が今回紹介したWebViewでの再生です。helperが公式から用意されてはいるものの、結局中身はWebViewで、しかもこのご時世にWKWebViewではなくUIWebViewを使っているという...。別のAndroidエンジニアの方に調べてみてもらったところ、Androidはネイティブ再生する方法が提供されている模様です。さすがGoogle。

また、未検証ではありますがこちらのライブラリを利用すると、Youtubeのネイティブ再生ができるとのウワサも聞きました。こちらについてもまた別の機会に試してブログ化するかもしれません。

VimeoはどうやらPro以上のPlanの場合、HLS形式のファイルへのリンクが提供されるようです。