Sunday, March 26, 2023

Opensource video player for flutter

YoYo Video Player is a HLS(.m3u8) video player for flutter.

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


  • 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

  1. Add dependency, open the root directory pubspec.yamlFile independencies:Add the following code below
yoyo_player: #latest
  1. Installation dependencies (please ignore if it has been installed automatically)
 cd Project directory
 flutter packages get
  1. Introduce the library in the page
import 'package:yoyo_player/yoyo_player.dart';


A simple usage example:

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

Change Icon

 videoStyle: VideoStyle(
    play : Icon(Icons.play_arrow),
    pause : Icon(Icons.pause),
    fullscreen : Icon(Icon(Icons.fullscreen)),
    forward : Icon(Icons.skip_next),
    backward : Icon(Icons.skip_previous),

Change Video Loading

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

Play With Subtitle

        body: YoYoPlayer(
          aspectRatio: 16 / 9,
          //url ( .m3u8 video streaming link )
          //example ( url :"" )
          //example ( url :"" )
          url:  " ",
          videoStyle: VideoStyle(),
          videoLoadingStyle: VideoLoadingStyle(
            loading: Center(
              child: Text("Loading video"),

Player Option


urlStringVideo source ( .m3u8 & File only)
videoStyleVideoStyleVideo Player style
videoLoadingStyleVideoLoadingStyleVideo Loading Style
aspectRatiodoubleVideo AspectRaitio [aspectRatio : 16 / 9 ]
onfullscreenVideoCallbackvideo state fullscreen
openingvideoVideoCallbackvideo type ( eg : mkv,mp4,hls)

Player custom style (VideoStyle)

playWidgetYou can use any Widget you want
pauseWidgetYou can use any Widget you want
fullscreenWidgetYou can use any Widget you want
forwardWidgetYou can use any Widget you want
backwardWidgetYou can use any Widget you want
playedColorColorYou can use any Icon style you want
qualitystyleTextStyleYou can use any Text style you want
qashowstyleTextStyleYou can use any Text style you want

Player Loading custom style (VideoStyle)

loadingWidgetYou can use any loading style you want

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 viedo quality yoyo[vido-quality].m3u8
  • If video quality & audio quality yoyo[video-quality][audio-quality].m3u8

Support M3U8

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

Player Screenshot