youtube_player_flutter 6.0.3+2

  • Readme
  • Changelog
  • Example
  • Installing
  • 98

YOUTUBE PLAYER FLUTTER

pub package Build Status licence Download Stars Top Language effective dart

Flutter plugin for playing or streaming YouTube videos inline using the official iFrame Player API.

Supported Platforms:

  • Android
  • iOS

DEMO

Salient Features #

  • Inline Playback
  • Supports captions
  • No need for API Key
  • Supports custom controls
  • Retrieves video meta data
  • Supports Live Stream videos
  • Supports changing playback rate
  • Support for both Android and iOS
  • Adapts to quality as per the bandwidth
  • Fast Forward and Rewind on horizontal drag
  • Fit Videos to wide screens with pinch gestures

The plugin uses webview_flutter under-the-hood to play videos.

Since webview_flutter relies on Flutter's new mechanism for embedding Android and iOS views, this plugin might share some known issues tagged with the platform-views and/or webview labels.

Setup #

iOS #

Opt-in to the embedded views preview by adding a boolean property to the app's Info.plist file with the key io.flutter.embedded_views_preview and the value YES.

Android #

No configuration required - the plugin should work out of the box.

Using Youtube Player #

YoutubePlayerController _controller = YoutubePlayerController(
    initialVideoId: 'iLnmTe5Q2Qw',
    flags: YoutubePlayerFlags(
        autoPlay: true,
        mute: true,
    ),
);

YoutubePlayer(
    controller: _controller,
    showVideoProgressIndicator: true,
    videoProgressIndicatorColor: Colors.amber,
    progressColors: ProgressColors(
        playedColor: Colors.amber,
        handleColor: Colors.amberAccent,
    ),
    onReady () {
        _controller.addListener(listener);
    },
),

Playing live stream videos #

Set the isLive property to true in order to change the UI to match Live Video.

Live UI Demo

YoutubePlayerController _controller = YoutubePlayerController(
    initialVideoId: 'iLnmTe5Q2Qw',
    flags: YoutubePLayerFlags(
      isLive: true,
    ),
);

YoutubePlayer(
    controller: _controller,
    liveUIColor: Colors.amber,
),

Want to customize the player? #

With v5.x.x and up, use the topActions and bottomActions properties to customize the player.

Some of the widgets bundled with the plugin are:

  • FullScreenButton
  • RemainingDuration
  • CurrentPosition
  • PlayPauseButton
  • PlaybackSpeedButton
  • ProgressBar
YoutubePlayer(
    controller: _controller,
    bottomActions: [
      CurrentPosition(),
      ProgressBar(isExpanded: true),
      TotalDuration(),
    ],
),

Want to play using Youtube URLs ? #

The plugin also provides convertUrlToId() method that converts youtube links to its corresponding video ids.

String videoId;
videoId = YoutubePlayer.convertUrlToId("https://www.youtube.com/watch?v=BBAyRBTfsOU");
print(videoId); // BBAyRBTfsOU

Example #

Detailed Example

Download #

Download APKs from above(in badge) and try the plugin. APKs are available in Assets of Github release page.

Limitation #

Since the plugin is based on platform views. This plugin requires Android API level 20 or greater.

If you only want to target Android and need support for Android Kitkat or less, then you can use youtube_player.

License #

Copyright 2019 Sarbagya Dhaubanjar. All rights reserved.

Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google Inc. nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

6.0.3+2 #

  • (New Feature) Pinch in/out on the player to fit video.
  • (Improvements) Video plays in high definition, if supported.

6.0.3+1 #

  • Moved videoId, title, author and duration to separate YoutubeMetaData class.
  • (Fixed) Issue with invalid video id being shown while switching to fullscreen. Issue #118

