Vimeo and Youtube Player For Flutter, Pod Player Provides Customizable Video PlayerControl

ideo player for flutter web & mobile devices, pod player supports playing video from `Youtube` and `Vimeo`

pod player is a simple and easy-to-use video player. Its video controls are similar to Youtube player (with customizable controls) and also can play videos from Youtube and Vimeo (By providing url/video_id).

This plugin built upon flutter's official video_player plugin

Features 

• Play youtube videos (using video URL or ID)
• Play vimeo videos (using video ID [with ou without hash])
• Play vimeo private videos (using video ID [with ou without hash], access token)
• Video overlay similar to youtube
• Double tap to seek video.
• On video tap show/hide video overlay.
• Auto hide overlay
• Change playback speed
• Custom overlay
• Custom progress bar
• Custom labels
• Change video quality (for vimeo and youtube)
• Enable/disable fullscreen player
• support for live youtube video
• [TODO] support for video playlist

Features on web 

Double tap on Video player to enable/disable fullscreen

Mute/unmute volume

Video player integration with keyboard

• SPACE play/pause video
• M mute/unMute video
• F enable/disable fullscreen
• ESC enable/disable fullscreen
• -> seek video forward
• <- seek video backward

Double tap on video (enable/diables fullscreen)

Installation 

In your pubspec.yaml file within your Flutter Project:

dependencies:
  pod_player: <latest_version>

Android 

If you are using network-based videos, ensure that the following permission is present in your Android Manifest file, located in <project root>/android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>

If you need to access videos using http (rather than https) URLs.

Located inside application tag

<application
  - - -
  - - - - - -
  android:usesCleartextTraffic="true"

Ios 

Add permissions to your app's Info.plist file,

located in <project root>/ios/Runner/Info.plist

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Web ( Not recommended in production) 

if u are using youtube or vimeo player on web, then there will be some issue with CORS only in web, so use this flutter_cors package

using flutter_cors package to enable or disable CORS

To Enable CORS (run this command )

dart pub global activate flutter_cors
fluttercors --enable

To Disable CORS (run this command )

fluttercors --disable

How to use 

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

class PlayVideoFromNetwork extends StatefulWidget {
  const PlayVideoFromNetwork({Key? key}) : super(key: key);

  @override
  State<PlayVideoFromNetwork> createState() => _PlayVideoFromNetworkState();
}

class _PlayVideoFromNetworkState extends State<PlayVideoFromNetwork> {
  late final PodPlayerController controller;

  @override
  void initState() {
    controller = PodPlayerController(
      playVideoFrom: PlayVideoFrom.network(
        'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
      ),
    )..initialise();
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PodVideoPlayer(controller: controller),
    );
  }
}

Configure pod player 

  controller = PodPlayerController(
    playVideoFrom: PlayVideoFrom.youtube('https://youtu.be/A3ltMaM6noM'),
    podPlayerConfig: const PodPlayerConfig(
      autoPlay: true,
      isLooping: false,
      videoQualityPriority: [720, 360]
    )
  )..initialise();

Add Thumbnail 

PodVideoPlayer(
  controller: controller,
  videoThumbnail: const DecorationImage(
    /// load from asset: AssetImage('asset_path')
    image: NetworkImage('https://images.unsplash.com/photo-1569317002804-ab77bcf1bce4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dW5zcGxhc2h8ZW58MHx8MHx8&w=1000&q=80',
    ),
    fit: BoxFit.cover,
  ),
),

Add PodPlayerLabels (custom labels) 

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: PodVideoPlayer(
      controller: controller,
      podPlayerLabels: const PodPlayerLabels(
        play: "Play label customized",
        pause: "Pause label customized",
        ...
      ),
    ),
  );
}

How to play video from youtube 

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

class PlayVideoFromYoutube extends StatefulWidget {
  const PlayVideoFromYoutube({Key? key}) : super(key: key);

  @override
  State<PlayVideoFromYoutube> createState() => _PlayVideoFromYoutubeState();
}

class _PlayVideoFromYoutubeState extends State<PlayVideoFromYoutube> {
  late final PodPlayerController controller;

  @override
  void initState() {
    controller = PodPlayerController(
      playVideoFrom: PlayVideoFrom.youtube('https://youtu.be/A3ltMaM6noM'),
    )..initialise();
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PodVideoPlayer(controller: controller),
    );
  }
}

How to play video from vimeo 

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

class PlayVideoFromVimeo extends StatefulWidget {
  const PlayVideoFromVimeo({Key? key}) : super(key: key);

  @override
  State<PlayVideoFromVimeo> createState() => _PlayVideoFromVimeoState();
}

