Flutter视频播放插件yoyo_player的使用

YoYo Video Player 是一个用于 Flutter 的 HLS（.m3u8）视频播放器。它基于 video_player 插件，并在其基础上提供了基础架构，让开发者可以轻松创建自己的用户界面和功能。

功能

• 支持选择多个清晰度并播放。
• 点击视频可实现播放/暂停、静音/取消静音等功能。
• 自动隐藏控制栏。
• 支持 (.m3u8) HLS 视频流。

安装与设置

1. 添加依赖

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

dependencies:
  yoyo_player: #最新版本

2. 获取依赖

运行以下命令以安装依赖：

cd 项目目录
flutter packages get

3. 导入库

在需要使用该插件的页面中导入：

import 'package:yoyo_player/yoyo_player.dart';

使用方法

基本用法

以下是一个简单的示例：

YoYoPlayer(
  aspectRatio: 16 / 9, // 设置宽高比
  url: "", // 视频流地址
  videoStyle: VideoStyle(), // 自定义播放器样式
  videoLoadingStyle: VideoLoadingStyle(), // 自定义加载样式
)

修改图标

可以通过 videoStyle 修改播放器的图标：

videoStyle: VideoStyle(
  play: Icon(Icons.play_arrow), // 播放图标
  pause: Icon(Icons.pause), // 暂停图标
  fullscreen: Icon(Icons.fullscreen), // 全屏图标
  forward: Icon(Icons.skip_next), // 快进图标
  backward: Icon(Icons.skip_previous), // 快退图标
)

修改加载样式

通过 videoLoadingStyle 修改加载动画：

videoLoadingStyle: VideoLoadingStyle(
  loading: Center(
    child: Text("Loading video"), // 加载提示文字
  ),
)

播放带字幕的视频

示例如下：

body: YoYoPlayer(
  aspectRatio: 16 / 9,
  url: "https://sfux-ext.sfux.info/hls/chapter/105/1588724110/1588724110.m3u8", // HLS 视频流地址
  videoStyle: VideoStyle(),
  videoLoadingStyle: VideoLoadingStyle(
    loading: Center(
      child: Text("Loading video"),
    ),
  ),
),

播放器选项

播放器属性

播放器自定义样式 (VideoStyle)

播放器加载自定义样式 (VideoLoadingStyle)

如何创建？

1. 检查源 URL 中的数据（m3u8），根据规则创建并保存子 m3u8 文件。
2. 视频开始播放时立即创建子 m3u8 文件。
3. 每当视频完成或主 URL 更改时，检查并删除子 m3u8 文件。

子 m3u8 文件的创建规则

• 如果视频质量为 yoyo[视频质量].m3u8
• 如果视频质量和音频质量为 yoyo[视频质量][音频质量].m3u8

支持的 M3U8 标签

• #EXT-X-MEDIA
• #EXT-X-STREAM-INF

播放器截图

MIT 许可证

版权所有 © 2020 Ko Htut (Ko Min Than Htut)

此软件及其相关文档文件（“软件”）免费提供给任何人使用，无需限制，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件的副本，并允许他人将软件提供给他们使用，但须遵守以下条件：

• 版权声明和本许可通知应包含在所有副本或软件的重要部分中。
• 软件按“原样”提供，不作任何明示或暗示的保证，包括但不限于适销性、特定用途适用性和非侵权性的保证。在任何情况下，作者或版权持有人不对因使用或与软件相关的其他事务引起的任何索赔、损害或其他责任负责。

完整示例代码

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

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

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

class _MyAppState extends State<MyApp> {
  bool fullscreen = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      home: Scaffold(
        appBar: fullscreen == false
            ? AppBar(
                backgroundColor: Colors.blue,
                title: Image(
                  image: AssetImage('image/yoyo_logo.png'),
                  fit: BoxFit.fitHeight,
                  height: 50,
                ),
                centerTitle: true,
              )
            : null,
        body: Column(
          children: [
            YoYoPlayer(
              aspectRatio: 16 / 9,
              url:
                  "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", // 示例视频流地址
              videoStyle: VideoStyle(
                play: Icon(Icons.play_arrow),
                pause: Icon(Icons.pause),
                fullscreen: Icon(Icons.fullscreen),
                forward: Icon(Icons.skip_next),
                backward: Icon(Icons.skip_previous),
              ),
              videoLoadingStyle: VideoLoadingStyle(
                loading: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Image(
                        image: AssetImage('image/yoyo_logo.png'),
                        fit: BoxFit.fitHeight,
                        height: 50,
                      ),
                      Text("Loading video"),
                    ],
                  ),
                ),
              ),
              onfullscreen: (t) {
                setState(() {
                  fullscreen = t;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}