Flutter GPU加速视频播放插件gpu_video_flutter的使用

Flutter GPU加速视频播放插件gpu_video_flutter的使用

现在该插件仅支持Android平台。

使用此插件，您可以：

  • 构建带有精美效果的视频。 …

需求

  • Android最低SDK版本：21

使用方法

要构建带有特效的视频，只需使用以下代码：

FLPluginView(
  filterProgress: 10,
  filterType: FilterType.BILATERAL_BLUR,
  videoUrl: 
    "https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4",
)
  • videoUrl: 您视频的URL
  • filterType: 您想要使用的滤镜类型
  • filterProgress: 从0到100的值，表示您希望如何应用滤镜

完整示例Demo

文件结构

example/
├── lib/
│   ├── main.dart
│   └── ...
└── ...

文件内容

example/lib/main.dart

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:gpu_video_flutter/movie_preview_view.dart';
import 'package:gpu_video_flutter/filter_type.dart';
import 'package:gpu_video_flutter/gpu_video_flutter.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MoviePreviewView(
    filterProgress: 10,
    filterType: FilterType.BILATERAL_BLUR,
    videoUrl:
        "https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4",
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息是异步的，因此我们在异步方法中初始化。
  Future<void> initPlatformState() async {
    String platformVersion;
    // 平台消息可能会失败，所以我们使用一个包含PlatformException的try/catch。
    // 我们还处理消息可能返回null的情况。
    try {
      platformVersion =
          await GPUVideoFlutterPlugin.platformVersion ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    // 如果小部件在异步平台消息仍在飞行时从树中移除，我们想丢弃回复而不是调用setState来更新我们的不存在的外观。
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Text('运行于: $_platformVersion\n'),
        ),
      ),
    );
  }
}

更多关于Flutter GPU加速视频播放插件gpu_video_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter GPU加速视频播放插件gpu_video_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


gpu_video_flutter 是一个用于在 Flutter 应用中实现 GPU 加速视频播放的插件。它利用了设备的 GPU 来解码和渲染视频，从而提供更高效的视频播放性能，特别是在处理高分辨率或高帧率视频时。以下是如何使用 gpu_video_flutter 插件的简要指南。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 gpu_video_flutter 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  gpu_video_flutter: ^latest_version

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 gpu_video_flutter 插件。

import 'package:gpu_video_flutter/gpu_video_flutter.dart';

3. 初始化视频播放器

在使用视频播放器之前，你需要初始化它。通常你可以在 initState 方法中进行初始化。

class VideoPlayerScreen extends StatefulWidget {
  [@override](/user/override)
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

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

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = GPUVideoPlayerController();
    _controller.initialize().then((_) {
      setState(() {}); // 初始化完成后更新 UI
    });
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GPU Video Player'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: GPUVideoPlayer(_controller),
              )
            : CircularProgressIndicator(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

4. 播放视频

你可以通过调用 _controller.setDataSource 方法来设置视频源。视频源可以是网络 URL、本地文件路径或资源文件。

_controller.setDataSource('https://www.example.com/video.mp4');

5. 控制视频播放

你可以使用 _controller 来控制视频的播放、暂停、跳转等操作。

_controller.play(); // 播放视频
_controller.pause(); // 暂停视频
_controller.seekTo(Duration(seconds: 10)); // 跳转到指定时间

6. 处理事件

你可以监听视频播放器的各种事件，如播放状态、缓冲状态、错误等。

_controller.addListener(() {
  if (_controller.value.hasError) {
    // 处理错误
  }
  if (_controller.value.isBuffering) {
    // 处理缓冲状态
  }
});

7. 自定义 UI

你可以根据需要自定义视频播放器的 UI，例如添加进度条、音量控制、全屏按钮等。

Slider(
  value: _controller.value.position.inSeconds.toDouble(),
  min: 0.0,
  max: _controller.value.duration.inSeconds.toDouble(),
  onChanged: (double value) {
    _controller.seekTo(Duration(seconds: value.toInt()));
  },
);

8. 处理全屏

你可以使用 _controller.setFullScreen(true) 来将视频播放器设置为全屏模式。

_controller.setFullScreen(true);

9. 处理横竖屏切换

你可以通过监听设备方向变化来动态调整视频播放器的布局。

[@override](/user/override)
void didChangeDependencies() {
  super.didChangeDependencies();
  // 监听设备方向变化
  WidgetsBinding.instance.addPostFrameCallback((_) {
    setState(() {
      // 根据方向调整布局
    });
  });
}
回到顶部