youtube_plyr_iframe 2.0.1 youtube_plyr_iframe: ^2.0.1 copied to clipboard
Fork of Youtube Player Iframe. Supports web & mobile platforms.
import 'dart:developer';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:youtube_player_iframe_example/pages/oldDemo.dart';
import 'package:youtube_player_iframe_example/pages/thumbnailDemo.dart';
import 'package:youtube_plyr_iframe/youtube_plyr_iframe.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(YoutubeApp());
}
///
class YoutubeApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Youtube Plyr Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
iconTheme: const IconThemeData(color: Colors.blue),
),
debugShowCheckedModeBanner: false,
home: YoutubeAppDemo(),
);
}
}
///
class YoutubeAppDemo extends StatefulWidget {
@override
_YoutubeAppDemoState createState() => _YoutubeAppDemoState();
}
class _YoutubeAppDemoState extends State<YoutubeAppDemo> {
String videoID = "PuMz4v5PYKc";
List<Map<String, dynamic>> players = [
{
"videoID": "AOhFzDN3eMI",
"quality": ThumbnailQuality.max,
},
{
"videoID": "LRNuWYvRtac",
"quality": ThumbnailQuality.standard,
},
{
"videoID": "bhu0x4hoddA",
"quality": ThumbnailQuality.high,
},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text("Demo"),
centerTitle: true,
automaticallyImplyLeading: true,
elevation: 0,
),
body: SafeArea(
child: SingleChildScrollView(
child: Container(
child: new Center(
child: Padding(
padding: EdgeInsets.all(15),
child: new Column(
// center the children
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
children: [
ElevatedButton(
child: Text("Old Demo"),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(builder: (context) => OldDemo()),
),
),
SizedBox(
width: 10,
),
ElevatedButton(
child: Text("Thumbnail Demo"),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ThumbnailDemo()),
),
),
],
),
Text("Livestream"),
ytPlayer("5qap5aO4i9A"),
Divider(),
Text("Single Player"),
ytPlayer("F1B9Fk_SgI0"),
Divider(),
Text("From String"),
ytPlayer(videoID),
Divider(),
Text("List View"),
for (var i in players)
ytPlayer(
i["videoID"],
),
Divider(),
Text("Row List"),
Wrap(
spacing: 8.0,
runSpacing: 4.0,
direction: Axis.horizontal,
children: [
ytPlayer("TyimCGEkiUc"),
Text(
"Hello World",
style: TextStyle(fontSize: 20),
),
],
),
],
),
),
),
),
),
),
);
}
void _showDialog(context, videoID) {
// flutter defined function
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return YoutubeViewer(
videoID,
);
},
);
}
Widget ytPlayer(videoID) {
return Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
_showDialog(
context,
videoID,
);
},
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Stack(
children: <Widget>[
LayoutBuilder(
builder: (context, constraints) {
if (kIsWeb && constraints.maxWidth > 800) {
return Container(
color: Colors.transparent,
padding: EdgeInsets.all(5),
width: MediaQuery.of(context).size.width / 2,
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: new Image.network(
YoutubePlayerController.getThumbnail(
videoId: videoID,
// todo: get thumbnail quality from list
quality: ThumbnailQuality.max,
webp: false),
fit: BoxFit.fill,
),
),
);
} else {
return Container(
color: Colors.transparent,
padding: EdgeInsets.all(5),
width: MediaQuery.of(context).size.width * 2,
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: new Image.network(
YoutubePlayerController.getThumbnail(
videoId: videoID,
// todo: get thumbnail quality from list
quality: ThumbnailQuality.max,
webp: false),
fit: BoxFit.fill,
),
),
);
}
},
),
],
),
Icon(
Icons.play_circle_filled,
color: Colors.white,
size: 55.0,
),
],
),
),
);
}
}
class YoutubeViewer extends StatefulWidget {
final String? videoID;
YoutubeViewer(this.videoID);
@override
_YoutubeViewerState createState() => _YoutubeViewerState();
}
class _YoutubeViewerState extends State<YoutubeViewer> {
// ignore: close_sinks
YoutubePlayerController? _controller;
@override
void initState() {
super.initState();
_controller = YoutubePlayerController(
initialVideoId: widget.videoID!,
params: YoutubePlayerParams(
showControls: true,
showFullscreenButton: true,
desktopMode: false, // false for platform design
autoPlay: false,
enableCaption: true,
showVideoAnnotations: false,
enableJavaScript: true,
privacyEnhanced: true,
playsInline: false, // iOS only
),
)..listen((value) {
if (value.isReady && !value.hasPlayed) {
_controller!
..hidePauseOverlay()
..hideTopMenu();
// Uncomment below to stop Autoplay
// ..play()
Future.delayed(const Duration(seconds: 5), () {
context.ytController.showTopMenu();
});
}
});
// Uncomment below for device orientation
// _controller!.onEnterFullscreen = () {
// SystemChrome.setPreferredOrientations([
// DeviceOrientation.landscapeLeft,
// DeviceOrientation.landscapeRight,
// ]);
// log('Entered Fullscreen');
// };
// _controller!.onExitFullscreen = () {
// SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
// Future.delayed(const Duration(seconds: 1), () {
// _controller!.play();
// });
// Future.delayed(const Duration(seconds: 5), () {
// SystemChrome.setPreferredOrientations(DeviceOrientation.values);
// });
// log('Exited Fullscreen');
// };
}
@override
Widget build(BuildContext context) {
final player = YoutubePlayerIFrame();
return YoutubePlayerControllerProvider(
key: UniqueKey(),
controller: _controller!,
child: AlertDialog(
insetPadding: EdgeInsets.all(10),
backgroundColor: Colors.black,
content: player,
contentPadding: EdgeInsets.all(0),
actions: <Widget>[
new Center(
child: TextButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
),
],
),
);
}
}
///
/// For getting youtube player from anywhere
///
class YoutubePlayer extends StatefulWidget {
final String videoID;
YoutubePlayer(this.videoID);
@override
_YoutubePlayerState createState() => _YoutubePlayerState();
}
class _YoutubePlayerState extends State<YoutubePlayer> {
@override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
_showDialog(
context,
widget.videoID,
);
},
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Stack(
children: <Widget>[
LayoutBuilder(
builder: (context, constraints) {
if (kIsWeb && constraints.maxWidth > 800) {
return Container(
color: Colors.transparent,
padding: EdgeInsets.all(5),
width: MediaQuery.of(context).size.width / 2,
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: new Image.network(
YoutubePlayerController.getThumbnail(
videoId: widget.videoID,
// todo: get thumbnail quality from list
quality: ThumbnailQuality.max,
webp: false),
fit: BoxFit.fill,
),
),
);
} else {
return Container(
color: Colors.transparent,
padding: EdgeInsets.all(5),
width: MediaQuery.of(context).size.width * 2,
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: new Image.network(
YoutubePlayerController.getThumbnail(
videoId: widget.videoID,
// todo: get thumbnail quality from list
quality: ThumbnailQuality.max,
webp: false),
fit: BoxFit.fill,
),
),
);
}
},
),
],
),
Icon(
Icons.play_circle_filled,
color: Colors.white,
size: 55.0,
),
],
),
),
);
}
void _showDialog(context, videoID) {
// flutter defined function
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return YoutubeViewer(
videoID,
);
},
);
}
}