video_viewer_updated 1.2.9
video_viewer_updated: ^1.2.9 copied to clipboard
Multiplatform minimalist video viewer with spectacular user experience.
video_viewer #
Note: This is a fork, and will be "updated" as in dependencies, no feature requests or bug-fixes support for now unless someone is willong to help and fix.
My other APIs #
Features #
- Amazing UI / UX.
- Fancy animations.
- Streaming Chat
- Custom Ads Support.
- Fully customizable.
- HLS (m3u8) format support.
- Captions (Subtitles) support.
- Cut the video (It just will show a specific time of the video)
- Easy and powerful implementation! :)
PREVIEW #
View the full source code in the example
High-Quality Video Demo: https://user-images.githubusercontent.com/65832922/125377927-acb7b780-e342-11eb-950d-b80707e96341.mp4
INSTALLATION #
Android #
Add android.permission.INTERNET and usesCleartextTraffic in your Android Manifest file, located in <project_root>/android/app/src/main/AndroidManifest.xml
<manifest>
<uses-permission android:name="android.permission.INTERNET"/>
<application android:usesCleartextTraffic="true"></aplication>
</manifest>
iOS #
Add the following entry to your Info.plist file, located in <project_root>/ios/Runner/Info.plist
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
Warning: The video player is not functional on iOS simulators. An iOS device must be used during development/testing.
GLOBAL GESTURES #
- One Tap: Show or hide the overlay that contains the PlayAndPauseWidget and the ProgressBar
- Double tap:
- Left: Double tapping on the left side of the VideoViewer will do the rewind. Default 10 seconds.
- Right: Double-tapping on the right side of the VideoViewer will forward. Default 10 seconds.
- Horizontal Drag:
- Left: Making a horizontal movement to the left will make a rewind proportional to the distance traveled.
- Right: Making a horizontal movement to the right will make a forward proportional to the distance traveled.
- Vertical Drag:
- Up: Increase video volume proportional to the distance traveled.
- Down: Decrease video volume proportional to the distance traveled.
- Scale Drag: When the VideoViewer is on fullscreen and landscape mode you can zoom to video for completing the screen width.
SCREENSHOTS #
Playing | Paused |
---|---|
![]() |
![]() |
Rewind and Forward
Double Tap Rewind | Double Tap Forward |
---|---|
![]() |
![]() |
Fullscreen #
Portrait | Landscape |
---|---|
![]() |
![]() |
Settings Menu #
Principal Menu | Quality Menu |
---|---|
![]() |
![]() |
Volume Bar #
EXAMPLES #
Using VideoViewerController #
class UsingVideoControllerExample extends StatefulWidget {
UsingVideoControllerExample({Key key}) : super(key: key);
@override
_UsingVideoControllerExampleState createState() => _UsingVideoControllerExampleState();
}
class _UsingVideoControllerExampleState extends State<UsingVideoControllerExample> {
final VideoViewerController controller = VideoViewerController();
@override
Widget build(BuildContext context) {
return VideoViewer(
controller: controller,
source: {
"SubRip Text": VideoSource(
video: VideoPlayerController.network(
"https://www.speechpad.com/proxy/get/marketing/samples/standard-captions-example.mp4"),
subtitle: {
"English": VideoViewerSubtitle.network(
"https://felipemurguia.com/assets/txt/WEBVTT_English.txt",
type: SubtitleType.webvtt,
),
},
)
},
);
}
VideoPlayerController getVideoPlayer() => controller.controller;
String getactiveSourceNameName() => controller.activeSourceName;
String getActiveCaption() => controller.activeCaption;
bool isFullScreen() => controller.isFullScreen;
bool isBuffering() => controller.isBuffering;
bool isPlaying() => controller.isPlaying;
}
HLS Network Video (This example only works on Android and iOS) #
class HLSVideoExample extends StatelessWidget {
const HLSVideoExample({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return FutureBuilder<Map<String, VideoSource>>(
future: VideoSource.fromM3u8PlaylistUrl(
"https://sfux-ext.sfux.info/hls/chapter/105/1588724110/1588724110.m3u8",
formatter: (quality) => quality == "Auto" ? "Automatic" : "${quality.split("x").last}p",
),
builder: (_, data) {
return data.hasData
? VideoViewer(
source: data.data,
onFullscreenFixLandscape: true,
style: VideoViewerStyle(
thumbnail: Image.network(
"https://play-lh.googleusercontent.com/aA2iky4PH0REWCcPs9Qym2X7e9koaa1RtY-nKkXQsDVU6Ph25_9GkvVuyhS72bwKhN1P",
),
),
)
: CircularProgressIndicator();
},
);
}
}
Network Video with WebVTT Subtitles #
class WebVTTSubtitleVideoExample extends StatelessWidget {
const WebVTTSubtitleVideoExample({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return VideoViewer(
source: {
"WebVTT Caption": VideoSource(
video: VideoPlayerController.network(
//This video has a problem when end
"https://www.speechpad.com/proxy/get/marketing/samples/standard-captions-example.mp4",
),
subtitle: {
"English": VideoViewerSubtitle.network(
"https://felipemurguia.com/assets/txt/WEBVTT_English.txt",
),
"Spanish": VideoViewerSubtitle.network(
"https://felipemurguia.com/assets/txt/WEBVTT_Spanish.txt",
),
},
)
},
);
}
}
Network Video with SubRip Subtitles #
class SubRipSubtitleVideoExample extends StatelessWidget {
const SubRipSubtitleVideoExample({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
final String content = '''
1
00:00:03,400 --> 00:00:06,177
In this lesson, we're going to
be talking about finance. And
2
00:00:06,177 --> 00:00:10,009
one of the most important aspects
of finance is interest.
3
00:00:10,009 --> 00:00:13,655
When I go to a bank or some
other lending institution
4
00:00:13,655 --> 00:00:17,720
to borrow money, the bank is happy
to give me that money. But then I'm
5
00:00:17,900 --> 00:00:21,480
going to be paying the bank for the
privilege of using their money. And that
6
00:00:21,660 --> 00:00:26,440
amount of money that I pay the bank is
called interest. Likewise, if I put money
7
00:00:26,620 --> 00:00:31,220
in a savings account or I purchase a
certificate of deposit, the bank just
8
00:00:31,300 --> 00:00:35,800
doesn't put my money in a little box
and leave it there until later. They take
9
00:00:35,800 --> 00:00:40,822
my money and lend it to someone
else. So they are using my money.
10
00:00:40,822 --> 00:00:44,400
The bank has to pay me for the privilege
of using my money.
11
00:00:44,400 --> 00:00:48,700
Now what makes banks
profitable is the rate
12
00:00:48,700 --> 00:00:53,330
that they charge people to use the bank's
money is higher than the rate that they
13
00:00:53,510 --> 00:01:00,720
pay people like me to use my money. The
amount of interest that a person pays or
14
00:01:00,800 --> 00:01:06,640
earns is dependent on three things. It's
dependent on how much money is involved.
15
00:01:06,820 --> 00:01:11,300
It's dependent upon the rate of interest
being paid or the rate of interest being
16
00:01:11,480 --> 00:01:17,898
charged. And it's also dependent upon
how much time is involved. If I have
17
00:01:17,898 --> 00:01:22,730
a loan and I want to decrease the amount
of interest that I'm going to pay, then
18
00:01:22,800 --> 00:01:28,040
I'm either going to have to decrease how
much money I borrow, I'm going to have
19
00:01:28,220 --> 00:01:32,420
to borrow the money over a shorter period
of time, or I'm going to have to find a
20
00:01:32,600 --> 00:01:37,279
lending institution that charges a lower
interest rate. On the other hand, if I
21
00:01:37,279 --> 00:01:41,480
want to earn more interest on my
investment, I'm going to have to invest
22
00:01:41,480 --> 00:01:46,860
more money, leave the money in the
account for a longer period of time, or
23
00:01:46,860 --> 00:01:49,970
find an institution that will pay
me a higher interest rate.
''';
return VideoViewer(
source: {
"SubRip Caption": VideoSource(
video: VideoPlayerController.network(
"https://www.speechpad.com/proxy/get/marketing/samples/standard-captions-example.mp4"),
subtitle: {
"English": VideoViewerSubtitle.content(
content,
type: SubtitleType.srt,
),
},
)
},
);
}
}