如何使视频缩略图在Flutter?

iih3973s  于 2022-11-30  发布在  Flutter
关注(0)|答案(5)|浏览(545)

我有一个flutter应用程序,显示来自内部存储的视频文件列表...***现在我想显示视频列表中的视频缩略图,所以我怎么能在我的flutter应用程序中做到这一点?***如果有人有任何想法,请帮助我。
我正在使用ListBuilder小部件。

eni9jsuy

eni9jsuy1#

对于其他人。使用video player插件作为缩略图。这是非常有效的比较,这些库,也适用于ios。只需创建statefullWidget作为类似的项目(如果你想显示在列表中使用该小部件作为项目)。见下例。

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

bfnvny8b2#

您也可以使用video_thumbnail插件,如下所示:
对于视频文件:

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

或从视频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,
);
xbp102n0

xbp102n03#

1.使用插件thumbnailshttps://pub.dartlang.org/packages/thumbnails
1.创建一个文件夹以将所有缩略图存储在手机存储中。
1.在一个函数中添加以下代码,代码:

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

1.现在在一个容器中显示该图像,并且container/widgetonTap将视频的URL传递给open/play视频。

sycxhyv7

sycxhyv74#

我使用了下面的代码。使用video_thumbnail:^0.5.3

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

确保您在应用程序文档目录中存储.特别是为ios保存视频文件时。

final Directory _appDocDir = await getApplicationDocumentsDirectory();
vd2z7a6w

vd2z7a6w5#

这是我根据@侯赛因·海达尔的回答精心制作的。

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

相关问题