Flutter视频播放插件flexivideoplayer的使用

Flutter视频播放插件flexivideoplayer的使用

简介

flexivideoplayer 是一个基于 video_player 和 Chewie 的高级视频播放器插件，具有自定义控制功能。它提供了全屏支持、亮度和音量管理等功能，适用于需要定制化视频播放控件的应用。

功能特性

• 全屏视频支持：可以在全屏模式下播放视频。
• 全屏亮度管理支持：在全屏模式下可以调整屏幕亮度。
• 全屏音量管理支持：在全屏模式下可以调整音量。

安装

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

dependencies:
  flexivideoplayer: <latest_version>

请确保将 <latest_version> 替换为最新的版本号。

使用示例

以下是一个完整的示例代码，展示了如何使用 flexivideoplayer 插件来创建一个视频播放器：

import 'package:flexivideoplayer/flexivideoplayer.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:video_player/video_player.dart';

class FlexiDemo extends StatefulWidget {
  FlexiDemo({
    Key? key,
    this.title = 'Flexi Video Player Demo',
  }) : super(key: key);

  final String title;

  @override
  State<StatefulWidget> createState() {
    return _FlexiDemoState();
  }
}

class _FlexiDemoState extends State<FlexiDemo> {

  late VideoPlayerController _videoPlayerController1;
  FlexiController? _FlexiController;
  bool isSourceError = false;

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

  @override
  void dispose() {
    _videoPlayerController1.dispose();
    _FlexiController?.dispose();
    super.dispose();
  }

  Future<void> initializePlayer() async {
    setState(() {
      isSourceError = false;
    });
    try {
      // 初始化视频控制器
      _videoPlayerController1 = VideoPlayerController.network(
          "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4");

      await _videoPlayerController1.initialize();

      // 添加字幕
      final subtitles = [
        Subtitle(
          index: 0,
          start: const Duration(seconds: 0),
          end: Duration(seconds: _videoPlayerController1.value.duration.inSeconds),
          text: 'Whats up? :)',
        ),
      ];

      // 初始化 FlexiController
      _FlexiController = FlexiController(
        aspectRatio: 16 / 9, // 视频宽高比
        deviceOrientationsOnEnterFullScreen: [ // 进入全屏时的设备方向
          DeviceOrientation.landscapeLeft,
          DeviceOrientation.landscapeRight
        ],
        deviceOrientationsAfterFullScreen: [DeviceOrientation.portraitUp], // 退出全屏后的设备方向
        allowFullScreen: true, // 是否允许全屏
        fullScreenByDefault: true, // 默认进入全屏
        allowedScreenSleep: false, // 是否允许屏幕休眠
        videoPlayerController: _videoPlayerController1, // 视频控制器
        autoPlay: true, // 自动播放
        looping: true, // 循环播放
        errorBuilder: (context, errorMessage) { // 错误处理
          print("Error find : $errorMessage");
          return Center(
            child: Text(
              errorMessage,
              style: const TextStyle(color: Colors.white),
            ),
          );
        },
        additionalOptions: (context) { // 额外选项
          return <OptionItem>[
            OptionItem(
              onTap: toggleVideo, // 切换视频源
              iconData: Icons.live_tv_sharp,
              title: 'Toggle Video Src',
            ),
          ];
        },
        subtitle: Subtitles(subtitles), // 字幕
        subtitleBuilder: (context, dynamic subtitle) => Container(
          padding: const EdgeInsets.all(10.0),
          child: subtitle is InlineSpan
              ? RichText(
                  text: subtitle,
                )
              : Text(
                  subtitle.toString(),
                  style: const TextStyle(color: Colors.white),
                ),
        ),
        hideControlsTimer: const Duration(seconds: 3), // 控制栏隐藏时间
        isBrignessOptionDisplay: true, // 显示亮度调节选项
        isVolumnOptionDisplay: true, // 显示音量调节选项
        cupertinoProgressColors: FlexiProgressColors(
          playedColor: Colors.red, // 已播放部分的颜色
          handleColor: Colors.red, // 拖动手柄的颜色
          backgroundColor: Colors.grey, // 背景颜色
          bufferedColor: Colors.white.withOpacity(0.5), // 缓冲部分的颜色
        ),
      );

      setState(() {});
    } catch (exception) {
      setState(() {
        isSourceError = true;
      });
      print("exception : $exception");
    }
  }

  Future<void> toggleVideo() async {
    await initializePlayer();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: widget.title,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: Text(widget.title, style: TextStyle(fontSize: 14, color: Colors.black)),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Container(
                color: Colors.black,
                child: AspectRatio(
                  aspectRatio: 16 / 9,
                  child: isSourceError
                      ? Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(CupertinoIcons.exclamationmark_circle, color: Colors.white, size: 30),
                            SizedBox(height: 10),
                            Text('This video is unavailable', style: TextStyle(color: Colors.white, fontSize: 15)),
                            InkWell(
                              onTap: () {
                                initializePlayer();
                              },
                              child: Container(
                                height: 30,
                                width: 100,
                                alignment: Alignment.center,
                                child: Text("Reload again", style: TextStyle(color: Colors.red, fontSize: 13)),
                              ),
                            )
                          ],
                        )
                      : _FlexiController != null
                          ? Flexi(
                              controller: _FlexiController!,
                            )
                          : Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: const [
                                CircularProgressIndicator(strokeWidth: 2, color: Colors.red),
                                SizedBox(height: 20),
                                Text('Loading', style: TextStyle(color: Colors.white, fontSize: 15)),
                              ],
                            ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

其他信息

该插件仍在开发中，旨在添加更多自定义控件并提高性能。如果您发现任何问题或有改进建议，请随时反馈。感谢您的支持！

图片展示

竖屏模式	横屏模式

加载视图	错误视图

示例代码入口

在 main.dart 文件中，你可以直接运行 FlexiDemo：

import 'package:flutter/material.dart';
import 'package:example/app/app.dart'; // 请根据实际情况修改导入路径

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