Flutter嵌入YouTube视频播放插件youtube_player_iframe_plus的使用

youtube_player_iframe_plus 是一个用于在Flutter应用中嵌入并播放YouTube视频的插件。它利用官方的iFrame Player API，提供了丰富的功能和高度可定制性。

主要特性

• 内联播放
• 支持字幕
• 无需API密钥
• 支持自定义控件
• 获取视频元数据
• 支持直播流视频
• 支持更改播放速率
• 支持Android、iOS和Web平台
• 根据带宽自动调整视频质量
• 提供构建自定义控件的构造器
• 支持播放列表（包括自定义播放列表和YouTube的播放列表）

环境要求

• Android: minSdkVersion至少为17，并且支持androidx
• iOS: Xcode版本至少为11，使用Swift语言
• Web: 无需额外配置

设置步骤

Web

无需配置。

iOS

无需配置，但需遵循完整iOS设置指南。

Android

将android/app/build.gradle文件中的minSdkVersion设置为至少17，并遵循完整Android设置指南。

使用示例

以下是一个完整的示例demo，展示了如何在Flutter应用中集成并使用youtube_player_iframe_plus插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'YouTube Player Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.dark,
      ),
      home: YouTubePlayerDemo(),
    );
  }
}

class YouTubePlayerDemo extends StatefulWidget {
  @override
  _YouTubePlayerDemoState createState() => _YouTubePlayerDemoState();
}

class _YouTubePlayerDemoState extends State<YouTubePlayerDemo> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = YoutubePlayerController(
      initialVideoId: 'K18cpp_-gP8', // 替换为你想要播放的视频ID
      params: const YoutubePlayerParams(
        playlist: ['nPt8bK2gbaU', 'gQDByCdjUXw'], // 自定义播放列表
        startAt: Duration(seconds: 30),
        showControls: true,
        showFullscreenButton: true,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('YouTube Player Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            YoutubePlayerIFramePlus(
              controller: _controller,
              aspectRatio: 16 / 9,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _controller.play(); // 播放视频
              },
              child: Text('Play Video'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                _controller.pause(); // 暂停视频
              },
              child: Text('Pause Video'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.close();
    super.dispose();
  }
}

定制化玩家

如果你想进一步定制播放器，可以使用YoutubeValueBuilder来创建自定义控件。例如，创建一个自定义的播放/暂停按钮：

YoutubeValueBuilder(
  controller: _controller,
  builder: (context, value) {
    return IconButton(
      icon: Icon(
        value.playerState == PlayerState.playing ? Icons.pause : Icons.play_arrow,
      ),
      onPressed: value.isReady
          ? () {
              value.playerState == PlayerState.playing
                  ? context.ytController.pause()
                  : context.ytController.play();
            }
          : null,
    );
  },
);