GitLocker: The Coding Marketplace

Description:

lecle yoyo player

YoYo Video Player #
Lecle YoYo Video Player is a HLS(.m3u8) video player for flutter (migrate from yoyo_player package).
The lecle_yoyo_player is a video player that allows you to select HLS video streaming by selecting the
quality. Lecle YoYo Player wraps video_player under the hood and provides base architecture for developers
to create their own set of UI and functionalities.
The package has been updated with more customizable properties and fixed the report issues from the old package.

Features #

You can select multiple quality and open
On video tap play/pause, mute/unmute, or perform any action on video.
Auto hide controls.
(.m3u8) HLS Video streaming support

Install & Set up #
Android #
Add this permission to your <project root>/android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>
copied to clipboard
iOS #
If you need to access videos using http (rather than https) URLs, you have to add the appropriate NSAppTransportSecurity permissions
to your app's <project root>/ios/Runner/Info.plist file.
Open Xcode and change the deployment target of your project to 11.
Project #

Add dependency, open the root directory pubspec.yaml file in dependencies:. Add the following code below:

lecle_yoyo_player: #latest_version
copied to clipboard

Installation dependencies (please ignore if it has been installed automatically)

cd project_directory
flutter pub get
copied to clipboard

Introduce the library in the page

import 'package:lecle_yoyo_player/lecle_yoyo_player.dart';
copied to clipboard
Usage #
A simple usage example:
YoYoPlayer(
aspectRatio: 16 / 9,
url: "video_url",
videoStyle: VideoStyle(),
videoLoadingStyle: VideoLoadingStyle(),
),
copied to clipboard
Change Icon
videoStyle: VideoStyle(
playIcon: Icon(Icons.play_arrow),
pauseIcon: Icon(Icons.pause),
fullscreenIcon: Icon(Icons.fullscreen),
forwardIcon: Icon(Icons.skip_next),
backwardIcon: Icon(Icons.skip_previous),
)
copied to clipboard
Change Video Loading
videoLoadingStyle: VideoLoadingStyle(loading : Center(child: Text("Loading video")),
copied to clipboard
Play With Subtitle
body: YoYoPlayer(
aspectRatio: 16 / 9,
// Url (Video streaming links)
// 'https://dsqqu7oxq6o1v.cloudfront.net/preview-9650dW8x3YLoZ8.webm',
// "https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4",
// "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
url: "https://sfux-ext.sfux.info/hls/chapter/105/1588724110/1588724110.m3u8",
videoStyle: VideoStyle(
qualityStyle: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w500,
color: Colors.white,
),
forwardAndBackwardBtSize: 30.0,
playButtonIconSize: 40.0,
playIcon: Icon(
Icons.add_circle_outline_outlined,
size: 40.0, color: Colors.white,
),
pauseIcon: Icon(
Icons.remove_circle_outline_outlined,
size: 40.0, color: Colors.white,
),
videoQualityPadding: EdgeInsets.all(5.0),
),
videoLoadingStyle: VideoLoadingStyle(
loading: Center(
child: Text("Loading video"),
),
),
allowCacheFile: true,
onCacheFileCompleted: (files) {
print('Cached file length ::: ${files?.length}');

if (files != null && files.isNotEmpty) {
for (var file in files) {
print('File path ::: ${file.path}');
}
}
},
onCacheFileFailed: (error) {
print('Cache file error ::: $error');
},
onFullScreen: (value) {
setState(() {
if (fullscreen != value) {
fullscreen = value;
}
});
}
),
copied to clipboard
Live video

videoStyle: VideoStyle(
showLiveDirectButton: true,
)
copied to clipboard
Player Option #
Player #

Attributes
Type
Description

url
String
Video source ( .m3u8 & File only)

videoStyle
VideoStyle
Video player style

videoLoadingStyle
VideoLoadingStyle
Video loading Style

aspectRatio
double
Video AspectRaitio [aspectRatio : 16 / 9 ]

onFullScreen
VideoCallback
Video state fullscreen

onPlayingVideo
VideoCallback
Video type ( eg : mkv,mp4,hls)

onPlayButtonTap
VideoCallback
Video playing state

onFastForward
VideoCallback<VideoPlayerValue?>
Video new value after forward

onRewind
VideoCallback<VideoPlayerValue?>
Video new value after rewind

onShowMenu
VideoCallback<bool, bool>
Video control buttons state and video quality picker state

onVideoInitCompleted
VideoCallback
Expose the video controller after init the video

headers
Map<String, String>
Additional headers for video url request

autoPlayVideoAfterInit
bool
Allow video auto play after init

displayFullScreenAfterInit
bool
Allow video display in full screen mode after init

onCacheFileCompleted
VideoCallback<List
Video list after caching

