Kesenek YoYo Video Player

Kesenek YoYo Video Player #

Kesenek YoYo Video Player is a HLS(.m3u8) video player for Flutter. This is an updated and improved version of the lecle_yoyo_player package, which was originally migrated from yoyo_player.

Updated and maintained by Mehmet Kesenek

The kesenek_yoyo_player is a video player that allows you to select HLS video streaming by selecting the quality. Kesenek YoYo Player wraps video_player under the hood and provides base architecture for developers to create their own set of UI and functionalities.

What's New in Kesenek YoYo Player #

✅ Removed auto_orientation dependency - Replaced with Flutter's native SystemChrome for better stability ✅ Updated all dependencies to the latest versions ✅ Improved stability and performance ✅ Dart 3 support with modern SDK requirements (>=3.0.0) ✅ Better orientation handling using Flutter's built-in APIs ✅ Zoom feature - Pinch to zoom functionality for video playback

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
• Zoom feature - Pinch to zoom functionality for video playback
• Better stability without problematic dependencies

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:

kesenek_yoyo_player: ^1.0.0

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:kesenek_yoyo_player/kesenek_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)

Migration from lecle_yoyo_player #

If you're migrating from lecle_yoyo_player, simply update your import statement:

// Old
import 'package:lecle_yoyo_player/lecle_yoyo_player.dart';

// New
import 'package:kesenek_yoyo_player/kesenek_yoyo_player.dart';

All other APIs remain the same!

Credits #

Current Maintainer: Mehmet Kesenek

This package is based on:

• Original yoyo_player by Ko Htut
• lecle_yoyo_player by Lecle Vietnam
• Updated and improved by Mehmet Kesenek - Removed problematic dependencies, updated to modern Flutter/Dart versions, and improved stability

License #

MIT License - see the LICENSE file for details