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

简介

youtube_player_embed 是一个轻量级且可定制的Flutter包，允许开发者将YouTube视频（包括YouTube Shorts）直接嵌入到他们的Flutter应用程序中。通过这个包，您可以无缝集成视频，具有高级事件处理、自动播放、静音和纵横比自定义等功能。

功能特性

• 🎥 嵌入YouTube视频和Shorts：仅需少量配置即可轻松嵌入。
• 🔄 支持自动播放：实现即时视频播放。
• 🔇 静音选项：支持静音播放。
• 📱 响应式设计：支持横向（16:9）和纵向（9:16）视频。
• 💡 可定制化：移除YouTube品牌按钮以获得更简洁的UI。
• 🔗 直接Shorts集成：无缝嵌入垂直YouTube Shorts。
• ⏰ 高级事件监听器：更新视频状态、时间跟踪、seek事件和静音/取消静音检测。
• 🔑 增强控制：动态移除分享和品牌按钮。
• ⏯ 全屏支持：无缝进入和退出全屏。
• ⏹️ 播放控制：编程控制播放、暂停、seek、静音和取消静音。
• 🔍 自定义视频标题：动态设置或隐藏视频标题。
• 🚀 性能优化：轻量高效，提供更流畅的用户体验。

安装

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

dependencies:
  youtube_player_embed: ^1.6.4

运行以下命令安装该包：

flutter pub get

使用示例

示例代码

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final List<String> listOfVideos = ["pUb9EW7F63s", "3vPbzEhF63s"];
  String currentPlayingVideo = "";
  VideoController? videoController;

  @override
  void initState() {
    super.initState();
    currentPlayingVideo = listOfVideos.removeAt(0);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'YouTube Player Embed Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('YouTube Player Example'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            YoutubePlayerEmbed(
              key: ValueKey(currentPlayingVideo),
              callBackVideoController: (controller) {
                videoController = controller;
              },
              videoId: currentPlayingVideo, // 替换为YouTube Shorts或普通视频ID
              customVideoTitle: "بسم الله الرحمن الرحيم",
              autoPlay: false,
              hidenVideoControls: false,
              mute: false,
              enabledShareButton: false,
              hidenChannelImage: true,
              aspectRatio: 16 / 9,
              onVideoEnd: () {
                if (listOfVideos.isNotEmpty) {
                  setState(() {
                    currentPlayingVideo = listOfVideos.removeAt(0);
                  });
                } else {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('No more videos to play!')),
                  );
                }
              },
              onVideoSeek: (currentTime) => print("Seeked to $currentTime seconds"),
              onVideoTimeUpdate: (currentTime) => print("Current time: $currentTime seconds"),
              onVideoStateChange: (state) {
                switch (state) {
                  case VideoState.playing:
                    print("Video is playing");
                    break;
                  case VideoState.paused:
                    print("Video is paused");
                    break;
                  case VideoState.muted:
                    print("Video is muted");
                    break;
                  case VideoState.unmuted:
                    print("Video is unmuted");
                    break;
                  case VideoState.fullscreen:
                    print("Video is in fullscreen");
                    break;
                  case VideoState.normalView:
                    print("Video is in normal view");
                    break;
                }
              },
            ),
            const SizedBox(height: 100),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () async {
                    await videoController?.playVideo();
                  },
                  child: const Text("Play"),
                ),
                ElevatedButton(
                  onPressed: () async {
                    await videoController?.pauseVideo();
                  },
                  child: const Text("Pause"),
                ),
                ElevatedButton(
                  onPressed: () async {
                    await videoController?.muteOrUnmuteVideo();
                  },
                  child: const Text("Mute / Unmute"),
                ),
              ],
            ),
            const SizedBox(height: 50),
            ElevatedButton(
              onPressed: () async {
                await videoController?.seekTo(time: 4);
              },
              child: const Text("Seek to 4 seconds (for test)"),
            ),
          ],
        ),
      ),
    );
  }
}

API 参考

支持平台

• ✅ Android
• ✅ iOS
• ✅ Web (有局限性)
• ✅ Desktop

设置

Android 设置

确保在 AndroidManifest.xml 中添加以下权限：

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

iOS 设置

1. 更新 Info.plist

   在 Info.plist 文件中添加以下权限：

   <key>NSAppTransportSecurity</key>
   <dict>
     <key>NSAllowsArbitraryLoads</key>
     <true/>
   </dict>
   <key>io.flutter.embedded_views_preview</key>
   <true/>
   

2. 编辑 Podfile

   如果遇到问题，请在 iOS Podfile 中添加以下内容：

   target 'Runner' do
     use_frameworks!  # required by flutter_inappwebview
     ...
   end
   
   post_install do |installer|
     installer.pods_project.targets.each do |target|
       target.build_configurations.each do |config|
         config.build_settings['SWIFT_VERSION'] = '5.0'  # required by flutter_inappwebview
         config.build_settings['ENABLE_BITCODE'] = 'NO'
       end
     end
   end
   

更多信息

• GitHub仓库
• API参考
• 完整示例项目

如果您有任何问题或建议，欢迎提交Issue或Pull Request。