flutterdartvideoassets

how to show video with video player in flutter


how to show video in flutter?

i should recieve an api have url of video to show, but it sitll white page with my progress indicator, I was trying for a week but couldn't do any thing, then I tried to use assets video but it didn't work too here is my code so what is wrong?

please help me, thank you.

class _MyHomePageState extends State<MyHomePage> {
  VideoPlayerController _videoPlayerController;
  Future<void> _initializedVideoPlayerFuture;
  String videoUrl =
      'https://storage.koolshy.co/shasha-transcoded-videos-2019/1c18ada9-a82a-4490-ad2f-87c3ba3ed251_240.mp4';
  String videoTrack = 'assets/video.mp4';
  @override
  void initState() {
    super.initState();
//    _videoPlayerController = VideoPlayerController.network(videoUrl);
    _videoPlayerController = VideoPlayerController.asset(videoTrack);
    _videoPlayerController.setLooping(true);
    _videoPlayerController.setVolume(1.0);
  }

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

  void _incrementCounter() {
    setState(() {
      _videoPlayerController.value.isPlaying
          ? _videoPlayerController.pause()
          : _videoPlayerController.play();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FutureBuilder(
              future: _initializedVideoPlayerFuture,
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  return AspectRatio(
                    aspectRatio: _videoPlayerController.value.aspectRatio,
                    child: VideoPlayer(_videoPlayerController),
                  );
                } else {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                }
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'play/pause',
        child: Icon(_videoPlayerController.value.isPlaying
            ? Icons.pause
            : Icons.play_arrow),
      ),
    );
  }
}


Solution

  • there is a missing statement

        _initializedVideoPlayerFuture = _videoPlayerController.initialize();
    

    should be in the initstate()

      void initState() {
        super.initState();
        _videoPlayerController = VideoPlayerController.network(videoUrl);
    //    _videoPlayerController = VideoPlayerController.asset(videoTrack);
        _initializedVideoPlayerFuture = _videoPlayerController.initialize();
    
        _videoPlayerController.setLooping(true);
        _videoPlayerController.setVolume(1.0);
      }