Flutter音视频播放插件flutter_flex_player的使用

Flutter音视频播放插件flutter_flex_player的使用

简介

Flutter Flex Player 是一个用于播放视频的Flutter插件。它提供了一个灵活的视频播放器小部件，支持多种视频来源，包括资源文件、网络URL、本地文件和YouTube。通过Dart和Flutter构建，该插件可以轻松地将视频播放功能集成到您的Flutter应用程序中。

功能特性

• 支持从资源文件、网络URL、本地文件和YouTube播放视频。
• 可自定义的视频播放比例。
• 支持全屏模式。
• 提供多种播放控制，包括播放、暂停、快进、调整音量和播放速度。
• 支持初始化、位置变化、时长更新和播放器状态等流事件。

安装

在 pubspec.yaml 文件中添加 flutter_flex_player 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_flex_player: ^1.0.0 # 请替换为最新版本

运行 flutter pub get 来安装插件。

使用方法

导入包

在 Dart 文件中导入 flutter_flex_player 包：

import 'package:flutter_flex_player/flutter_flex_player.dart';
import 'package:flutter_flex_player/flutter_flex_player_controller.dart';
import 'package:flutter_flex_player/helpers/flex_player_sources.dart';

创建视频播放控制器

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

FlutterFlexPlayerController _controller = FlutterFlexPlayerController();

初始化视频播放器

在 widget 的 initState 方法中加载视频源：

[@override](/user/override)
void initState() {
  super.initState();
  _controller.load(
    NetworkFlexPlayerSource(
      "https://example.com/video.mp4", // 替换为实际的视频URL
    ),
    autoPlay: false, // 是否自动播放
    loop: true, // 是否循环播放
  );
}

构建视频播放器小部件

使用 FlutterFlexPlayer 小部件来显示播放器：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('VideoPlayerScreen'),
    ),
    body: Column(
      children: [
        FlutterFlexPlayer(
          _controller,
        ),
        const SizedBox(
          height: 50,
        ),
      ],
    ),
  );
}

类和方法

FlutterFlexPlayerController

• load(FlexPlayerSource source, {bool autoPlay = false, bool loop = false}): 加载视频源。
• play(): 播放视频。
• pause(): 暂停视频。
• stop(): 停止视频。
• seekTo(Duration position): 快进到视频中的特定位置。
• setVolume(double volume): 设置视频播放器的音量。
• setPlaybackSpeed(double speed): 设置播放速度。
• setLooping(bool looping): 启用或禁用循环播放。
• setMute(bool mute): 静音或取消静音。
• dispose(): 释放控制器。
• enterFullScreen(BuildContext context): 进入全屏模式。
• exitFullScreen(BuildContext context): 退出全屏模式。
• reload(): 重新加载当前视频。
• setQuality(String quality): 设置视频质量。

FlexPlayerSource

• AssetFlexPlayerSource(String asset): 资源文件视频源。
• NetworkFlexPlayerSource(String url): 网络URL视频源。
• FileFlexPlayerSource(File file): 本地文件视频源。
• YouTubeFlexPlayerSource(String videoId, {bool isLive = false, bool useIframe = false}): YouTube视频源。

枚举

• InitializationEvent: 表示播放器的初始化状态。
  • initializing
  • initialized
  • uninitialized
• PlayerState: 表示播放器的状态。
  • playing
  • paused
  • stopped
  • buffering
  • ended

示例代码

以下是一个完整的示例，展示了如何在Flutter应用中使用 flutter_flex_player 插件：

import 'package:flutter/material.dart';
import 'package:flutter_flex_player/flutter_flex_player.dart';
import 'package:flutter_flex_player/flutter_flex_player_controller.dart';
import 'package:flutter_flex_player/helpers/flex_player_sources.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const VideoPlayerScreen(),
              ),
            );
          },
          child: const Text("Play"),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  State<VideoPlayerScreen> createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late FlutterFlexPlayerController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = FlutterFlexPlayerController();
    _controller.load(
      NetworkFlexPlayerSource(
        "https://example.com/video.mp4", // 替换为实际的视频URL
      ),
      autoPlay: false,
      loop: true,
    );
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Video Player Screen'),
      ),
      body: Column(
        children: [
          FlutterFlexPlayer(
            _controller,
          ),
          const SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () {
                  _controller.play();
                },
                child: const Icon(Icons.play_arrow),
              ),
              ElevatedButton(
                onPressed: () {
                  _controller.pause();
                },
                child: const Icon(Icons.pause),
              ),
              ElevatedButton(
                onPressed: () {
                  _controller.stop();
                },
                child: const Icon(Icons.stop),
              ),
            ],
          ),
        ],
      ),
    );
  }
}