Flutter视频播放插件 youtube_player_flutter_quill 的使用

概述

youtube_player_flutter_quill 是一个用于在Flutter应用中嵌入和播放YouTube视频的插件。它基于官方iFrame Player API，支持Android和iOS平台。

主要特性

• 内联播放：直接在应用内播放YouTube视频。
• 支持字幕：可以显示视频的字幕。
• 无需API密钥：不需要提供YouTube Data API密钥。
• 自定义控件：允许用户定制播放器界面。
• 获取视频元数据：包括标题、作者等信息。
• 支持直播流：可以播放实时视频流。
• 播放速度调整：允许用户调整播放速度。
• 适应带宽的质量选择：根据网络状况自动调整视频质量。
• 快进/快退：通过水平拖动实现快进或快退功能。
• 适配宽屏模式：支持通过手势放大缩小视频画面以适应不同屏幕尺寸。

设置指南

iOS设置

无需额外配置，但需要确保Xcode版本 >= 11，并且项目使用Swift语言。

Android设置

确保android/app/build.gradle文件中的minSdkVersion至少为17，并且项目已迁移到AndroidX。

android {
    ...
    defaultConfig {
        minSdkVersion 17
        ...
    }
}

注意：虽然最低要求是API 17，但实际上视频播放需要API 20及以上（如果启用了混合组合，则为API 19）。对于低于这些版本的设备，建议使用url_launcher或android_intent包来打开YouTube应用播放视频。

使用示例

基本用法

首先，导入必要的包：

import 'package:youtube_player_flutter_quill/youtube_player_flutter_quill.dart';

然后创建并初始化控制器：

final YoutubePlayerController _controller = YoutubePlayerController(
  initialVideoId: 'iLnmTe5Q2Qw',
  flags: YoutubePlayerFlags(
    autoPlay: true,
    mute: false,
  ),
);

接下来，在你的Widget树中添加YoutubePlayer组件：

YoutubePlayer(
  controller: _controller,
  showVideoProgressIndicator: true,
  videoProgressIndicatorColor: Colors.amber,
  progressColors: ProgressColors(
    playedColor: Colors.amber,
    handleColor: Colors.amberAccent,
  ),
  onReady: () {
    _controller.addListener(listener);
  },
),

全屏支持

为了支持全屏播放，请使用YoutubePlayerBuilder包装你的播放器：

YoutubePlayerBuilder(
  player: YoutubePlayer(controller: _controller),
  builder: (context, player) {
    return Column(
      children: [
        // some widgets
        player,
        // some other widgets
      ],
    );
  },
),

播放直播流视频

将isLive属性设为true即可改变UI以适应直播视频：

final YoutubePlayerController _controller = YoutubePlayerController(
  initialVideoId: 'iLnmTe5Q2Qw',
  flags: YoutubePlayerFlags(isLive: true),
);

YoutubePlayer(
  controller: _controller,
  liveUIColor: Colors.amber,
),

自定义播放器

从v5.x.x版本开始，你可以使用topActions和bottomActions属性来自定义播放器界面。例如：

YoutubePlayer(
  controller: _controller,
  bottomActions: [
    CurrentPosition(),
    ProgressBar(isExpanded: true),
    TotalDuration(),
  ],
),

将YouTube链接转换为视频ID

如果你有YouTube链接而不是视频ID，可以使用convertUrlToId()方法进行转换：

String videoId = YoutubePlayer.convertUrlToId("https://www.youtube.com/watch?v=BBAyRBTfsOU");
print(videoId); // 输出: BBAyRBTfsOU

示例代码

下面是一个完整的示例程序，展示了如何集成和使用youtube_player_flutter_quill插件：

// main.dart
import 'package:flutter/material.dart';
import 'package:youtube_player_flutter_quill/youtube_player_flutter_quill.dart';

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

class YoutubePlayerDemoApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'YouTube Player Demo',
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  late YoutubePlayerController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = YoutubePlayerController(
      initialVideoId: 'iLnmTe5Q2Qw',
      flags: const YoutubePlayerFlags(autoPlay: true),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('YouTube Player Example')),
      body: Center(
        child: YoutubePlayer(
          controller: _controller,
          showVideoProgressIndicator: true,
          onReady: () {},
        ),
      ),
    );
  }
}