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

简介

Teyuto 提供了一套无缝的解决方案来管理您的视频分发需求。无论您需要云上的视频分发、OTT平台上的内容发布、存储，还是公共OTT平台或安全内网内的分发，Teyuto 都能让您轻松管理视频内容。

Teyuto Flutter Player 是一个 Flutter 库，允许您在 Flutter 应用程序中嵌入 Teyuto 视频播放器。

开始使用

安装

在您的项目 pubspec.yaml 文件中添加以下依赖：

dependencies:
  teyuto_player: ^1.0.1

然后运行以下命令以获取依赖：

flutter pub get

基本集成

导入库

首先，在您的 Dart 文件中导入 teyuto_player 包：

import 'package:teyuto_player/TeyutoPlayer.dart';

使用 TeyutoPlayer 小部件

在您的小部件树中使用 TeyutoPlayer 小部件：

import 'package:flutter/material.dart';
import 'package:teyuto_player/TeyutoPlayer.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey<TeyutoPlayerState> _teyutoPlayerKey = GlobalKey();
  bool playing = false;
  double? time;

  // 播放事件处理
  void handlePlay() {
    print("Video is playing");
    setState(() {
      playing = true;
    });
  }

  // 暂停事件处理
  void handlePause() {
    print("Video is paused");
    setState(() {
      playing = false;
    });
  }

  // 时间更新事件处理
  void handleTimeUpdate(double _time) {
    setState(() {
      time = _time;
    });
  }

  // 播放视频
  void playPlayer() {
    final TeyutoPlayerState? playerState = _teyutoPlayerKey.currentState;
    if (playerState != null) {
      playerState.play();
      setState(() {
        playing = true;
      });
    }
  }

  // 暂停视频
  void pausePlayer() {
    final TeyutoPlayerState? playerState = _teyutoPlayerKey.currentState;
    if (playerState != null) {
      playerState.pause();
      setState(() {
        playing = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Teyuto Player SDK Example'),
        ),
        body: Stack(
          children: [
            // 视频播放器
            Center(
              child: TeyutoPlayer(
                key: _teyutoPlayerKey,
                obj: {
                  'id': '46760', // 视频ID
                  'channel': '30Y8zKKY9H3IUaImUidzCqa5852a1cead3fb2b2ef79cf6baf04909', // 渠道ID
                  'options': {'autoplay': 'on'} // 自定义选项
                },
                onPlay: handlePlay, // 播放回调
                onPause: handlePause, // 暂停回调
                onTimeUpdate: (_time) => handleTimeUpdate(_time), // 时间更新回调
              ),
            ),
            // 显示播放状态和当前时间
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  playing ? "Playing" : "Pause",
                  style: const TextStyle(
                    color: Colors.grey,
                  ),
                ),
                Text(
                  time?.toString() ?? "",
                  style: const TextStyle(
                    color: Colors.grey,
                  ),
                ),
              ],
            )
          ],
        ),
        // 悬浮按钮用于控制播放/暂停
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            handleFloatingActionButtonTap();
          },
          child: playing ? Icon(Icons.pause_circle) : Icon(Icons.play_arrow),
        ),
      ),
    );
  }

  // 处理悬浮按钮点击事件
  void handleFloatingActionButtonTap() {
    if (playing) {
      pausePlayer();
    } else {
      playPlayer();
    }
  }
}

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

播放器选项

可以通过 obj 参数自定义播放器的行为：

TeyutoPlayer(
  obj: {
    'id': 'VIDEO_ID', // 视频ID
    'channel': 'CHANNEL_ID', // 渠道ID
    'options': {
      'autoplay': 'on', // 自动播放
      'muted': 'off', // 关闭声音
      'controls': 'on', // 显示控制栏
      // 添加更多选项
    }
  },
  onPlay: () {
    print("Video is playing");
  },
  onPause: () {
    print("Video is paused");
  },
  onTimeUpdate: (double time) {
    print("Current time: $time");
  },
  onVolumeChange: (double volume) {
    print("Current volume: $volume");
  },
)

控制播放器

可以使用以下方法对播放器进行编程控制：

• play()：开始播放。
• pause()：暂停播放。
• setCurrentTime(double time)：跳转到指定时间。
• mute()：静音。
• unmute()：取消静音。
• setVolume(double volume)：设置音量。
• getCurrentTime()：获取当前播放时间。
• getVolume()：获取当前音量。

示例代码：

void playPlayer() {
  final TeyutoPlayerState? playerState = _teyutoPlayerKey.currentState;
  if (playerState != null) {
    playerState.play();
    setState(() {
      playing = true;
    });
  }
}

void pausePlayer() {
  final TeyutoPlayerState? playerState = _teyutoPlayerKey.currentState;
  if (playerState != null) {
    playerState.pause();
    setState(() {
      playing = false;
    });
  }
}

事件处理

通过回调函数处理各种播放器事件：

TeyutoPlayer(
  obj: {
    'id': 'VIDEO_ID',
    'channel': 'CHANNEL_ID',
    'options': {
      'autoplay': 'on',
    }
  },
  onPlay: () {
    print("Video is playing");
  },
  onPause: () {
    print("Video is paused");
  },
  onTimeUpdate: (double time) {
    print("Current time: $time");
  },
  onVolumeChange: (double volume) {
    print("Current volume: $volume");
  },
)