Flutter视频播放器插件theoplayer的使用

概述

theoplayer 插件为 Flutter 应用提供了一个 THEOplayer 组件，支持在以下平台上进行视频播放：

• Android, Android TV & FireTV
• iOS
• HTML5 (web, mobile web)

本文档将介绍如何创建一个包含 THEOplayer 组件的最小应用程序，并概述附带的示例应用程序。

先决条件

要使用 THEOplayer SDK，需要从对应的平台获取有效的 THEOplayer 许可证。你可以通过 THEOplayer 门户 获取许可证。

如果你没有 Flutter 的基础，建议先查看 Flutter 文档。

使用指南

这些指南介绍了如何在你的 Flutter 项目中使用 THEOplayer Flutter SDK，可以线性阅读或直接查找特定部分。建议你对 Flutter 有一定的了解，以便更高效地使用 THEOplayer Flutter SDK。

特性

THEOplayer 支持不同的平台功能，具体特性如下表所示：

更多详细信息请参见官方文档。

开始使用

创建一个最小的应用程序

以下是创建一个最小的 THEOplayer Flutter 应用程序的步骤和示例代码：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:theoplayer/theoplayer.dart';

const PLAYER_LICENSE = "YOUR_LICENSE_KEY_HERE";

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late THEOplayer player;

  final _messengerKey = GlobalKey<ScaffoldMessengerState>();

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

    player = THEOplayer(
      theoPlayerConfig: THEOplayerConfig(
        license: PLAYER_LICENSE,
      ),
      onCreate: () {
        print("main - THEOplayer - onCreate");
        player.autoplay = true;
        player.allowBackgroundPlayback = true;
        player.allowAutomaticPictureInPicture = true;

        player.addEventListener(PlayerEventTypes.ERROR, (errorEvent) {
          var error = errorEvent as ErrorEvent;
          _messengerKey.currentState?.showSnackBar(
            SnackBar(
              duration: const Duration(milliseconds: 6000),
              backgroundColor: Colors.red,
              content: Text(error.error),
              action: SnackBarAction(
                label: 'OK',
                onPressed: () {},
              ),
            ),
          );
        });
      },
    );
  }

  @override
  void dispose() {
    player.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scaffoldMessengerKey: _messengerKey,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('THEOplayer example app'),
        ),
        body: Center(
          child: SizedBox(
            width: 400,
            height: 300,
            child: Stack(
              alignment: Alignment.center,
              children: [
                AspectRatio(
                  aspectRatio: 16 / 9,
                  child: THEOplayerView(player: player),
                ),
                PlayerUI(player: player),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class PlayerUI extends StatelessWidget {
  final THEOplayer player;

  PlayerUI({required this.player});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => {player.play()},
              child: const Text("PLAY"),
            ),
            ElevatedButton(
              onPressed: () => {player.pause()},
              child: const Text("PAUSE"),
            ),
          ],
        ),
      ],
    );
  }
}

设置播放源

player.source = SourceDescription(sources: [
  TypedSource(src: "https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8"),
]);

处理错误

player.addEventListener(PlayerEventTypes.ERROR, (errorEvent) {
  var error = errorEvent as ErrorEvent;
  _messengerKey.currentState?.showSnackBar(
    SnackBar(
      duration: const Duration(milliseconds: 6000),
      backgroundColor: Colors.red,
      content: Text(error.error),
      action: SnackBarAction(
        label: 'OK',
        onPressed: () {},
      ),
    ),
  );
});

全屏模式

player.setPresentationMode(PresentationMode.FULLSCREEN);

画中画模式

if (kIsWeb) {
  player.setPresentationMode(PresentationMode.PIP);
} else {
  player.allowAutomaticPictureInPicture = !player.allowAutomaticPictureInPicture;
}