Flutter视频播放插件flutter_youtube_view的使用

Flutter视频播放插件flutter_youtube_view的使用

1. 插件简介

flutter_youtube_view 插件提供了内联的YouTube播放器。该插件通过使用 YouTube IFrame API，在Android上使用WebView，在iOS上使用WKWebview与YouTube进行交互。因此，用户设备上不需要安装YouTube应用程序，并且不会违反YouTube的服务条款。

该插件在不同平台上的实现如下：

• Android: 使用 android-youtube-player
• iOS: 使用 YoutubeKit

2. 使用步骤

2.1 添加依赖

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

dependencies:
  flutter_youtube_view: ^2.0.4

2.2 安装依赖

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

$ flutter packages get

2.3 导入插件

在Dart代码中导入 flutter_youtube_view：

import 'package:flutter_youtube_view/flutter_youtube_view.dart';

注意：对于iOS，应用需要在 Info.plist 文件中添加一个布尔属性以启用嵌入视图预览（key=io.flutter.embedded_views_preview，value=YES）。

2.4 使用YouTube播放器

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 flutter_youtube_view 播放YouTube视频：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

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

class _HomeScreenState extends State<HomeScreen> with FlutterYoutubeDelegate {
  // 视频ID
  final String videoId = 'gcj2RUWQZ60';

  // 初始化YouTube播放器
  void _onYoutubeCreated(FlutterYoutubeController controller) {
    this.controller = controller;
  }

  // 播放器回调方法
  [@override](/user/override)
  void onReady() {
    print('Player is ready');
  }

  [@override](/user/override)
  void onStateChange(String state) {
    print('Player state changed to: $state');
  }

  [@override](/user/override)
  void onError(String error) {
    print('Error: $error');
  }

  [@override](/user/override)
  void onVideoDuration(double duration) {
    print('Video duration: $duration seconds');
  }

  [@override](/user/override)
  void onCurrentSecond(double second) {
    print('Current second: $second');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('YouTube Player Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // YouTube播放器
            Container(
              height: 300, // 设置播放器高度
              width: double.infinity, // 设置播放器宽度
              child: FlutterYoutubeView(
                onViewCreated: _onYoutubeCreated,
                listener: this,
                scaleMode: YoutubeScaleMode.none, // 缩放模式：fitWidth, fitHeight
                params: YoutubeParam(
                  videoId: videoId, // 视频ID
                  showUI: false, // 是否显示播放器UI
                  startSeconds: 0.0, // 开始播放的时间（秒）
                  autoPlay: false, // 是否自动播放
                ),
              ),
            ),
            SizedBox(height: 20),
            // 控制按钮
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                ElevatedButton(
                  onPressed: () {
                    controller?.play(); // 播放视频
                  },
                  child: Text('Play'),
                ),
                ElevatedButton(
                  onPressed: () {
                    controller?.pause(); // 暂停视频
                  },
                  child: Text('Pause'),
                ),
                ElevatedButton(
                  onPressed: () {
                    controller?.seekTo(10.0); // 跳转到第10秒
                  },
                  child: Text('Seek to 10s'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

3. 功能介绍

3.1 调用IFrame API

在视频播放过程中，可以调用以下方法与YouTube播放器进行交互：

• play()：开始播放视频。
• pause()：暂停视频。
• loadOrCueVideo()：加载或预加载视频。
• seekTo()：跳转到指定时间点。
• setVolume()（仅限Android）：设置音量。
• mute()：静音。
• unMute()：取消静音。
• setPlaybackRate(rate: PlaybackRate.RATE_1) 或 setPlaybackRate(rateValue: 1.0)：设置播放速度。

3.2 回调函数

flutter_youtube_view 提供了多个回调函数，用于监听播放器的状态变化和错误信息：

• onReady()：当播放器准备就绪时调用。
• onStateChange(String state)：当播放器状态发生变化时调用（例如：播放、暂停、结束等）。
• onError(String error)：当发生错误时调用。
• onVideoDuration(double duration)：当获取到视频总时长时调用。
• onCurrentSecond(double second)：当视频播放到某一秒时调用。

4. 示例项目

示例项目中包含两个页面：

• YoutubeCustomWidget：自定义播放器样式。
• YoutubeDefaultWidget：默认播放器样式。

以下是 main.dart 的完整代码：

import 'package:flutter/material.dart';
import 'YoutubeCustomWidget.dart';
import 'YoutubeDefaultWidget.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: <String, WidgetBuilder>{
        '/custom': (BuildContext context) => new YoutubeCustomWidget(),
        '/non_custom': (BuildContext context) => new YoutubeDefaultWidget(),
      },
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('YouTube player')),
      body: Center(
        child: Column(children: <Widget>[
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).pushNamed('/custom');
            },
            child: Text('Open customize player'),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).pushNamed('/non_custom');
            },
            child: Text('Open non customize player'),
          ),
        ]),
      ),
    );
  }
}