flutter pub add youtube_player_embed

dependencies:
  flutter:
    sdk: flutter

  youtube_player_embed: ^1.6.4

flutter pub get

import 'package:youtube_player_embed/youtube_player_embed.dart';

import 'package:youtube_player_embed/controller/video_controller.dart';

import 'package:youtube_player_embed/enum/video_state.dart';

https://www.youtube.com/watch?v=dQw4w9WgXcQ

dQw4w9WgXcQ

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
)

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
)

Column(
  children: [
    YoutubePlayerEmbed(
      videoId: 'dQw4w9WgXcQ',
    ),
  ],
)

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
  autoPlay: false,
)

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
  autoPlay: true,
)

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
  mute: true,
)

16 / 9

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
  aspectRatio: 16 / 9,
)

YoutubePlayerEmbed(
  videoId: 'VIDEO_ID',
  aspectRatio: 9 / 16,
)

YoutubePlayerEmbed(
  videoId: 'SHORT_VIDEO_ID',
  aspectRatio: 9 / 16,
)

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
  hidenVideoControls: true,
)

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
  hidenChannelImage: true,
)

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
  enabledShareButton: true,
)

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
  customVideoTitle: 'شرح Flutter للمبتدئين',
)

VideoController? videoController;

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
  callBackVideoController: (controller) {
    videoController = controller;
  },
)

await videoController?.playVideo();

ElevatedButton(
  onPressed: () async {
    await videoController?.playVideo();
  },
  child: const Text('Play'),
)

await videoController?.pauseVideo();

ElevatedButton(
  onPressed: () async {
    await videoController?.pauseVideo();
  },
  child: const Text('Pause'),
)

await videoController?.muteOrUnmuteVideo();

ElevatedButton(
  onPressed: () async {
    await videoController?.muteOrUnmuteVideo();
  },
  child: const Text('Mute / Unmute'),
)

await videoController?.seekTo(
  time: 4,
);

await videoController?.seekTo(
  time: 120,
);

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
  onVideoEnd: () {
    debugPrint('Video ended');
  },
)

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
  onVideoTimeUpdate: (currentTime) {
    debugPrint(
      'Current time: $currentTime',
    );
  },
)

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
  onVideoSeek: (currentTime) {
    debugPrint(
      'Seeked to: $currentTime seconds',
    );
  },
)

onVideoStateChange

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
  onVideoStateChange: (state) {
    debugPrint(
      'Video state: $state',
    );
  },
)

onVideoStateChange: (state) {
  switch (state) {
    case VideoState.playing:
      debugPrint('Video is playing');
      break;

    case VideoState.paused:
      debugPrint('Video is paused');
      break;

    case VideoState.muted:
      debugPrint('Video is muted');
      break;

    case VideoState.unmuted:
      debugPrint('Video is unmuted');
      break;

    case VideoState.fullscreen:
      debugPrint('Video is fullscreen');
      break;

    case VideoState.normalView:
      debugPrint('Video is in normal view');
      break;
  }
}

VideoState.fullscreen

VideoState.normalView

final List<String> videos = [
  'pUb9EW770d0',
  '3vPbzEhF63s',
];

YoutubePlayerEmbed(
  key: ValueKey(currentVideo),
  videoId: currentVideo,
)

https://www.youtube.com/watch?v=dQw4w9WgXcQ

String? extractYoutubeVideoId(
  String url,
) {
  final uri = Uri.tryParse(url);

  if (uri == null) {
    return null;
  }

  if (uri.host.contains('youtube.com')) {
    return uri.queryParameters['v'];
  }

  if (uri.host == 'youtu.be') {
    if (uri.pathSegments.isNotEmpty) {
      return uri.pathSegments.first;
    }
  }

  return null;
}

final videoId = extractYoutubeVideoId(
  'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
);

if (videoId != null) {
  debugPrint(videoId);
}

https://www.youtube.com/shorts/VIDEO_ID

String? extractYoutubeVideoId(
  String url,
) {
  final uri = Uri.tryParse(url);

  if (uri == null) {
    return null;
  }

  if (uri.host.contains('youtube.com')) {
    if (uri.pathSegments.isNotEmpty &&
        uri.pathSegments.first == 'shorts' &&
        uri.pathSegments.length > 1) {
      return uri.pathSegments[1];
    }

    return uri.queryParameters['v'];
  }

  if (uri.host == 'youtu.be') {
    if (uri.pathSegments.isNotEmpty) {
      return uri.pathSegments.first;
    }
  }

  return null;
}

YoutubePlayerEmbed(
  videoId: 'dQw4w9WgXcQ',
  onVideoTimeUpdate: (currentTime) {
    debugPrint(
      'Watch time: $currentTime',
    );

    // أرسل الوقت إلى API عند الحاجة
  },
)

onVideoEnd: () {
  if (currentIndex < videos.length - 1) {
    setState(() {
      currentIndex++;
    });
  }
}