class _PlayVideoFromVimeoState extends State<PlayVideoFromVimeo> {
  late final PodPlayerController controller;

  @override
  void initState() {
    controller = PodPlayerController(
      playVideoFrom: PlayVideoFrom.vimeo('518228118'),
    )..initialise();
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PodVideoPlayer(controller: controller),
    );
  }
}

How to play video from vimeo with hash 

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

class PlayVideoFromVimeo extends StatefulWidget {
  const PlayVideoFromVimeo({Key? key}) : super(key: key);

  @override
  State<PlayVideoFromVimeo> createState() => _PlayVideoFromVimeoState();
}

class _PlayVideoFromVimeoState extends State<PlayVideoFromVimeo> {
  late final PodPlayerController controller;

  @override
  void initState() {
    controller = PodPlayerController(
      playVideoFrom: PlayVideoFrom.vimeo('518228118', hash: '7cc595e1f8'),
    )..initialise();
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PodVideoPlayer(controller: controller),
    );
  }
}

How to play video from vimeo private videos 

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

class PlayVideoFromVimeoPrivateVideo extends StatefulWidget {
  const PlayVideoFromVimeoPrivateVideo({Key? key}) : super(key: key);

  @override
  State<PlayVideoFromVimeoPrivateVideo> createState() =>
          _PlayVideoFromVimeoPrivateVideoState();
}

class _PlayVideoFromVimeoPrivateVideoState
    extends State<PlayVideoFromVimeoPrivateVideo> {
  late final PodPlayerController controller;

  @override
  void initState() {
    String videoId = 'your private video id';
    String token = 'your access token';
    final Map<String, String> headers = <String, String>{};
    headers['Authorization'] = 'Bearer ${token}';

    controller = PodPlayerController(
      playVideoFrom: PlayVideoFrom.vimeoPrivateVideos(
        videoId,
        httpHeaders: headers
      ),
    )..initialise();
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PodVideoPlayer(controller: controller),
    );
  }
}

Example 

Please run the app in the example/ folder to start playing!

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add pod_player

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  pod_player: ^0.2.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:pod_player/pod_player.dart';

example/lib/main.dart

import 'package:example/screens/from_asset.dart';
import 'package:example/screens/from_network.dart';
import 'package:example/screens/from_network_urls.dart';
import 'package:example/screens/from_vimeo_private_id.dart';
import 'package:example/screens/from_youtube.dart';
import 'package:flutter/material.dart';
import 'package:pod_player/pod_player.dart';

import 'screens/cutom_video_controllers.dart';
import 'screens/from_vimeo_id.dart';

void main() {
  PodVideoPlayer.enableLogs = true;
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      routes: {
        '/fromVimeoId': (context) => const PlayVideoFromVimeoId(),
        '/fromVimeoPrivateId': (context) => const PlayVideoFromVimeoPrivateId(),
        '/fromYoutube': (context) => const PlayVideoFromYoutube(),
        '/fromAsset': (context) => const PlayVideoFromAsset(),
        '/fromNetwork': (context) => const PlayVideoFromNetwork(),
        '/fromNetworkQualityUrls': (context) =>
            const PlayVideoFromNetworkQualityUrls(),
        '/customVideo': (context) => const CustomVideoControlls(),
      },
      home: const MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListView(
          shrinkWrap: true,
          children: [
            // _button('Play video from File'),
            _button(
              'Play video from Network',
              onPressed: () => Navigator.of(context).pushNamed('/fromNetwork'),
            ),
            _button(
              'Play video from Youtube',
              onPressed: () => Navigator.of(context).pushNamed('/fromYoutube'),
            ),
            _button(
              'Play video from Network quality urls',
              onPressed: () =>
                  Navigator.of(context).pushNamed('/fromNetworkQualityUrls'),
            ),
            _button(
              'Play video from Asset (with custom labels)',
              onPressed: () => Navigator.of(context).pushNamed('/fromAsset'),
            ),
            _button(
              'Play video from Vimeo',
              onPressed: () => Navigator.of(context).pushNamed('/fromVimeoId'),
            ),
            _button(
              'Play private video from Vimeo',
              onPressed: () =>
                  Navigator.of(context).pushNamed('/fromVimeoPrivateId'),
            ),
            _button(
              'Custom Video player',
              onPressed: () => Navigator.of(context).pushNamed('/customVideo'),
            ),
          ],
        ),
      ),
    );
  }

  Widget _button(String text, {void Function()? onPressed}) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: OutlinedButton(
          onPressed: onPressed ?? () {},
          child: Text(
            text,
            style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

Download details:

Author: newtaDev

Source: https://github.com/newtaDev/pod_player

#flutter #android #ios