How to make video thumbnail in flutter?

Question

I have a flutter app that shows the list of video files from internal storage...now I want to display thumbnails of videos in video list so how can I do this in my flutter app? If anyone have any Idea then please help me.

I am using ListBuilder widget.

Answer 1

You can use the video_thumbnail plugin too, like so:

For a video file:

final uint8list = await VideoThumbnail.thumbnailData(
  video: videofile.path,
  imageFormat: ImageFormat.JPEG,
  maxWidth: 128, // specify the width of the thumbnail, let the height auto-scaled to keep the source aspect ratio
  quality: 25,
);

OR from a video URL:

final uint8list = await VideoThumbnail.thumbnailFile(
  video: "https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4",
  thumbnailPath: (await getTemporaryDirectory()).path,
  imageFormat: ImageFormat.WEBP,
  maxHeight: 64, // specify the height of the thumbnail, let the width auto-scaled to keep the source aspect ratio
  quality: 75,
);

Answer 2

For Others. Use video player plugin as thumbnail. It's very effients comapare to those libraries and also works for ios.Just create statefullWidget as like item(if you want to show in list use that widget as item). See below example.

class _VideoItemState extends State<VideoItem> {
VideoPlayerController _controller;

@override
void initState() {
super.initState();
_controller = VideoPlayerController.network(widget.video.file.path)
  ..initialize().then((_) {
    setState(() {});  //when your thumbnail will show.
  });
}

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

@override
Widget build(BuildContext context) {
return ListTile(
  leading: _controller.value.initialized
      ? Container(
          width: 100.0,
          height: 56.0,
          child: VideoPlayer(_controller),
        )
      : CircularProgressIndicator(),
  title: Text(widget.video.file.path.split('/').last),
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) =>
            VideoPlayerPage(videoUrl: widget.video.file.path),
      ),
    );
  },
);
 }
}

Answer 3

1. Use the plugin thumbnails https://pub.dartlang.org/packages/thumbnails

2. Create a folder to store all thumbnails in phone storage.

3. Add this code in one function, code:

    String thumb = await Thumbnails.getThumbnail(
    thumbnailFolder: folderPath,
    videoFile: videoPathUrl,
    imageType: ThumbFormat.PNG,//this image will store in created folderpath
    quality: 30);
   

4. Now show that image in one container and onTap of that container/widget pass URL of video to open/play video.