YoutubePlayerEmbed(
  key: ValueKey(videos[currentIndex]),
  videoId: videos[currentIndex],
  autoPlay: true,
)

android/app/src/main/AndroidManifest.xml

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

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

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

<key>io.flutter.embedded_views_preview</key>
<true/>

ios/Runner/Info.plist

target 'Runner' do
  use_frameworks!

  # باقي إعدادات المشروع
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'
      config.build_settings['ENABLE_BITCODE'] = 'NO'
    end
  end
end

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    IconButton(
      onPressed: () async {
        await videoController?.playVideo();
      },
      icon: const Icon(Icons.play_arrow),
    ),

    IconButton(
      onPressed: () async {
        await videoController?.pauseVideo();
      },
      icon: const Icon(Icons.pause),
    ),

    IconButton(
      onPressed: () async {
        await videoController?.muteOrUnmuteVideo();
      },
      icon: const Icon(Icons.volume_up),
    ),
  ],
)

{
  "id": 15,
  "title": "شرح Flutter",
  "youtube_url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
}

final videoId = extractYoutubeVideoId(
  video.youtubeUrl,
);

YoutubePlayerEmbed(
  videoId: videoId!,
  customVideoTitle: video.title,
  aspectRatio: 16 / 9,
)

if (videoId == null || videoId.isEmpty) {
  return const Center(
    child: Text(
      'Invalid YouTube video',
    ),
  );
}

import 'package:flutter/material.dart';

import 'package:youtube_player_embed/controller/video_controller.dart';
import 'package:youtube_player_embed/enum/video_state.dart';
import 'package:youtube_player_embed/youtube_player_embed.dart';

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

  @override
  State<YoutubeVideoPage> createState() =>
      _YoutubeVideoPageState();
}

class _YoutubeVideoPageState
    extends State<YoutubeVideoPage> {
  VideoController? videoController;

  String currentState = 'normal';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'YouTube Player',
        ),
      ),
      body: Column(
        children: [
          YoutubePlayerEmbed(
            key: const ValueKey(
              'dQw4w9WgXcQ',
            ),
            videoId: 'dQw4w9WgXcQ',

            callBackVideoController:
                (controller) {
              videoController = controller;
            },

            customVideoTitle:
                'Flutter YouTube Player',

            autoPlay: false,

            mute: false,

            hidenVideoControls: false,

            hidenChannelImage: true,

            enabledShareButton: false,

            aspectRatio: 16 / 9,

            onVideoEnd: () {
              debugPrint(
                'Video ended',
              );
            },

            onVideoSeek: (currentTime) {
              debugPrint(
                'Seeked to $currentTime',
              );
            },

            onVideoTimeUpdate:
                (currentTime) {
              debugPrint(
                'Current time: $currentTime',
              );
            },

            onVideoStateChange: (state) {
              setState(() {
                currentState =
                    state.toString();
              });

              switch (state) {
                case VideoState.playing:
                  debugPrint(
                    'Playing',
                  );
                  break;

                case VideoState.paused:
                  debugPrint(
                    'Paused',
                  );
                  break;

                case VideoState.muted:
                  debugPrint(
                    'Muted',
                  );
                  break;

                case VideoState.unmuted:
                  debugPrint(
                    'Unmuted',
                  );
                  break;

                case VideoState.fullscreen:
                  debugPrint(
                    'Fullscreen',
                  );
                  break;

                case VideoState.normalView:
                  debugPrint(
                    'Normal View',
                  );
                  break;
              }
            },
          ),

          const SizedBox(
            height: 30,
          ),

          Text(
            'State: $currentState',
          ),

          const SizedBox(
            height: 20,
          ),

          Wrap(
            spacing: 10,
            runSpacing: 10,
            alignment:
                WrapAlignment.center,
            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',
                ),
              ),

              ElevatedButton(
                onPressed: () async {
                  await videoController
                      ?.seekTo(
                    time: 30,
                  );
                },
                child: const Text(
                  'Seek 30s',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

YoutubePlayerEmbed(
  key: const ValueKey(
    'SHORT_VIDEO_ID',
  ),
  videoId: 'SHORT_VIDEO_ID',
  autoPlay: false,
  aspectRatio: 9 / 16,
  mute: false,
  hidenVideoControls: false,
  enabledShareButton: false,
  customVideoTitle: 'YouTube Short',
)

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

  @override
  State<VideosPage> createState() =>
      _VideosPageState();
}

class _VideosPageState
    extends State<VideosPage> {
  final List<String> videos = [
    'pUb9EW770d0',
    '3vPbzEhF63s',
  ];

  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    final currentVideo =
        videos[currentIndex];

    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Videos',
        ),
      ),
      body: Column(
        children: [
          YoutubePlayerEmbed(
            key: ValueKey(
              currentVideo,
            ),
            videoId: currentVideo,
            autoPlay: false,
            aspectRatio: 16 / 9,

            onVideoEnd: () {
              if (currentIndex <
                  videos.length - 1) {
                setState(() {
                  currentIndex++;
                });
              }
            },
          ),

          const SizedBox(
            height: 20,
          ),

          Text(
            'Video ${currentIndex + 1}',
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:youtube_player_embed/controller/video_controller.dart';
import 'package:youtube_player_embed/enum/video_state.dart';
import 'package:youtube_player_embed/youtube_player_embed.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'YouTube Player Embed',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.red,
        ),
        useMaterial3: true,
      ),
      home: const YoutubeVideoPage(),
    );
  }
}

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

  @override
  State<YoutubeVideoPage> createState() =>
      _YoutubeVideoPageState();
}

