Flutter网页视频选择展示插件web_video_pick_show的使用

简介

web_video_pick_show 是一个用于在网页端选择和展示视频的 Flutter 插件。它可以帮助开发者轻松地实现视频的选择、播放和管理功能。

注意事项

警告:
该插件仅适用于 Web 平台，并且大量使用了 html.File。在其他平台上使用此包会导致编译时错误，此问题将在未来的版本中解决。

视频选择

单个视频选择

final _controller = WebVideoPickerController();

await controller.pickVideo();

// 或者
await controller.pickMultipleVideo();

// 确保处理 WebVideoPickShowException 异常

_controller.dispose(); // 在 Stateful Widget 的 dispose 方法中调用以避免内存泄漏

多个视频选择

与单个视频选择类似，只需调用 pickMultipleVideo() 方法即可。

视频展示

通过 ListenableBuilder 来监听控制器的状态变化，并根据数据渲染视频项。

ListenableBuilder(
  listenable: controller,
  builder: (context, _) {
    final data = controller.data;
    return ... // 渲染视频项
  },
);

示例效果:

如上图所示，两个红色框表示已选择的视频。您可以对这些视频进行以下操作：

controller.play(file); // 播放指定文件
controller.remove(index); // 删除指定索引的视频
controller.add(file); // 添加单个视频
controller.addMany([file1, file2]); // 批量添加多个视频
controller.addRemoveManually((item) => manage and return manually); // 手动管理添加或删除
controller.clear(); // 清空所有视频
controller.isVideoPlaying(fileWhichNeedToBeCheckedWhetherPlaying); // 检查是否正在播放某个视频

文件相等性判断

为了检查两个文件是否相等，扩展了 html.File 类：

html.File file1;
html.File file2;
print("file1.uniqueValue() == file2.uniqueValue()");

视频播放

使用内置播放器

EasyWebVideoShowWidget(
  controller: _controller,
),

自定义播放器

如果视频是从其他来源获取的，则可以使用自定义播放器：

CustomWebVideoShowWidget(
  uniqueKey: ValueKey(someUniqueValueToDifferentiateTwoFile),
  file: fileWhichMightBePickedFromSomeOtherSource,
),

错误处理

捕获并处理 WebVideoPickShowException 异常：

try {
  // Some action
} on WebVideoPickShowException catch (e, s) {
  // 使用 e.withoutOppsie() 而不是 e.toString()
  // 否则错误信息会显示为："Oppsie! File not found!"
} catch (e, s) {
  // Handle It
}

这是一个故意设计的小 Bug，目的是提醒开发者想起某位朋友的名字。

完整示例代码

以下是完整的示例代码，展示了如何使用 web_video_pick_show 插件：

import 'dart:developer';

import 'package:example/show_custom_toast.dart';
import 'package:flutter/material.dart';
import 'package:web_video_pick_show/web_video_pick_show.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _controller = WebVideoPickerController();

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              WebVideoPickerButton(controller: _controller),
              WebVideoPickedItemCard(controller: _controller),
              EasyWebVideoShowWidget(controller: _controller),
            ],
          ),
        ),
      ),
    );
  }
}

class WebVideoPickerButton extends StatelessWidget {
  final WebVideoPickerController controller;

  const WebVideoPickerButton({super.key, required this.controller});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextButton(
          onPressed: () async {
            _handleException(context, () async {
              await controller.pickVideo();
            });
          },
          child: const Text("Add"),
        ),
        TextButton(
          onPressed: () {
            _handleException(context, () async {
              await controller.pickMultipleVideo();
            });
          },
          child: const Text("Add Multiple"),
        ),
      ],
    );
  }

  void _handleException(BuildContext context, Future<void> Function() action) async {
    final scaffold = ScaffoldMessenger.of(context);
    try {
      await action();
    } on WebVideoPickShowException catch (e, s) {
      if (e.type == WebVideoPickShowExceptionType.noVideoPicked) return;
      scaffold.showSnackBar(errorSnackBar(e.toString()));
      log(s.toString());
    } catch (e, s) {
      scaffold.showSnackBar(errorSnackBar(e.toString()));
      log(s.toString());
    }
  }
}

class WebVideoPickedItemCard extends StatelessWidget {
  final WebVideoPickerController controller;

  const WebVideoPickedItemCard({super.key, required this.controller});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListenableBuilder(
      listenable: controller,
      builder: (context, _) {
        final data = controller.data;
        return Row(
          key: ValueKey(controller.data),
          children: [
            for (int i = 0; i < data.length; i++)
              Builder(builder: (context) {
                final isPlaying = controller.isVideoPlaying(data[i]);
                return Container(
                  color: Colors.red,
                  margin: const EdgeInsets.only(left: 20),
                  height: 250,
                  width: 250,
                  child: Column(
                    children: [
                      const Spacer(),
                      TextButton(
                        onPressed: () {
                          controller.remove(i);
                        },
                        child: const Text("Delete"),
                      ),
                      const Spacer(),
                      TextButton(
                        onPressed: () {
                          if (isPlaying) return;
                          controller.play(data[i]);
                        },
                        child: Text(isPlaying ? "Is Playing" : "Play"),
                      ),
                      const Spacer(),
                      Text(data[i].name),
                      const Spacer(),
                    ],
                  ),
                );
              }),
          ],
        );
      },
    );
  }
}