flutter pub add youtube_player_embed根據套件公開資料產生的選型評估，僅供參考。
一個 Flutter 套件，可實現 YouTube 影片在應用程式中的無縫嵌入，並提供可自訂的播放選項。它支援多個平台，包括 Android、iOS、macOS 和 Windows，為開發者提供靈活整合影片內容的方式。該套件提供簡單的 API 來載入和控制影片，包含自動播放、循環播放和自訂控制等功能。非常適合需要豐富媒體體驗的應用程式，例如教育平台、影片教學或娛樂應用。
以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。
youtube_player_embed is a lightweight and customizable Flutter package that allows developers to embed YouTube videos, including YouTube Shorts, directly into their Flutter applications using an InAppWebView. With this package, you can seamlessly integrate videos with advanced event handling, autoplay, mute, and aspect ratio customization.
Add the following dependency to your pubspec.yaml:
dependencies:
youtube_player_embed: ^1.6.4
Run the following command to install the package:
flutter pub get
Import the package:
import 'package:youtube_player_embed/youtube_player_embed.dart';
Embed a YouTube video in your app:
import 'package:flutter/material.dart';
import 'package:youtube_player_embed/youtube_player_embed.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
VideoController? videoController;
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), // Unique key for the video (optional)
callBackVideoController: (controller) {
videoController = controller;
},
videoId:
currentPlayingVideo, // 'shorts_video_id' Replace with a YouTube Shorts or normal video ID
customVideoTitle: "بسم الله الرحمن الرحيم",
autoPlay: false,
hidenVideoControls: false,
mute: false,
enabledShareButton: false,
hidenChannelImage: true,
aspectRatio: 16 / 9,
onVideoEnd: () {
print("video ended");
},
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 seconed (for test)"),
),
////
],
),
),
);
}
}
A complete example project is available in the example directory.
To run the example:
cd example
flutter run
YoutubePlayerView| Property | Type | Default | Description |
|---|---|---|---|
videoId |
String |
Required | The YouTube video ID to embed. |
aspectRatio |
double |
null | Aspect ratio of the video. |
enabledShareButton |
bool |
false |
Enable or disable the share button. |
autoPlay |
bool |
true |
Whether the video should autoplay upon loading. |
mute |
bool |
false |
Whether the video should be muted by default. |
onVideoEnd |
VoidCallback? |
null | Callback triggered when the video ends. |
onVideoSeek |
Function(double)? |
null | Callback triggered when the video seek occurs. |
onVideoTimeUpdate |
Function(double)? |
null | Callback triggered on video time updates. |
onVideoStateChange |
Function(VideoState)? |
null | Callback triggered on video state changes (play/pause/etc). |
customVideoTitle |
String? |
null | Custom title for the video displayed on top. |
hidenVideoControls |
bool |
false |
Whether to hide the video controls. |
hidenChannelImage |
bool |
true |
Whether to hide the channel image. |
Ensure you have added the following permissions in your AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
To ensure proper functionality on iOS, follow these steps:
Update the Info.plist
Add the following permissions in your Info.plist file:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
<key>io.flutter.embedded_views_preview</key>
<true/>
If you still have this problem, try to edit iOS Podfile like this
Edit the Podfile
Add the following to your iOS Podfile if you encounter issues:
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
Contributions are welcome! Feel free to open issues or submit pull requests on the GitHub repository.
This project is licensed under the MIT License. See the LICENSE file for details.
Developed by Mohamed Elsafty.
Feel free to reach out for support or feedback!
If you encounter any issues or have suggestions for improvement, please open an issue on GitHub or contact me at nesr107@gmail.com.
依賴清單 1 項
^6.1.5暫無相關資料。