Flutter视频播放优化插件threadable_better_player的使用

Flutter视频播放优化插件threadable_better_player的使用

threadable_better_player 是一个基于 video_playerChewie 的高级视频播放器插件。它解决了许多常见的问题,并提供了更多的配置选项。此外,它还支持许多高级功能,如字幕、HLS、DASH 等。

简介

这个插件是在 Chewie 的基础上开发的。Chewie 是一个非常优秀的插件,在许多情况下表现良好。Better Player 是对 Chewie 中引入的想法的延续。Better Player 修复了常见错误,增加了更多的配置选项,并解决了典型的用例。

特性

  • ✔️ 修复了常见错误
  • ✔️ 增加了高级配置选项
  • ✔️ 重构了播放器控件
  • ✔️ 支持播放列表
  • ✔️ 在 ListView 中支持视频
  • ✔️ 支持字幕:(格式:SRT、WEBVTT,支持HTML标签;来自HLS的字幕;视频的多个字幕)
  • ✔️ 支持HTTP头
  • ✔️ 支持 BoxFit 视频
  • ✔️ 支持播放速度
  • ✔️ 支持HLS(轨道、字幕、音频轨道选择)
  • ✔️ 支持DASH(轨道、字幕、音频轨道选择)
  • ✔️ 支持替代分辨率
  • ✔️ 支持缓存
  • ✔️ 支持通知
  • ✔️ 支持画中画
  • ✔️ 支持DRM(令牌、Widevine、FairPlay EZDRM)
  • ✔️ 更多功能…

文档

重要信息

此插件正在开发中,每个版本可能会有破坏性的更改。这是一个免费的业余项目。如果你需要其他在 pub.dev 上可用的播放器支持的功能,可以自由地创建PR。所有有价值的贡献都是受欢迎的!

使用示例

以下是一个简单的示例,展示了如何在 Flutter 应用程序中使用 threadable_better_player 插件。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:better_player/better_player.dart'; // 导入 Better Player 插件

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Shortcuts(
      shortcuts: <LogicalKeySet, Intent>{
        LogicalKeySet(LogicalKeyboardKey.select): const ActivateIntent(),
      },
      child: MaterialApp(
        title: 'Better player demo',
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
        ],
        supportedLocales: [
          const Locale('en', 'US'),
          const Locale('pl', 'PL'),
        ],
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        home: HomePage(), // 使用主页
      ),
    );
  }
}

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

class _HomePageState extends State<HomePage> {
  BetterPlayerController _betterPlayerController;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化 Better Player 控制器
    _betterPlayerController = BetterPlayerController(BetterPlayerConfiguration(
      aspectRatio: 16 / 9,
      autoPlay: true,
      looping: false,
    ));

    // 设置视频源
    _betterPlayerController.setupDataSource(
      BetterPlayerDataSource(
        BetterPlayerDataSourceType.network,
        "https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4",
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Better Player Demo"),
      ),
      body: Center(
        child: BetterPlayer(
          controller: _betterPlayerController, // 使用控制器
        ),
      ),
    );
  }
}

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

1 回复

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


threadable_better_player 是一个基于 better_player 的 Flutter 视频播放插件,旨在通过多线程技术优化视频播放性能,尤其是在处理高分辨率视频或复杂 UI 场景时。以下是如何使用 threadable_better_player 插件的详细步骤:

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 threadable_better_player 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  threadable_better_player: ^0.0.1  # 请根据实际情况使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在需要使用 threadable_better_player 的 Dart 文件中导入包:

import 'package:threadable_better_player/threadable_better_player.dart';

3. 创建播放器控制器

使用 ThreadableBetterPlayerController 来管理视频播放。你可以通过 ThreadableBetterPlayerDataSource 来设置视频源和其他配置。

ThreadableBetterPlayerController _controller;

[@override](/user/override)
void initState() {
  super.initState();
  _controller = ThreadableBetterPlayerController(
    ThreadableBetterPlayerConfiguration(
      autoPlay: true,
      looping: false,
    ),
    betterPlayerDataSource: ThreadableBetterPlayerDataSource(
      ThreadableBetterPlayerDataSourceType.network,
      "https://www.example.com/video.mp4",  // 替换为你的视频URL
    ),
  );
}

4. 创建播放器视图

使用 ThreadableBetterPlayer 小部件来显示视频播放器:

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Threadable Better Player'),
    ),
    body: Center(
      child: ThreadableBetterPlayer(
        controller: _controller,
      ),
    ),
  );
}

5. 释放资源

在页面销毁时,确保释放播放器控制器以释放资源:

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

6. 其他功能

threadable_better_player 提供了许多与 better_player 相似的功能,例如:

  • 播放控制:播放、暂停、停止、跳转等。
  • 全屏播放:支持全屏播放模式。
  • 字幕:支持加载和显示字幕。
  • 事件监听:可以监听播放事件,如播放完成、缓冲开始/结束等。

你可以根据需要进一步配置和使用这些功能。

7. 示例代码

以下是一个完整的示例代码,展示了如何使用 threadable_better_player 插件播放网络视频:

import 'package:flutter/material.dart';
import 'package:threadable_better_player/threadable_better_player.dart';

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

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  ThreadableBetterPlayerController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = ThreadableBetterPlayerController(
      ThreadableBetterPlayerConfiguration(
        autoPlay: true,
        looping: false,
      ),
      betterPlayerDataSource: ThreadableBetterPlayerDataSource(
        ThreadableBetterPlayerDataSourceType.network,
        "https://www.example.com/video.mp4",  // 替换为你的视频URL
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Threadable Better Player'),
      ),
      body: Center(
        child: ThreadableBetterPlayer(
          controller: _controller,
        ),
      ),
    );
  }

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

void main() => runApp(MaterialApp(
  home: VideoPlayerScreen(),
));
回到顶部