Skip to content

Dharini17/flexivideoplayer

Repository files navigation

#flexivideoplayer

Advanced video player based on video_player and Chewie with some customized controls

Features

  • Fullscreen video support
  • Fullscreen brightness manage support
  • Fullscreen volume manage support

Installation

In your pubspec.yaml file within your Flutter Project:

dependencies:
  flexivideoplayer: <latest_version>

Usage

import 'package:flexivideoplayer/flexivideoplayer.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:video_player/video_player.dart';

class FlexiDemo extends StatefulWidget {
  FlexiDemo({
    Key? key,
    this.title = 'Flexi Video Player Demo',
  }) : super(key: key);

  final String title;

  @override
  State<StatefulWidget> createState() {
    return _FlexiDemoState();
  }
}

class _FlexiDemoState extends State<FlexiDemo> {

  late VideoPlayerController _videoPlayerController1;
  FlexiController? _FlexiController;
  bool isSourceError = false;

  @override
  void initState() {
    super.initState();
    initializePlayer();
  }

  @override
  void dispose() {
    _videoPlayerController1.dispose();
    _FlexiController?.dispose();
    super.dispose();
  }

  Future<void> initializePlayer() async {

    setState(() {
      isSourceError = false;
    });
    try {
      _videoPlayerController1 =
          VideoPlayerController.network(
              "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4");

      await _videoPlayerController1.initialize();


      final subtitles = [

        Subtitle(
          index: 0,
          start: const Duration(seconds: 0),
          end: Duration(seconds: _videoPlayerController1.value.duration.inSeconds),
          text: 'Whats up? :)',

        ),
      ];

      _FlexiController = FlexiController(

        aspectRatio: 16 / 9,
        deviceOrientationsOnEnterFullScreen: [
          DeviceOrientation.landscapeLeft,
          DeviceOrientation.landscapeRight
        ],
        deviceOrientationsAfterFullScreen: [DeviceOrientation.portraitUp],
        allowFullScreen: true,
        fullScreenByDefault: true,
        allowedScreenSleep: false,
        videoPlayerController: _videoPlayerController1,
        autoPlay: true,
        looping: true,
        errorBuilder: (context, errorMessage) {
          print("Error find : $errorMessage");

          return Center(
            child: Text(
              errorMessage,
              style: const TextStyle(color: Colors.white),
            ),
          );
        },
        additionalOptions: (context) {
          return <OptionItem>[
            OptionItem(
              onTap: toggleVideo,
              iconData: Icons.live_tv_sharp,
              title: 'Toggle Video Src',
            ),
          ];
        },
        subtitle: Subtitles(subtitles),
        subtitleBuilder: (context, dynamic subtitle) =>
            Container(
              padding: const EdgeInsets.all(10.0),
              child: subtitle is InlineSpan
                  ? RichText(
                text: subtitle,
              )
                  : Text(
                subtitle.toString(),
                style: const TextStyle(color: Colors.white),
              ),
            ),

        hideControlsTimer: const Duration(seconds: 3),

        // Try playing around with some of these other options:
        isBrignessOptionDisplay: true,
        isVolumnOptionDisplay: true,

        cupertinoProgressColors: FlexiProgressColors(
          playedColor: Colors.red,
          handleColor: Colors.red,
          backgroundColor: Colors.grey,
          bufferedColor: Colors.white.withOpacity(0.5),
        ),

      );

      setState(() {});
    }
    catch(exception){

      setState(() {
        isSourceError = true;
      });
      print("exception : $exception");
    }
  }

  Future<void> toggleVideo() async {

    await initializePlayer();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: widget.title,

      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            title: Text(widget.title,style: TextStyle(fontSize: 14,color: Colors.black),),
          ) ,
          body: SingleChildScrollView(
            child: Column(
              children: <Widget>[

                Container(
                  color: Colors.black,
                  child:  AspectRatio(aspectRatio: 16/9,
                    child:

                    isSourceError ?

                    Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children:  [
                          Icon(CupertinoIcons.exclamationmark_circle,color: Colors.white,size: 30,),
                          SizedBox(height: 10),
                          Text('This video is unavailable',style: TextStyle(color: Colors.white,fontSize: 15),),

                          InkWell(
                            onTap: (){

                              initializePlayer();
                            },
                            child: Container(
                              height: 30,width: 100,alignment: Alignment.center,
                              child: Text("Reload again",style: TextStyle(color: Colors.red,fontSize: 13),),
                            ),
                          )
                        ]
                    )

                        :

                    _FlexiController != null ?
                    // &&
                    //        _FlexiController!
                    //            .videoPlayerController.value.isInitialized
                    //        ?
                    Flexi(
                      controller: _FlexiController!,
                    )
                        : Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: const [
                          CircularProgressIndicator(strokeWidth: 2,color: Colors.red,),
                          SizedBox(height: 20),
                          Text('Loading',style: TextStyle(color: Colors.white,fontSize: 15),),
                        ]
                    ),
                  ),
                )


              ],
            ),
          )
      ),
    );
  }
}

Additional information

This plugin is still in development for adding more customized controls & improves performance.Please feel free to share if any bug found.Thank You.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages