Flutter视频播放插件flutter_video_view的使用

Flutter视频播放插件flutter_video_view的使用

语言: 中文 | English

flutter_video_view 是一个用于 Flutter 的视频播放器。<a href="https://pub.dev/packages/video_player">video_player</a> 插件提供了低级别的视频播放访问。

安装

请参阅 <a href="https://pub.dev/packages/video_player">video_player</a> 的具体配置步骤。

⚠️ 注意：无需在 pubspec.yaml 文件中添加 video_player 依赖。

使用前准备

版本约束

  sdk: ">=3.2.3 <4.0.0"
  flutter: ">=3.16.6"

依赖

1. 在 pubspec.yaml 文件中添加 flutter_video_view 依赖。

dependencies:
  flutter_video_view: ^最新版本

1. 执行 Flutter 命令以获取包。

flutter pub get

1. 引入包

import 'package:flutter_video_view/flutter_video_view.dart';

本地化配置

在 MaterialApp 中添加。

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        ...
        localizationsDelegates: const <LocalizationsDelegate<dynamic>>[
            ...
            VideoViewLocalizationsDelegate.delegate,
        ],
        ...
    );
  }
}

使用方法

import 'package:flutter_video_view/flutter_video_view.dart';

final VideoPlayerController videoPlayerController = VideoPlayerController.xxx();

final view = VideoView(
  controller: VideoViewController(
    videoPlayerController: videoPlayerController,
    videoViewConfig: VideoViewConfig(),
  ),
);

弹出窗口是通过使用 <a href="https://github.com/LiWenHui96/flutter_video_view/blob/main/lib/src/video_config.dart" rel="ugc">VideoViewConfig</a> 实现的。

示例代码

以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_video_view/flutter_video_view.dart';

import 'page_video.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await redoSystemStyle();

  runApp(const MyApp());
}

/// 程序入口
class MyApp extends StatefulWidget {
  // ignore: public_member_api_docs
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const <LocalizationsDelegate<dynamic>>[
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        VideoViewLocalizations.delegate,
      ],
      supportedLocales: const <Locale>[Locale('en', 'US'), Locale('zh', 'CN')],
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
      routes: <String, WidgetBuilder>{'video': (_) => const VideoPage()},
      title: 'Video View Example',
    );
  }
}

/// 主页
class HomePage extends StatefulWidget {
  // ignore: public_member_api_docs
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String url = 'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4';

  [@override](/user/override)
  Widget build(BuildContext context) {
    final Widget child = Center(
      child: ElevatedButton(
        onPressed: () async =>
            Navigator.pushNamed(context, 'video', arguments: url),
        child: const Text('视频'),
      ),
    );

    return Scaffold(
      appBar: AppBar(title: const Text('Video View Example')),
      body: SizedBox(width: double.infinity, child: child),
    );
  }
}

/// 处理状态栏和导航栏
Future<void> redoSystemStyle({bool isPortrait = true}) async {
  if (isPortrait) {
    await SystemChrome.setPreferredOrientations(<DeviceOrientation>[
      DeviceOrientation.portraitUp,
    ]);
  } else {
    await SystemChrome.setPreferredOrientations(<DeviceOrientation>[
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
  }

  await SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.manual,
    overlays: SystemUiOverlay.values,
  );

  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
      systemNavigationBarContrastEnforced: true,
    ),
  );
}