onCacheFileCompleted
VideoCallback
Video caching error

allowCacheFile
bool
Allow cache file into device's storage

closedCaptionFile
VideoCallback<ClosedCaptionFile?>
Closed caption file

videoPlayerOptions
VideoPlayerOptions
Provide additional configuration options

onLiveDirectTap
VideoCallback<VideoPlayerValue?>
Live video current value

Player custom style (VideoStyle) #

Attributes
Type
Description

playIcon
Widget
Play button custom play icon

pauseIcon
Widget
Play button custom pause icon

fullscreenIcon
Widget
Full screen button custom icon

forwardIcon
Widget
Forward button custom icon

backwardIcon
Widget
Backward button custom icon

qualityStyle
TextStyle
Video current quality text style

qualityOptionStyle
TextStyle
Video's quality options style

videoSeekStyle
TextStyle
Video's current position text style

videoDurationStyle
TextStyle
Video's duration text style

allowScrubbing
bool
Detect touch input and try to seek the video accordingly

progressIndicatorColors
VideoProgressColors
Default colors used throughout the indicator

progressIndicatorPadding
EdgeInsetsGeometry
Visual padding around the progress indicator

playButtonIconColor
Color
The custom color for the play button's icon

playButtonIconSize
double
The custom size for the play button's icon

spaceBetweenBottomBarButtons
double
Space between play, forward and backward buttons

actionBarBgColor
Color
Custom background color for the action bar

actionBarPadding
EdgeInsetsGeometry
Custom padding for the action bar

qualityOptionsBgColor
Color
Custom background color for the quality options popup

qualityOptionsMargin
EdgeInsetsGeometry
Custom margin to change the display position for the quality options popup

qualityOptionsPadding
EdgeInsetsGeometry
Custom padding around the video quality option text

qualityOptionsRadius
BorderRadius
Custom border radius for the quality options popup

qualityButtonAndFullScrIcoSpace
double
Space between the fullscreen and the video quality buttons

forwardAndBackwardBtSize
double
Custom size for the forward and backward buttons

forwardIconColor
Color
Custom color for the forward button

backwardIconColor
Color
Custom color for the backward button

bottomBarPadding
EdgeInsetsGeometry
Padding around for the bottom bar

videoQualityBgColor
Color
Custom background color for the selected video quality widget

videoQualityRadius
BorderRadiusGeometry
Custom border radius for the selected video quality widget

videoQualityPadding
EdgeInsetsGeometry
Padding around for the selected video quality text

qualityOptionWidth
double
Width for each item inside the video options popup

fullScreenIconSize
double
Full screen button's icon size

fullScreenIconColor
Color
Custom color for the fullscreen button

showLiveDirectButton
bool
Enable or disable live direct button (Use for live video)

liveDirectButtonText
String
Custom text for live direct button

liveDirectButtonTextStyle
TextStyle
Custom style for the direct button text

liveDirectButtonColor
Color
Custom color for the circle of the live direct button

liveDirectButtonDisableColor
Color
Custom disable color for the circle of the live direct button

liveDirectButtonSize
double
Custom size for the circle of the live direct button

enableSystemOrientationsOverride
bool
Enable or disable system's orientation override

orientation
List
A set of orientations the application interface can be displayed in

Player loading custom style (VideoLoadingStyle) #

Attributes
Type
Description

loading
Widget
Custom loading widget to replace the default loading widget

loadingBackgroundColor
Color
Custom background color for the loading widget

loadingIndicatorValueColor
Color
Custom color for the loading indicator

loadingText
String
Custom loading text of the loading widget

loadingTextStyle
TextStyle
Custom TextStyle for the loading text

loadingIndicatorBgColor
Color
The progress indicator's background color

loadingIndicatorColor
Color
The progress indicator's color

loadingIndicatorWidth
double
The width of the line used to draw the circle

indicatorSemanticsLabel
String
The SemanticsProperties.label for the progress indicator

indicatorSemanticsValue
String
The SemanticsProperties.value for the progress indicator

indicatorInitValue
double
The value of the progress indicator

spaceBetweenIndicatorAndText
double
The space between the loading text and the loading indicator

showLoadingText
bool
Allow the loading widget to show the loading text

How is it created ? #

The data in the source url (m3u8) is regex checked and the child m3u8 files are created and saved according to the respective rules.
It starts creating child m3u8 files as soon as the video starts playing
Each time a video is completed or the main url changes, child m3u8 files are checked and deleted.

The child m3u8 files are created as follows: #

If video quality
yoyo_[file-name]_[video-quality].m3u8

If video quality & audio quality
yoyo_[video-quality]_[audio-quality].m3u8

Support M3U8 #

#EXT-X-MEDIA
#EXT-X-STREAM-INF(not for ios)

Player Screenshot #