최근 YoutubePlayer를 개발하는 작업을 진행했습니다. Youtube는 영상을 직접 스트리밍하거나 다운로드할 수 있는 API를 제공하지 않지만, webView에 iframe을 삽입하는 방식의 공식 API는 제공하고 있습니다. 개발 초기에는 적절한 라이브러리 활용을 고려했으나, 업데이트 주기 등을 검토했을 때 제대로 관리되는 라이브러리를 찾기 어려웠습니다. 특히나, 공식 API의 경우 이번 기회를 통해 HTML을 webView에 직접 로드하고, bridge를 통해 web과 네이티브 간 통신하는 방식을 학습할 겸 직접 구현하기로 결정했습니다.
iframe은 HTML 브라우저에 중첩된 HTML 브라우저를 임베드 시키는 것입니다. 웹 페이지에 ‘구글 맵’이 임베딩 되어 있는 화면을 보신적이 있을까요? 아래의 그림과 같이 웹 페이지 내부에 ‘구글 맵’ 페이지를 추가로 내장시키는 것입니다. 이미지출처
*iframe으로 삽입된 google map 예시
Bridge란 웹뷰와 네이티브 앱 간의 통신 인터페이스입니다. 이를 통해 웹뷰의 JavaScript 코드가 네이티브 앱의 기능을 실행할 수 있고, 반대로 네이티브 앱에서도 웹뷰의 JavaScript를 호출할 수 있습니다.
하지만 보안 등의 이유로 무분별한 접근은 허용되지 않습니다. 대신 양측이 미리 약속한 범위와 기능에 대해서만 접근할 수 있도록 통신 규약을 설정하며, 이러한 제한된 통신 체계를 Bridge라고 합니다.
youtube_player.html 생성webView에서 실행할 HTML 코드를 번들에 삽입하기 위해, xcode에서 empty 파일을 생성한 후 파일명을 youtube_player.html로 수정합니다.
이때 아래의 코드를 삽입합니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { margin: 0; width: 100vw; height: 100vh; }
#player { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="player"></div>
<script src="<https://www.youtube.com/iframe_api>"></script>
<script>
var player;
var videoData;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: 'VIDEO_ID',
playerVars: {
'playsinline': 1,
'controls': 1,
'autoplay': 0
},
});
}
</script>
</body>
</html>
HTML에 대한 자세한 설명은 생략하며(사실 저도 잘 모릅니다..) 해당 소스 파일을 webView에서 실행하면 iframe_api가 로드되며 YouTube IFrame API가 실행됩니다. 이때, 웹뷰에 IFrame이 임배딩되며, 지정한 videoId와 playerVars(설정 값)이 적용된 영상이 로드 됩니다.
추가한 HTML 파일을 Target → Bundle Phases → Copy Bundle Resources에서 꼭 추가해주세요! 추가하지 않을 경우, HTML 파일을 찾을 수 없습니다.
YoutubeWebView.swift 파일 생성