Simple video player with subtitle wrote for Flutter.
This package as a gift for my teacher and my leader Mr. Muqtada Al-Sadr.
Proudly based on BLoC.
- Play video from Assets, Files, Network by
VideoPlayerControllerfrom video_player. - Parse subtitles from Assets, Files, Network
SubtitleProviderclass. - Custom theme you can use with
IQThemeclass. - Support Subtitles:
- VTT format
- SRT format
- User define format
- IQScreen: a video player scaffold screen.
- IQPlayer: a widget enable you to watch video implement with your screen.
- IQParser: a subtitle package that view subtitles, included the widget and parser.
- IQTheme: to make your customizations on player ui and make it more integrated with your own app.
Go to pubspec.yaml and add it to the dependencies list like:
dependencies:
iqplayer: <latest_version>Install packages from the command line with Flutter:
flutter pub getEnsure the following permission is presented in your Android Manifest file, located in /android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET"/>The Flutter project template adds it, so it may already be there.
Warning: The video player is not functional on iOS simulators. An IOS device must be used during development/testing.
Add the following entry into your Info.plist file, located in /ios/Runner/Info.plist:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
This entry allows your app to access video files by URL.
Now in your Dart files, you can use:
import "package:iqplayer/iqplayer.dart";- IQScreen:
IQScreen(
videoPlayerController = VideoPlayerController.network(""),
subtitleProvider: SubtitleProvider.fromNetwork(""),
title: "Simple Video",
description: "Simple Description",
);- IQPlayer:
In development.
- IQParser:
Note: It is used automatically with
IQScreenand you can use and display data withSubtitleProvider.
BlocProvider<SubtitleBloc>(
create: (context) =>
SubtitleBloc(
SubtitleProvider.fromNetwork(""),
)..add(FetchSubtitles()),
child: MyParser(),
);- IQTheme:
Note: You can customize your theme on
IQScreen,IQPlayerorIQParserwith this class.
You have +17 option to customize theme!
IQScreen(
...
iqTheme: IQTheme(
...
),
);- Start using
IQScreenwith Navigator:
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => IQScreen(
title: "",
description: "",
videoPlayerController: VideoPlayerController.network(""),
subtitleProvider: SubtitleProvider.fromNetwork(""),
),
),
);- Using of
IQParser:
You have to use
BlocProviderwithSubtitleProviderto configure subtitles.
// In Your widget
BlocProvider<SubtitleBloc>(
create: (context) =>
SubtitleBloc(
SubtitleProvider.fromNetwork(""),
)..add(FetchSubtitles()),
child: MyParser(),
);
// new parser class, you can exclude `MyParser`
class MyParser extends StatelessWidget {
@override
Widget build(BuildContext context) {
return IQParser();
}
}Note: You can exclude "MyParser" and delete it!
Note: What is the reason for creating
MyParser? see this
- You can use
IQThemeto customize ui like:
You have +17 option to customize theme!
IQTheme(
loadingProgress: SpinKitCircle(
color: Colors.red,
),
playButtonColor: Colors.transparent,
videoPlayedColor: Colors.indigo,
playButton: (bool isPlay) {
if (isPlay)
return Icon(
Icons.pause_circle_filled,
color: Colors.red,
size: 50,
);
return Icon(
Icons.play_circle_outline,
color: Colors.red,
size: 50,
);
},
);import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:iqplayer/iqplayer.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'IQPlayer Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'IQPlayer Demo'),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: RaisedButton(
child: Text('Open IQPlayer'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => IQScreen(
title: title,
description: 'Simple video as a demo video',
videoPlayerController: VideoPlayerController.network(
'https://d11b76aq44vj33.cloudfront.net/media/720/video/5def7824adbbc.mp4',
),
subtitleProvider: SubtitleProvider.fromNetwork(
'https://duoidi6ujfbv.cloudfront.net/media/0/subtitles/5675420c9d9a3.vtt'),
iqTheme: IQTheme(
loadingProgress: SpinKitCircle(
color: Colors.red,
),
playButtonColor: Colors.transparent,
videoPlayedColor: Colors.indigo,
playButton: (bool isPlay) {
if (isPlay)
return Icon(
Icons.pause_circle_filled,
color: Colors.red,
size: 50,
);
return Icon(
Icons.play_circle_outline,
color: Colors.red,
size: 50,
);
},
),
),
),
);
},
),
),
);
}
}