Flutter:视频预览功能

pubspec.yaml

# 复制代码
  media_kit: ^1.2.1                 # Primary package.
  media_kit_video: ^1.3.1          # For video rendering.
  media_kit_libs_video: ^1.0.7     # Native video dependencies.

main.dart 初始化

dart 复制代码
Future<void> main() async {
  runZonedGuarded(() async {
    WidgetsFlutterBinding.ensureInitialized();
    // Necessary initialization for package:media_kit.
    MediaKit.ensureInitialized();
    // 添加错误捕获
    FlutterError.onError = (FlutterErrorDetails details) {};
    await Global.init();
    runApp(const MyApp());
  }, (error, stackTrace) {});
}

使用方式

dart 复制代码
onTap(() {
	// 这里需要播放视频
	Get.to(() => VideoPreview(singleVideo: item.url ?? ''));
})

封装播放器

dart 复制代码
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:media_kit/media_kit.dart';
import 'package:media_kit_video/media_kit_video.dart';

/*

  视频预览组件
  使用方式:单个视频预览

  onTap(() {
    Get.to(() => VideoPreview(singleVideo: '视频url'));
  })

  注意:需要在 main() 函数中调用 MediaKit.ensureInitialized()

 */

class VideoPreview extends StatefulWidget {
  final String? singleVideo;

  const VideoPreview({
    super.key,
    this.singleVideo,
  });

  @override
  State<VideoPreview> createState() => _VideoPreviewState();
}

class _VideoPreviewState extends State<VideoPreview> {
  // Create a [Player] to control playback.
  late final player = Player();
  // Create a [VideoController] to handle video output from [Player].
  late final controller = VideoController(player);

  @override
  void initState() {
    super.initState();
    // Play a [Media] or [Playlist].
    if (widget.singleVideo != null && widget.singleVideo!.isNotEmpty) {
      player.open(Media(widget.singleVideo!));
    }
  }

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

  @override
  Widget build(BuildContext context) {
    if (widget.singleVideo == null || widget.singleVideo!.isEmpty) {
      return const SizedBox();
    }

    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.black,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(
            Icons.close,
            color: Colors.white,
            size: 24,
          ),
          onPressed: () => Get.back(),
        ),
      ),
      body: Center(
        child: Video(
          controller: controller,
          controls: MaterialVideoControls,
        ),
      ),
    );
  }
}
相关推荐
唐诺7 分钟前
flutter StreamController 完全使用指南
flutter·stream
光影少年10 分钟前
react离线缓存、图片缓存方案
开发语言·前端·javascript·react native·react.js·缓存·前端框架
美狐美颜SDK开放平台17 分钟前
第三方美颜SDK接入教程:直播APP实现实时美颜、滤镜与美型效果的方法
人工智能·深度学习·音视频·sdk·美颜sdk·视频美颜sdk·直播app开发
我命由我123459 小时前
CesiumJS 笔记 - 获取容器中心点、Cartesian3 clone 方法、修改 Cartesian3 对象的高度
前端·javascript·css·前端框架·html·html5·js
抱抱宝10 小时前
Agent-study项目教程(03):手写 Mini-ReAct Agent(不依赖框架)
javascript·人工智能·gpt·react.js·prompt·agent
用户9385156350710 小时前
Next.js 笔记系统(二):Redis 数据服务与侧边栏组件拆分实战
javascript·全栈
AI服务老曹12 小时前
边云协同视频分析性能优化指南:多站点部署下的资源瓶颈突破与调优实战
性能优化·音视频
Heo14 小时前
大厂前端调试不能只会debugger
前端·javascript·面试
wxson728215 小时前
【Android视频监控系统技术总结】
android·音视频
GitLqr15 小时前
玩转 Flutter 中的 Stack 与 Positioned:解决 UI 重叠问题的实战指南
flutter·面试·全栈