import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:hub/utils/system_ui.dart';
class WistiaPlayerx extends StatelessWidget {
final String videoHash;
final BuildContext context;
WistiaPlayerx({Key? key, required this.videoHash, required this.context}) : super(key: key);
late final String body2 = """"
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
margin: 0;
padding: 0;
background-color: #000000;
opacity: 0
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
}
iframe, .player {
display: block;
width: 100%;
height: 100%;
border: 0px;
}
</style>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
</head>
<body>
<script src="https//fast.wistia.com/embed/medias/$videoHash.jsonp" async></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_$videoHash autoPlay=true resumable=true playerColor=null endVideoBehavior=default playbar=true player"> </div>
<script>
window._wq = window._wq || []
_wq.push({
id: $videoHash,
onReady: function(video) {
if (video.hasData()) {
sendMessageToDart('Ready');
}
video.bind("play", function() {
sendMessageToDart('Playing')
})
video.bind('pause', function() {
sendMessageToDart('Paused')
})
video.bind("end", function(endTime) {
sendMessageToDart('Ended', { endTime: endTime });
})
video.bind("percentwatchedchanged", function(percent, lastPercent) {
sendMessageToDart('PercentChanged', { percent, percent, lastPercent: lastPercent })
})
video.bind("mutechange", function (isMuted)) {
sendMessageToDart('MuteChange', { isMuted: isMuted })
}
video.bind("enterfullscreen", function() {
sendMessageToDart('EnterFullscreen')
})
video.bind("cancelfullscreen", function() {
sendMessageToDart('CancelFullscreen')
})
video.bind("beforeremove", function() {
return video.unbind
})
window.play = function play() {
return video.play();
}
window.pause = function pause() {
return video.pause();
}
window.isMuted = function isMuted() {
return video.isMuted()
}
window.inFullscreen = function inFullscreen() {
return video.inFullscreen()
}
window.hasData = function hasData() {
return video.hasData()
}
window.aspect = function aspect() {
return video.aspect()
}
window.mute = function mute() {
return video.mute()
}
window.unmute = function unmute() {
return video.unmute()
}
window.duration = function duration() {
return video.duration()
}
window.requestFullscreen = function requestFullscreen() {
return video.requestFullscreen()
}
},
});
function sendMessageToDart(methodName, argsObject = {}) {
var message = {
'method': methodName,
'args': argsObject
};
WistiaWebView.postMessage(JSON.stringify(message));
}
</script>
</body>
</html>
""";
InAppWebViewController? webViewController;
onOrientationChange(Orientation orientation){
}
@override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]);
return OrientationBuilder(builder: (context, orientation){
if(webViewController != null){
onOrientationChange(orientation);
}
debugPrint('orientation: $orientation');
return InAppWebView(
onWebViewCreated: (InAppWebViewController controller) {
webViewController = controller;
controller.loadData(
data: body2, mimeType: 'text/html', encoding: 'utf-8');
},
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
supportZoom: false,
disableVerticalScroll: true,
disableHorizontalScroll: true,
),
android: AndroidInAppWebViewOptions(
)
),
onLoadStop: (controller, index){
},
);
});
}
}
On changing device orientation video player(Wistia)/web page size gets cropped. I think the height widget not getting update. It works perfectly if the video is playing in full screen but when we rotate to portrait is gets out from the full screen and page gets cropped.
How can make it responsive? Is there any way to keep player in full screen mode on portrait mode.(player supports portrait full screen mode).
On Changing the orientation of the device, the full screen video player or page should be responsive.
