[webview_flutter] Is there an option to choose allowsInlineMediaPlayback on ios? #42099
Description
Use case
I want to play the youtube video inline on ios with the webview_flutter.
Unable to implement this on iPhone, and the version is 12.4.2.
Demo code
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
WebViewController _webViewController;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width*9/16,
child: WebView(
initialUrl: Uri.dataFromString(
'''
<!DOCTYPE html>
<html>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: #000000;
overflow: hidden;
position: fixed;
}
</style>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
<script type="text/javascript">
var player;
var timerId;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
host: 'https://www.youtube.com',
playerVars: {
'controls': 0,
'autoplay': 0,
'playsinline': 1,
'enablejsapi': 1,
'fs': 0,
'rel': 0,
'showinfo': 0,
'iv_load_policy': 3,
'modestbranding': 1,
'cc_load_policy': 0,
},
});
}
function play() {
player.playVideo();
return '';
}
function pause() {
player.pauseVideo();
return '';
}
function loadById(id, startAt) {
player.loadVideoById(id, startAt);
return '';
}
function cueById(id, startAt) {
player.cueVideoById(id, startAt);
return '';
}
function seekTo(position, seekAhead) {
player.seekTo(position, seekAhead);
return '';
}
</script>
</body>
</html>
'''
, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString(),
javascriptMode: JavascriptMode.unrestricted,
initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
onWebViewCreated: (WebViewController webViewController) {
_webViewController = webViewController;
},
onPageFinished: (_) {
_webViewController.evaluateJavascript('cueById("l8dj0yPBvgQ",0)');
},
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
FlatButton(
onPressed: (){
_webViewController.evaluateJavascript('play()');
},
child: Text('Play'),
),
FlatButton(
onPressed: (){
_webViewController.evaluateJavascript('pause()');
},
child: Text('Pause'),
),
],
),
],
),
);
}
}