Flutter视频播放插件youtube_player_iframe的使用

插件简介

Youtube Player iFrame

youtube_player_iframe 是一个用于在Flutter应用中无缝播放或流式传输YouTube视频的插件，它利用了官方的 iFrame Player API 。此包通过暴露几乎所有的iFrame Player API功能来提供广泛的自定义选项，确保了完全的灵活性和控制。

功能 🌟

• ▶️ Inline Playback: 提供应用程序内的无缝视频播放。
• 🎬 Caption Support: 完全支持字幕以增强可访问性。
• 🔑 No API Key Required: 无需API密钥即可轻松集成。
• 🖼️ Custom Controls: 提供对自定义视频控件的广泛支持。
• 📊 Metadata Retrieval: 能够检索详细的视频元数据。
• 📡 Live Stream Support: 支持直播视频。
• ⏩ Adjustable Playback Rate: 允许用户更改播放速度。
• 🛠️ Custom Control Builders: 暴露构建器以创建定制化的视频控件。
• 🎵 Playlist Support: 支持自定义播放列表和YouTube原生播放列表功能。
• 📱 Fullscreen Gestures: 启用全屏手势，如上下滑动以进入或退出全屏模式。

设置

请参考webview_flutter 的文档以了解要求。

使用播放器

创建控制器

final _controller = YoutubePlayerController(
  params: YoutubePlayerParams(
    mute: false,
    showControls: true,
    showFullscreenButton: true,
  ),
);

// 加载单个视频（自动播放）
_controller.loadVideoById(...); 
// 加载单个视频（手动播放）
_controller.cueVideoById(...); 
// 加载播放列表（自动播放）
_controller.loadPlaylist(...); 
// 加载播放列表（手动播放）
_controller.cuePlaylist(...); 

// 如果只需要播放单个视频
final _controller = YoutubePlayerController.fromVideoId(
  videoId: '<video-id>', // 替换为实际的视频ID
  autoPlay: false, // 是否自动播放
  params: const YoutubePlayerParams(showFullscreenButton: true),
);

使用 YoutubePlayer

当不需要全屏支持时可以使用这个小部件。

YoutubePlayer(
  controller: _controller,
  aspectRatio: 16 / 9, // 视频宽高比
);

使用 YoutubePlayerScaffold

当需要全屏支持时可以使用这个小部件。

YoutubePlayerScaffold(
  controller: _controller,
  aspectRatio: 16 / 9,
  builder: (context, player) {
    return Column(
      children: [
        player,
        Text('Youtube Player'),
      ],
    );
  },
)

继承控制器到子组件

可以通过 YoutubePlayerControllerProvider 将控制器传递给后代组件。

YoutubePlayerControllerProvider(
  controller: _controller,
  child: Builder(
    builder: (context){
      // 通过以下方式访问控制器：
      // `YoutubePlayerControllerProvider.of(context)` 或 `controller.ytController`.
    },
  ),
);

自定义播放器

可以使用 YoutubeValueBuilder 来创建任何自定义控件。例如，创建一个自定义播放暂停按钮。

YoutubeValueBuilder(
   controller: _controller, // 如果使用了 `YoutubePlayerControllerProvider` 可以省略
   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,
      );
   },
);

示例代码

下面是一个完整的示例demo，展示了如何将上述内容整合到一个简单的Flutter应用中：

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: 'Flutter YouTube Player Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _controller = YoutubePlayerController(
    params: YoutubePlayerParams(
      mute: false,
      showControls: true,
      showFullscreenButton: true,
    ),
  );

  @override
  void initState() {
    super.initState();
    // 加载指定ID的YouTube视频
    _controller.loadVideoById(videoId: 'your-video-id-here');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('YouTube Video Player'),
      ),
      body: Center(
        child: YoutubePlayer(
          controller: _controller,
          aspectRatio: 16 / 9,
        ),
      ),
    );
  }

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

在这个例子中，我们创建了一个包含YouTube视频播放器的应用程序，并设置了初始状态以加载特定ID的YouTube视频。此外，还演示了如何设置宽高比以及一些基本的控件显示选项。

以上就是关于 youtube_player_iframe 插件的基本介绍与使用方法，希望对你有所帮助！