Flutter better player | video player integration | Better Player

abhishek

4 years ago

Categories: FlutterVideo

Flutter better player | video player integration | Better Player

Flutter Better Player :

Flutter Better Player library will make you integrate video player in your app and let’s you play the video’s from api, local assets folder and even from your device.

You can create a playlist with a list of videos and can play them back to back on after another.

Options like video quality, captions are provided based on the video url, multiple tracks for sub-title’s can be provided.

Better player has cache support so that the videos can be made available to avoid unwanted data usage.

Advanced play option support is available so as to make a smooth user friendly feel while playing the video providing the support to play videos of different formats.

Flutter Better Player Video Player :

Go through the below tutorial for more details.

pubspec.yaml :

Add dependency for Better Player with the version accordingly to the latest available from here.

dev_dependencies:
  flutter_test:
    sdk: flutter
  better_player: ^0.0.48

main.dart :

Initialize with void main()

void main() {
  runApp(MyApp());
}

We are considering the default class MyApp extending StatelessWidget.

Return a MaterialApp to get access to the Material components.

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(

    primarySwatch: Colors.blue,

    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
  home: MyHomePage(title: 'Flutter Demo Home Page'),
);

Declare MyHomePage class in home extending StatefulWidget

Create a state and provide the title parameter in the constructor.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

Return Scaffold with AppBar provide the title.

Scaffold(
  appBar: AppBar(
    title: Text("Video Player"),
  ),

);

Declare body with AspectRatio –> 16:9 you can change accordingly we will be playing a video from the URL.

AspectRatio(
  aspectRatio: 16 / 9,
  child: BetterPlayer.network(
    "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
    betterPlayerConfiguration: BetterPlayerConfiguration(
      aspectRatio: 16 / 9,
    ),
  ),
),

Adding a Playlist :

And also we can specify the playlist also with more than one video in it.

We can also add video’s from web api’s so that list of videos get to be played one after the another also you can go forward and backward in list.

Using BetterPlayerDataSource we can provide the list of the videos and add it to the dataSourceList to add it to configuration.

List<BetterPlayerDataSource> createDataSet() {
  List dataSourceList = List<BetterPlayerDataSource>.empty();
  dataSourceList.add(
    BetterPlayerDataSource(
      BetterPlayerDataSourceType.network,
      "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
    ),
  );
  dataSourceList.add(
    BetterPlayerDataSource(BetterPlayerDataSourceType.network,
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"),
  );
  dataSourceList.add(
    BetterPlayerDataSource(BetterPlayerDataSourceType.network,
        "http://sample.vodobox.com/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8"),
  );
  return dataSourceList;
}

And now we need to specify configurations in the body as below

AspectRatio(
  aspectRatio: 16 / 9,
  child: BetterPlayerPlaylist(
      betterPlayerConfiguration: BetterPlayerConfiguration(),
      betterPlayerPlaylistConfiguration:  BetterPlayerPlaylistConfiguration(),
      betterPlayerDataSourceList: createDataSet()
  ),
)

Flutter better player FullCode :

Providing below the full code for flutter better player integration.

import 'package:flutter/material.dart';
import 'package:better_player/better_player.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Video Player"),
      ),

        body: AspectRatio(
          aspectRatio: 16 / 9,
          child: BetterPlayerPlaylist(
              betterPlayerConfiguration: BetterPlayerConfiguration(),
              betterPlayerPlaylistConfiguration:  BetterPlayerPlaylistConfiguration(),
              betterPlayerDataSourceList: createDataSet()
          ),
        )
    );
  }

}



List<BetterPlayerDataSource> createDataSet() {
  List dataSourceList = List<BetterPlayerDataSource>();
  dataSourceList.add(
    BetterPlayerDataSource(
      BetterPlayerDataSourceType.network,
      "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
    ),
  );
  dataSourceList.add(
    BetterPlayerDataSource(BetterPlayerDataSourceType.network,
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"),
  );
  dataSourceList.add(
    BetterPlayerDataSource(BetterPlayerDataSourceType.network,
        "http://sample.vodobox.com/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8"),
  );
  return dataSourceList;
}

On button click play video :

Create a text button to make navigation to new screen where video is played

TextButton(onPressed: (){
  Navigator.push(context,
      MaterialPageRoute(builder: (context) => VideoScreen(videoLink: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4")));
}, child: Text("Click")),

Video screen :

Here i am designing a new screen where we have added a video player in which video can be played.

import 'package:better_player/better_player.dart';
import 'package:flutter/material.dart';

class VideoScreen extends StatelessWidget {

  final String videoLink;

  const VideoScreen( {Key? key, required this.videoLink}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return AspectRatio(
        aspectRatio: 16 / 9,
        child: BetterPlayer.network(
          videoLink,
          betterPlayerConfiguration: BetterPlayerConfiguration(
            aspectRatio: 16 / 9,
          ),
        ),
      );
  }
}

Flutter better player output :

This screen depicts the usage of flutter better player integration to play videos on your app.

If you are having any query’s in this flutter better player implementation do let us know in the comment section below.If you like this tutorial do like and share us for more interesting updates.