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"/>

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

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

lecle_yoyo_player: #latest_version

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

 cd project_directory
 flutter pub get

3. Introduce the library in the page

import 'package:lecle_yoyo_player/lecle_yoyo_player.dart';

Usage

A simple usage example:

  YoYoPlayer(
    aspectRatio: 16 / 9,
    url: "video_url",
    videoStyle: VideoStyle(),
    videoLoadingStyle: VideoLoadingStyle(),
  ),

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),
 )

Change Video Loading

   videoLoadingStyle: VideoLoadingStyle(loading : Center(child: Text("Loading video")),

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;
              }
            });
          }
        ),

Live video

videoStyle: VideoStyle(
  showLiveDirectButton: true,
)

Player Option

Player

Player custom style (VideoStyle)

Player loading custom style (VideoLoadingStyle)

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