Flutter视频缩略图滑动插件video_thumbnail_slider的使用

video_thumbnail_slider 是一个用于Flutter的插件，它提供了一个可定制的视频缩略图滑动组件。这个组件允许你通过生成的视频缩略图来显示一个滑动条，方便用户导航和预览视频的不同部分。

Features

• 显示带有自定义设置的视频缩略图滑动条。
• 支持为滑动条中的每个帧自定义构建器。
• 通过与滑动条交互，可以跳转到视频的不同部分。

Preview

Getting Started

步骤1: 添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  video_thumbnail_slider: ^1.0.0

步骤2: 导入包

在你的 Dart 代码中导入该包：

import 'package:video_thumbnail_slider/video_thumbnail_slider.dart';

步骤3: 创建视频控制器

创建一个 VideoPlayerController 实例来控制视频播放：

VideoPlayerController _controller = VideoPlayerController.network('http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4');

步骤4: 使用 VideoThumbnailSlider 组件

在你的 Flutter UI 中使用 VideoThumbnailSlider 组件：

VideoThumbnailSlider(
  controller: _controller,
  height: 50,
  width: 350,
  splitImage: 7,
  backgroundColor: Colors.black,
  customCurrentFrameBuilder: (controller) => VideoPlayer(controller),
)

Usage

下面是一个基本的例子，展示如何使用 VideoThumbnailSlider 组件：

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:video_thumbnail_slider/video_thumbnail_slider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final VideoPlayerController _controller = VideoPlayerController.network('https://example.com/sample_video.mp4');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Video Thumbnail Slider Example'),
        ),
        body: Center(
          child: VideoThumbnailSlider(
            controller: _controller,
            height: 50,
            width: 350,
            splitImage: 7,
            backgroundColor: Colors.black,
            customCurrentFrameBuilder: (controller) => VideoPlayer(controller),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              _controller.play();
            }
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }
}

示例代码

以下是更详细的示例代码，展示了如何在应用中集成和使用 video_thumbnail_slider 插件：

import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:video_thumbnail_slider/video_thumbnail_slider.dart';

class SeltectThumbnailPage extends StatefulWidget {
  const SeltectThumbnailPage({required this.media, Key? key}) : super(key: key);
  final File media;

  @override
  State<SeltectThumbnailPage> createState() => _SeltectThumbnailPageState();
}

class _SeltectThumbnailPageState extends State<SeltectThumbnailPage> {
  late VideoPlayerController videoController = VideoPlayerController.file(widget.media);

  Future<bool?> initVideoController() async {
    await videoController.initialize();
    return true;
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [CupertinoButton(child: const Text('Save'), onPressed: () {})],
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: Column(
          children: [
            SizedBox(
              child: FutureBuilder(
                  future: initVideoController(),
                  builder: (context, snapshot) {
                    if (snapshot.data != null) {
                      return FittedVideoPlayer(
                        controller: videoController,
                        height: 400,
                      );
                    }
                    return const SizedBox();
                  }),
            ),
            const SizedBox(height: 16),
            VideoThumbnailSlider(
              controller: videoController,
              splitImage: 11,
              width: MediaQuery.of(context).size.width - 32,
              backgroundColor: const Color(0xff474545),
              frameBuilder: (imgData) => Container(
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.black.withOpacity(0.1), width: 0.5)),
                child: Image.memory(imgData, fit: BoxFit.cover),
              ),
              customCurrentFrameBuilder: (videoController) => Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(4),
                    border: Border.all(color: const Color(0xFFFF5858), width: 4)),
                child: VideoPlayer(videoController),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class FittedVideoPlayer extends StatefulWidget {
  const FittedVideoPlayer({required this.controller, this.height = 300, Key? key})
      : super(key: key);
  final VideoPlayerController controller;
  final double height;

  @override
  State<FittedVideoPlayer> createState() => _FittedVideoPlayerState();
}

class _FittedVideoPlayerState extends State<FittedVideoPlayer> {
  late double width = MediaQuery.of(context).size.width;
  late double height = widget.height;

  @override
  void initState() {
    super.initState();
  }

  void getVideoRatio() {
    if (widget.controller.value.isInitialized) {
      updateWidthHeight();
    }
  }

  void updateWidthHeight() {
    final ratio = widget.controller.value.aspectRatio;
    if (height * ratio <= width) {
      width = height * ratio;
    } else {
      height = width / ratio;
    }
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    updateWidthHeight();
    return Center(
      child: SizedBox(
        width: width,
        height: height,
        child: VideoPlayerView(
          videoController: widget.controller,
        ),
      ),
    );
  }
}

class VideoPlayerView extends StatefulWidget {
  const VideoPlayerView({
    this.videoController,
    this.media,
    this.autoPlay = true,
    Key? key,
  }) : super(key: key);
  final VideoPlayerController? videoController;
  final File? media;
  final bool autoPlay;

  @override
  State<VideoPlayerView> createState() => _VideoPlayerViewState();
}

class _VideoPlayerViewState extends State<VideoPlayerView> {
  late final VideoPlayerController _videoController =
      widget.videoController ?? VideoPlayerController.file(widget.media!);

  @override
  void initState() {
    initVideoController();
    super.initState();
  }

  void initVideoController() async {
    if (!_videoController.value.isInitialized) {
      await _videoController.initialize();
    }
    setState(() {});
    if (widget.autoPlay) {
      _videoController.play();
    }
  }

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

  void onVideoTap() {
    if (_videoController.value.isPlaying) {
      _videoController.pause();
    } else {
      _videoController.play();
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onVideoTap,
      child: VideoPlayer(_videoController),
    );
  }
}

Additional Information

• GitHub Repository

欢迎在 GitHub 上贡献、报告问题或请求功能。我们欢迎您的反馈和贡献！