[Flutter 앱 개발하기] webview_flutter 에서 비디오 인라인으로 플레이하기

webview_flutter | Flutter Package

A Flutter plugin that provides a WebView widget on Android and iOS.

pub.dev

앱에서 웹뷰 구현을 위해 webview_flutter 플러그인을 사용한다. (Android, iOS 지원)

​

구현을 하다보니 웹뷰 내에서 유튜브 등의 비디오를 플레이 해야 하는데,

(ios 정책에 따라) 앱에서 플레이 누르면 전체 화면으로 따로 떠서 재생이 된다.

내가 원하는 것은 앱 내에서 임베디드 되서 플레이 되는 것인데..

​

웹 비디오라면 video 태그 안에 playsinline 속성을 이용해서 이를 구현 할 수 있다.

​

webview_flutter 플러그인은 다행히 같은 동작을 지원한다.

아래와 같이 allowsInlineMediaPlayback: true 로 설정하고 사용한다.

​

import 'package:webview_flutter/webview_flutter.dart' as wv;

...

return wv.WebView( allowsInlineMediaPlayback: true, zoomEnabled: false, javascriptMode: wv.JavascriptMode.unrestricted, initialUrl: Uri.parse('about:blank').toString(), onWebViewCreated: (wv.WebViewController webViewController) { _controller = webViewController; _loadPageFromAsset(); }, );

import 'package:webview_flutter/webview_flutter.dart' as wv;
...

return wv.WebView( 
	allowsInlineMediaPlayback: true, 
    zoomEnabled: false, 
    javascriptMode: wv.JavascriptMode.unrestricted, 
    initialUrl: Uri.parse('about:blank').toString(), 
    onWebViewCreated: (wv.WebViewController webViewController) { 
    	_controller = webViewController; 
        _loadPageFromAsset(); 
    }, 
);

​