Manually initialising video player does not work.

[ljmatan]

Trying to initialise VlcPlayerController, I get the following error:

E/flutter ( 6902): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: PlatformException(NullPointerException, java.lang.NullPointerException: Attempt to invoke virtual method 'long java.lang.Long.longValue()' on a null object reference, null, null)
E/flutter ( 6902): #0      VlcPlayerApi.create (package:flutter_vlc_player_platform_interface/src/messages/messages.dart:628:7)
E/flutter ( 6902): <asynchronous suspension>
E/flutter ( 6902): #1      MethodChannelVlcPlayer.create (package:flutter_vlc_player_platform_interface/src/method_channel/method_channel_vlc_player.dart:55:12)
E/flutter ( 6902): <asynchronous suspension>
E/flutter ( 6902): #2      VlcPlayerController.initialize (package:flutter_vlc_player/src/vlc_player_controller.dart:147:5)
E/flutter ( 6902): <asynchronous suspension>
E/flutter ( 6902): 
W/Gralloc4( 6902): allocator 3.x is not supported

My code:

import 'package:americonictv_ivrata_mobile/logic/api/models/category_videos.dart';
import 'package:flutter/material.dart';
import 'package:flutter_vlc_player/flutter_vlc_player.dart';

class VideoDetailsScreen extends StatefulWidget {
  final VideoEntry video;

  VideoDetailsScreen({@required this.video});

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

class _VideoDetailsScreenState extends State<VideoDetailsScreen> {
  VlcPlayerController _videoPlayerController;
  double _playerAspectRatio = 16 / 9;

  Set<String> _videoQualities;

  @override
  void initState() {
    super.initState();
    _videoQualities = {
      widget.video.videos.mp4.hd,
      widget.video.videos.mp4.sd,
      widget.video.videos.mp4.low
    };
    _videoQualities.removeWhere((element) => element == null);
    _videoPlayerController = VlcPlayerController.network(
        _videoQualities.elementAt(0) ?? '',
        autoInitialize: false,
        autoPlay: false,
        onInit: () => setState(() =>
            _playerAspectRatio = _videoPlayerController.value.aspectRatio));
  }

  Future<bool> _getLargeImage() async {
    await precacheImage(
      NetworkImage(widget.video.images.poster),
      context,
    );
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text(widget.video.title),
        actions: [
          IconButton(
            icon: Icon(Icons.close),
            onPressed: () => Navigator.pop(context),
          ),
        ],
      ),
      body: ListView(
        children: [
          GestureDetector(
            child: Stack(
              children: [
                SizedBox(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.width * 0.625,
                  child: FutureBuilder(
                    future: _getLargeImage(),
                    builder: (context, cached) => AnimatedCrossFade(
                      firstChild: Hero(
                        tag: widget.video.images.thumbsJpg,
                        child: Image.network(
                          widget.video.images.thumbsJpg,
                          width: MediaQuery.of(context).size.width,
                          height: MediaQuery.of(context).size.width * 0.625,
                          fit: BoxFit.cover,
                        ),
                      ),
                      secondChild: Image.network(
                        widget.video.images.poster,
                        width: MediaQuery.of(context).size.width,
                        height: MediaQuery.of(context).size.width * 0.625,
                        fit: BoxFit.cover,
                      ),
                      crossFadeState: cached.hasData
                          ? CrossFadeState.showSecond
                          : CrossFadeState.showFirst,
                      duration: const Duration(milliseconds: 200),
                    ),
                  ),
                ),
                DecoratedBox(
                  decoration: BoxDecoration(color: Colors.black54),
                  child: SizedBox(
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.width * 0.625,
                    child: Center(
                      child: Icon(
                        Icons.play_arrow,
                        color: Colors.white,
                        size: 64,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            onTap: () {
              showDialog(
                context: context,
                barrierDismissible: false,
                builder: (context) => Material(
                  color: Theme.of(context).primaryColor,
                  child: Stack(
                    children: [
                      Center(
                        child: VlcPlayer(
                          controller: _videoPlayerController,
                          aspectRatio: _playerAspectRatio,
                          placeholder: Center(
                            child: CircularProgressIndicator(),
                          ),
                        ),
                      ),
                      Positioned(
                        right: 0,
                        child: IconButton(
                          icon: Icon(Icons.close, color: Colors.white),
                          onPressed: () => Navigator.pop(context),
                        ),
                      ),
                    ],
                  ),
                ),
              );
              _videoPlayerController.initialize();
            },
          ),
          Padding(
            padding: const EdgeInsets.all(14),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                DecoratedBox(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(4),
                    color: Theme.of(context).accentColor,
                  ),
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(24, 12, 24, 12),
                    child: Text(
                      'Subscribe',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.w900,
                      ),
                    ),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.share, color: Colors.white),
                  onPressed: () {},
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 14),
            child: Text(
              widget.video.description,
              style: const TextStyle(
                color: Colors.white,
                fontSize: 12,
              ),
            ),
          ),
        ],
      ),
    );
  }

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

If initialising a player like this doesn't work, then how do I catch any errors during initialisation?

[alr2413]

You need to wait for variable "isReadyToInitialized" to be set true.
After that you can call initialize method.

[ljmatan]

Oh so both set into a widget and with this variable to true! Probably should be in docs.

[chapmanio]

You need to wait for variable "isReadyToInitialized" to be set true.
After that you can call initialize method.

How do I wait until isReadyToInitialized is true? There seems to be no callback I can use.

[alr2413]

you've to handle that manually, like registering a listener, or waiting in a while loop, or triggering a callback when the variable is updated.

[Technorocker]

Im looking at your example in the README and I dont see where you manually initialize the player. I'm getting a lateInitializationError in my logs when I try to start the player

E/flutter (31288): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: LateInitializationError: Field '_viewId@1012035241' has not been initialized.
E/flutter (31288): #0 VlcPlayerController._viewId (package:flutter_vlc_player/src/vlc_player_controller.dart)
package:flutter_vlc_player/src/vlc_player_controller.dart:1
E/flutter (31288): #1 VlcPlayerController.initialize
package:flutter_vlc_player/src/vlc_player_controller.dart:183
E/flutter (31288): #2 _CameraScreenState._startVideoPlayer
package:vext/screens/camera_screen.dart:124
E/flutter (31288): #3 _CameraScreenState.build.
package:vext/screens/camera_screen.dart:599
E/flutter (31288):
E/flutter (31288):
I/BufferQueueProducer(31288): SurfaceTexture-0-31288-2 queueBuffer: queued for the first time.
3
W/System (31288): A resource failed to call release.
I/MediaRecorderJNI(31288): finalize
I/MediaRecorderJNI(31288): release

In your example youre using a network source so you call it in oninit. I placed all the setup and calling in a method for a file that will be null till I record the video.

Future<void> _startVideoPlayer() async {
    if (_videoFile != null) {
      await _videoPlayerController!.initialize().then((_) {
        setState(() {
          _isVideoPlayerInitialized = true;
          debugPrint('Video player Initialized');
        });
      });
      _videoPlayerController = VlcPlayerController.file(
        _videoFile!,
        hwAcc: HwAcc.full,
        autoPlay: true,
      );
      await _videoPlayerController!.setLooping(true);
      await _videoPlayerController!.play();
      VlcPlayer(
        controller: _videoPlayerController!,
        aspectRatio: _camController!.value.aspectRatio,
        placeholder: const Center(
          child: CircularProgressIndicator(),
        ),
      );
    } else {
      debugPrint('Video File is empty');
    }
  }

Could someone please confirm or correct if this is a proper way to set this up.