Flutter HLS视频播放插件custom_hls_video的使用

Flutter HLS视频播放插件custom_hls_video的使用

Custom HLS视频播放插件是Lecle YoYo视频播放器的改进版，专为Flutter设计，支持HLS（.m3u8）视频流。它基于yoyo_player包，并封装了video_player，为开发者提供了创建自定义UI和功能的基础架构。

该插件已更新了更多可定制属性并修复了来自旧版本的报告问题。

特性

• 可以选择多个质量并打开
• 视频点击可以播放/暂停、静音/取消静音或执行其他操作
• 控制器自动隐藏
• 支持(.m3u8) HLS视频流

安装与设置

Android

在<项目根目录>/android/app/src/main/AndroidManifest.xml文件中添加以下权限：

<uses-permission android:name="android.permission.INTERNET"/>

iOS

如果需要通过http（而不是https）URL访问视频，则必须在应用程序的<项目根目录>/ios/Runner/Info.plist文件中添加适当的NSAppTransportSecurity权限。

在Xcode中，将项目的部署目标更改为11。

项目

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

dependencies:
  custom_hls_video: #最新版本

1. 安装依赖项（如果已自动安装则忽略）

cd 项目目录
flutter pub get

1. 在页面中引入库

import 'package:custom_hls_video/lecle_yoyo_player.dart';

使用

一个简单的使用示例：

YoYoPlayer(
  aspectRatio: 16 / 9,
  url: "视频URL",
  videoStyle: VideoStyle(),
  videoLoadingStyle: VideoLoadingStyle(),
),

更改图标

videoStyle: VideoStyle(
  playIcon: Icon(Icons.play_arrow),
  pauseIcon: Icon(Icons.pause),
  fullscreenIcon: Icon(Icons.fullscreen),
  forwardIcon: Icon(Icons.skip_next),
  backwardIcon: Icon(Icons.skip_previous),
)

更改视频加载样式

videoLoadingStyle: VideoLoadingStyle(
  loading: Center(
    child: Text("正在加载视频..."),
  ),
)

播放带字幕的视频

body: YoYoPlayer(
  aspectRatio: 16 / 9,
  url:  "https://sfux-ext.sfux.info/hls/chapter/105/1588724110/1588724110.m3u8",
  videoStyle: VideoStyle(
    qualityStyle: TextStyle(
      fontSize: 16.0,
      fontWeight: FontWeight.w500,
      color: Colors.white,
    ),
    forwardAndBackwardBtSize: 30.0,
    playButtonIconSize: 40.0,
    playIcon: Icon(
      Icons.add_circle_outline_outlined,
      size: 40.0,
      color: Colors.white,
    ),
    pauseIcon: Icon(
      Icons.remove_circle_outline_outlined,
      size: 40.0,
      color: Colors.white,
    ),
    videoQualityPadding: EdgeInsets.all(5.0),
  ),
  videoLoadingStyle: VideoLoadingStyle(
    loading: Center(
      child: Text("正在加载视频"),
    ),
  ),
  allowCacheFile: true,
  onCacheFileCompleted: (files) {
    print('缓存文件长度 ::: ${files?.length}');

    if (files != null && files.isNotEmpty) {
      for (var file in files) {
        print('文件路径 ::: ${file.path}');
      }
    }
  },
  onCacheFileFailed: (error) {
    print('缓存文件错误 ::: $error');
  },
  onFullScreen: (value) {
    setState(() {
      if (fullscreen != value) {
        fullscreen = value;
      }
    });
  }
),

直播视频

videoStyle: VideoStyle(
  showLiveDirectButton: true,
)

播放器选项

播放器

播放器自定义样式 (VideoStyle)

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

如何创建？

• 源URL（m3u8）中的数据通过正则表达式检查，并根据各自的规则创建并保存子m3u8文件。
• 一旦视频开始播放，就开始创建子m3u8文件。
• 每次视频完成或主URL发生变化时，都会检查并删除子m3u8文件。

子m3u8文件的创建方式如下：

• 如果视频质量为 yoyo_[文件名]_[视频质量].m3u8
• 如果视频质量和音频质量为 yoyo_[视频质量]_[音频质量].m3u8

支持M3U8

• #EXT-X-MEDIA
• #EXT-X-STREAM-INF（不适用于iOS）

播放器截图

示例代码

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

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

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

  [@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: const Image(
                  image: AssetImage('image/yoyo_logo.png'),
                  fit: BoxFit.fitHeight,
                  height: 50,
                ),
                centerTitle: true,
                leading: IconButton(
                  icon: const Icon(Icons.arrow_back),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
              )
            : null,
        body: Padding(
          padding:
              fullscreen ? EdgeInsets.zero : const EdgeInsets.only(top: 32.0),
          child: YoYoPlayer(
            aspectRatio: 16 / 9,
            url:
                "https://sfux-ext.sfux.info/hls/chapter/105/1588724110/1588724110.m3u8",
            allowCacheFile: true,
            onCacheFileCompleted: (files) {
              print('缓存文件长度 ::: ${files?.length}');

              if (files != null && files.isNotEmpty) {
                for (var file in files) {
                  print('文件路径 ::: ${file.path}');
                }
              }
            },
            onCacheFileFailed: (error) {
              print('缓存文件错误 ::: $error');
            },
            videoStyle: const VideoStyle(
              qualityStyle: TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.w500,
                color: Colors.white,
              ),
              forwardAndBackwardBtSize: 30.0,
              playButtonIconSize: 40.0,
              playIcon: Icon(
                Icons.add_circle_outline_outlined,
                size: 40.0,
                color: Colors.white,
              ),
              pauseIcon: Icon(
                Icons.remove_circle_outline_outlined,
                size: 40.0,
                color: Colors.white,
              ),
              videoQualityPadding: EdgeInsets.all(5.0),
              // showLiveDirectButton: true,
              // enableSystemOrientationsOverride: false,
            ),
            videoLoadingStyle: const VideoLoadingStyle(
              loading: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Image(
                      image: AssetImage('image/yoyo_logo.png'),
                      fit: BoxFit.fitHeight,
                      height: 50,
                    ),
                    SizedBox(height: 16.0),
                    Text("正在加载视频..."),
                  ],
                ),
              ),
            ),
            onFullScreen: (value) {
              setState(() {
                if (fullscreen != value) {
                  fullscreen = value;
                }
              });
            },
          ),
        ),
      ),
    );
  }
}