class _YoutubeVideoPageState
    extends State<YoutubeVideoPage> {
  VideoController? videoController;

  VideoState? currentState;

  String? currentTime;

  String? seekTime;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'YouTube Player Embed',
        ),
      ),
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.all(
            16,
          ),
          children: [
            YoutubePlayerEmbed(
              key: const ValueKey(
                'dQw4w9WgXcQ',
              ),
              videoId:
                  'dQw4w9WgXcQ',

              callBackVideoController:
                  (controller) {
                videoController =
                    controller;
              },

              customVideoTitle:
                  'Flutter YouTube Video',

              autoPlay: false,

              mute: false,

              hidenVideoControls: false,

              hidenChannelImage: true,

              enabledShareButton: false,

              aspectRatio: 16 / 9,

              onVideoEnd: () {
                debugPrint(
                  'Video ended',
                );
              },

              onVideoSeek: (time) {
                setState(() {
                  seekTime =
                      time.toString();
                });
              },

              onVideoTimeUpdate: (time) {
                setState(() {
                  currentTime =
                      time.toString();
                });
              },

              onVideoStateChange: (state) {
                setState(() {
                  currentState =
                      state;
                });

                switch (state) {
                  case VideoState.playing:
                    debugPrint(
                      'Video is playing',
                    );
                    break;

                  case VideoState.paused:
                    debugPrint(
                      'Video is paused',
                    );
                    break;

                  case VideoState.muted:
                    debugPrint(
                      'Video is muted',
                    );
                    break;

                  case VideoState.unmuted:
                    debugPrint(
                      'Video is unmuted',
                    );
                    break;

                  case VideoState.fullscreen:
                    debugPrint(
                      'Video is fullscreen',
                    );
                    break;

                  case VideoState.normalView:
                    debugPrint(
                      'Video is in normal view',
                    );
                    break;
                }
              },
            ),

            const SizedBox(
              height: 24,
            ),

            Card(
              child: Padding(
                padding:
                    const EdgeInsets.all(16),
                child: Column(
                  children: [
                    Text(
                      'State: ${currentState ?? '-'}',
                    ),

                    const SizedBox(
                      height: 8,
                    ),

                    Text(
                      'Current Time: '
                      '${currentTime ?? '-'}',
                    ),

                    const SizedBox(
                      height: 8,
                    ),

                    Text(
                      'Last Seek: '
                      '${seekTime ?? '-'}',
                    ),
                  ],
                ),
              ),
            ),

            const SizedBox(
              height: 24,
            ),

            Wrap(
              spacing: 10,
              runSpacing: 10,
              alignment:
                  WrapAlignment.center,
              children: [
                ElevatedButton.icon(
                  onPressed: () async {
                    await videoController
                        ?.playVideo();
                  },
                  icon: const Icon(
                    Icons.play_arrow,
                  ),
                  label: const Text(
                    'Play',
                  ),
                ),

                ElevatedButton.icon(
                  onPressed: () async {
                    await videoController
                        ?.pauseVideo();
                  },
                  icon: const Icon(
                    Icons.pause,
                  ),
                  label: const Text(
                    'Pause',
                  ),
                ),

                ElevatedButton.icon(
                  onPressed: () async {
                    await videoController
                        ?.muteOrUnmuteVideo();
                  },
                  icon: const Icon(
                    Icons.volume_up,
                  ),
                  label: const Text(
                    'Mute / Unmute',
                  ),
                ),

                ElevatedButton.icon(
                  onPressed: () async {
                    await videoController
                        ?.seekTo(
                      time: 30,
                    );
                  },
                  icon: const Icon(
                    Icons.forward_30,
                  ),
                  label: const Text(
                    'Seek 30s',
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

dependencies:
  flutter:
    sdk: flutter

  youtube_player_embed: ^1.6.4

<manifest
    xmlns:android="http://schemas.android.com/apk/res/android">

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

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

    <application
        android:label="youtube_player_demo"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">

        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop">

            <intent-filter>
                <action
                    android:name="android.intent.action.MAIN" />

                <category
                    android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

        </activity>

    </application>

</manifest>

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

<key>io.flutter.embedded_views_preview</key>
<true/>