6.0.2 #

  • Added onEnded callback for YoutubePlayer widget. (Fixes #108)
  • Removed isEvaluationReady & isLoaded flags as it had no use anyway.
  • Added controlsVisibleAtStart flag. (Fixes #113)

6.0.1 #

  • (New Feature) Added title and author property to YoutubePlayerController.
  • Removed DataConnectionChecker dependency.
  • Removed start and end from flags as it wasn't functioning anyway.
  • (Improvement) Implemented effective dart lints.
  • (Improvement) Changed thumbnails to fetch webp format.
  • (Fixed) Issue with Live UI Issue #115.

6.0.0 #

  • (Improvement) Smooth fullscreen toggle and crash fix. Issue #46 & Issue #105
  • (Fixed) Issue #93.
  • (Fixed) PlayerState.ended being call multiple times. Issue #108
  • (Improvement) Exposed controller parameter to all widgets. Issue #109. This comes handy when the widgets are to used outside the context of YoutubePlayer widget.
  • (Improvement) UI and performance optimizations.

BREAKING CHANGES

  • From now on, YoutubePlayerController is to be passed to the player explicitly. (See the updated readme)
  • Removed context and videoId properties from YoutubePlayer.
  • flags property is moved to YoutubePlayerController from YoutubePlayer. Since flags were only needed for the first time when player initializes.
  • showVideoProgressIndicator property moved to YoutubePlayer.

5.2.0+1

  • (Fixed) aspect ratio in fullscreen mode.
  • (Fixed) sometimes showing up buffering indicator instead of error.

5.2.0 #

BREAKING CHANGES

  • Renamed videoId property in YoutubePlayer to initialVideoId.
  • From now on changing video id must be done using either load() or cue().
  • (Fixed) Video playing sound only, on videoId change. Issue #99
  • (Improvement) Minor optimizations.
  • Example updated with video list.
  • Added PlayerState.stopped.
  • Added actionsPadding property.

5.1.0 #

  • Renamed TotalDuration widget to RemainingDuration.
  • Renamed PlayButton widget to PlayPauseButton.
  • (Improvement) Better handling of invalid video id.
  • (Improvement) Better video orientation handling.
  • (Improvement) Better play/pause handling w/r/t app lifecycle.
  • (Fixed) Video pausing after jumping to certain position using progress bar.
  • BREAKING Switched back to webview_flutter.
  • Updated dart docs.

5.0.0+1 #

BREAKING CHANGES

  • Everything is modular now. See the docs for details.
  • Automatically switches to landscape on fullscreen mode.
  • Added proper display of errors and detects internet connection status.
  • Workarounds for iOS.
  • webview_flutter is swapped with ytview. If you've been using WebView widget, then consider changing import paths to ytview instead.
  • Added flags to enable/disable caption and looping.
  • Added flags to change caption language, start and end time of video.

4.1.0 #

  • Feature Added Button to change playback rate in player.
  • Added setPlaybackRate method to YoutubePlayerController. Issue #48
  • (Improvement) Playback behaviour synced with AppLifeCycle Issue #41

4.0.0+2 #

  • Fix error reports in LiveUI. PR#44
  • Added startAt property.

4.0.0+1 #

BREAKING CHANGES

  • YoutubePLayerScaffold has been removed.
  • Improved Orientations
  • Uses webview_flutter instead of ytview

3.0.0 #

  • BREAKING CHANGES See Migrating to 3.x.x for detail.
  • Faster fullscreen toggling.
  • Toggles fullscreen on orientation change. Issue #3.
  • Option to add own custom thumbnail.
  • (Fixed) Video stuck at unknown state Issue #24.
  • Added hideThumbnail and disableDragSeek flags. #27, #29.
  • (Fixed) Fullscreen toggle in iOS.
  • Minor UI improvements here and there.

2.0.0 #

  • (Fixed) iOS playback is fully functional. Issue #2
  • Added forceHideAnnotation property which hides the default YouTube annotation. Read Issue #17 for detail
  • Added option to mute player.

1.2.0 #

  • Added actions property, which can be used to add menus in top bar of video. See example for details.
  • Added option to hide fullscreen button.
  • (Fixed) Current position always showing 00:00 Issue #17

1.1.1+1 #

  • Updated dart constraint to >=2.2.0 <3.0.0*.
  • (Fixed) Parsing Exceptions.

1.1.1 #

  • Fix for issue #12.
  • WebView is now exported alongside YoutubePlayer.

1.1.0 #

  • Minor Improvements.
  • Built and tested on iOS device.
  • Migrated to AndroidX.
  • Removed warnings on iOS builds.

1.0.1+1 #

  • Added Travis CI.

1.0.1 #

  • (Fixed) Error while building for iOS.

1.0.0+2 #

  • (Fixed) Video pausing on tapped, when controls were hidden.

1.0.0+1 #

  • Added Download APK badge.

1.0.0 #

  • Initial Release.
  • Includes Dart Documentation.
  • Includes support for Live Videos.
  • Includes fast forward and rewind feature.

example/README.md

Youtube Player for Flutter Example #

Detailed Example

YoutubePlayerController _controller;

@override
void initState(){
    _controller = YoutubePlayerController(
        initialVideoId: 'iLnmTe5Q2Qw',
        flags: YoutubePlayerFlags(
            mute: false,
            autoPlay: true,
            forceHideAnnotation: true,
        ),
    );
    super.initState();
}

@override
Widget build(BuildContext context){
    return YoutubePlayer(
       controller: _controller,
       showVideoProgressIndicator: true,
       videoProgressIndicatorColor: Colors.amber,
       progressColors: ProgressColors(
          playedColor: Colors.amber,
          handleColor: Colors.amberAccent,
       ),
       onReady: () {
          print('Player is ready.');
       },
    );
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  youtube_player_flutter: ^6.0.3+2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:


import 'package:youtube_player_flutter/youtube_player_flutter.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
97
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
98
Learn more about scoring.

We analyzed this package on Jan 16, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Health suggestions

Fix lib/src/utils/youtube_player_controller.dart. (-0.50 points)

Analysis of lib/src/utils/youtube_player_controller.dart reported 1 hint:

line 174 col 17: 'inheritFromWidgetOfExactType' is deprecated and shouldn't be used. Use dependOnInheritedWidgetOfExactType instead. This feature was deprecated after v1.12.1..

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.5.0 <3.0.0
flutter 0.0.0
webview_flutter >=0.3.15 <1.0.0 0.3.19+5
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test
mockito ^4.1.1