CODEWITHSUNDEEP
dartflutter
Yuvraj Desai
Yuvraj Desai

Reputation: 285

How to make video thumbnail in flutter?

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.

Upvotes: 20

Views: 63364

Answers (7)

V S
V S

Reputation: 1

Container(
      decoration: BoxDecoration(
        image: DecorationImage(
            image: CachedNetworkImageProvider(widget.thumbnail,),
          fit: BoxFit.cover
        )
      ),child:SizedBox(
                      width: _videoPlayerController!.value.size.width,
                      height: _videoPlayerController!.value.size.height,
                      child: VideoPlayer(_videoPlayerController!),
                    )
)

Use this container over the body to load thumbnail before initialize the video

Upvotes: 0

Hussnain Haidar
Hussnain Haidar

Reputation: 2258

For Others. Use video player plugin as thumbnail. It's very efficient compared to those libraries and also works for iOS. Just create StatefulWidget 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),
      ),
    );
  },
);
 }
}

Upvotes: 29

Jatin Sharma
Jatin Sharma

Reputation: 326

I used below code. Using video_compress: ^3.1.2

 void getVideoThumbnail(String file) async {
    Directory appDocDir = await getTemporaryDirectory();
    String appDocPath = appDocDir.path;
    String newPath = path.join(appDocPath,'${getRandomString(10)}.mp4');
    File filepath = await File(file).copy(newPath);
final thumbnailFile =
          await VideoCompress.getFileThumbnail(filepath.path, quality: 50);
}

ThumbnailQuality Range:- 1-100

For Generating Random Name use below code:

String getRandomString(int length) => String.fromCharCodes(Iterable.generate(
      length, (_) => _chars.codeUnitAt(_rnd.nextInt(_chars.length))));

Upvotes: 0

Y.C.
Y.C.

Reputation: 201

i crafted this by @Hussnain Haidar's answer.

class VideoThumbnail extends StatefulWidget {
  String videoPath;
  VideoThumbnail(this.videoPath);

  @override
  State<VideoThumbnail> createState() => _VideoThumbnailState();
}

class _VideoThumbnailState extends State<VideoThumbnail> {
  late VideoPlayerController _controller;

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

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      child: InkWell(
        child: _controller.value.isInitialized
            ? Container(
                width: 100.0,
                height: 56.0,
                child: VideoPlayer(_controller),
              )
            : Center(
                child: CircularProgressIndicator(),
              ),
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => VideoViewer(widget.videoPath), //VideoViewer
            ),
          );
        },
      ),
    );
  }
}

Upvotes: 3

Shihab Uddin
Shihab Uddin

Reputation: 6931

I used below code. Using video_thumbnail: ^0.5.3

  final thumbnailPath = await VideoThumbnail.thumbnailFile(
        video: aFile.path,
        imageFormat: ImageFormat.JPEG,
        timeMs: 1,
        quality: 50);

Make sure you store in application Document Directory. Specially for ios while saving the video file.

final Directory _appDocDir = await getApplicationDocumentsDirectory();

Upvotes: 2

olumide
olumide

Reputation: 146

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,
);

Upvotes: 11

Sujit Pasalkar
Sujit Pasalkar

Reputation: 25

  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.

Upvotes: 0

Related Questions