Can I play video from base64 String in flutter?

Question

I have base64 String data for video. I want to play that video in my appl, so is there any way to convert it to file and then play or is there any method to directly play the video from base64 String ? Please suggest any solution..

Answer 1

You can do it by creating a file from b64 string and then passing it to the video controller. There are more than one way to create the file, some people use File.fromRawPath(Uint8List rawPath) but since this solution was not working properly for me in my project i had to do it in another way.

The way i did:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:sagae/core/util/image_b64_decoder.dart';
import 'package:video_player/video_player.dart';


class MovieTheaterBody extends StatefulWidget {
  final String encodedBytes;

  const MovieTheaterBody({Key key, this.encodedBytes}) : super(key: key);

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

class _MovieTheaterBodyState extends State<MovieTheaterBody> {
  Future<VideoPlayerController> _futureController;
  VideoPlayerController _controller;

  Future<VideoPlayerController> createVideoPlayer() async {
    final File file =
        await ImgB64Decoder.fileFromB64String(widget.encodedBytes);
    final VideoPlayerController controller = VideoPlayerController.file(file);
    await controller.initialize();
    await controller.setLooping(true);
    return controller;
  }

  @override
  void initState() {
    _futureController = createVideoPlayer();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: FutureBuilder(
        future: _futureController,
        builder: (context, snapshot) {
          //UST: 05/2021 - MovieTheaterBody - id:11 - 2pts - Criação
          if (snapshot.connectionState == ConnectionState.done) {
            _controller = snapshot.data as VideoPlayerController;
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                ),
                const SizedBox(
                  height: 50,
                ),
                FloatingActionButton(
                  onPressed: () {
                    setState(() {
                      if (_controller.value.isPlaying) {
                        _controller.pause();
                      } else {
                        // If the video is paused, play it.
                        _controller.play();
                      }
                    });
                  },
                  backgroundColor: Colors.green[700],
                  child: Icon(
                    _controller.value.isPlaying
                        ? Icons.pause
                        : Icons.play_arrow,
                  ),
                )
              ],
            );
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}