使用 youtube_player_iframe Flutter 观看 YouTube 视频
Watch YouTube video with youtube_player_iframe Flutter
我想知道如何打开 YouTube 视频并使用视频播放器在我的 Flutter 应用程序上显示它,该视频播放器允许用户停止视频、向前移动、向后移动,只需在视频。
我正在考虑使用 youtube_player_iframe
,因为我在互联网上看到这是唯一允许打开 YouTube 视频的小部件(对于 iOS,youtube_player
对于 Android)所以我安装它并从 docs 复制粘贴示例并修复了一些错误。
如果有人能帮助我理解为什么它不起作用,我将非常高兴。
要从终端 运行 安装:flutter pub add youtube_player_iframe
或者只添加依赖:youtube_player_iframe: ^2.0.0
这是代码,复制粘贴即可 运行 :
import 'dart:developer';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:youtube_player_iframe/youtube_player_iframe.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(YoutubeApp());
}
///
class YoutubeApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Youtube Player IFrame Demo',
theme: ThemeData(
primarySwatch: Colors.deepPurple,
iconTheme: const IconThemeData(color: Colors.deepPurpleAccent),
),
debugShowCheckedModeBanner: false,
home: YoutubeAppDemo(),
);
}
}
///
class YoutubeAppDemo extends StatefulWidget {
@override
_YoutubeAppDemoState createState() => _YoutubeAppDemoState();
}
class _YoutubeAppDemoState extends State<YoutubeAppDemo> {
late YoutubePlayerController _controller;
String urlVideoFromYouTube = 'v0RWej7Sqg4'; //this is the last part of the YouTube url https://www.youtube.com/watch?v=v0RWej7Sqg4 copy-pasted by me
@override
void initState() {
super.initState();
_controller = YoutubePlayerController(
initialVideoId: urlVideoFromYouTube,
params: const YoutubePlayerParams(
playlist: [
'nPt8bK2gbaU',//Default playlist
'K18cpp_-gP8',
'iLnmTe5Q2Qw',
'_WoCV4c6XOE',
'KmzdUe0RSJo',
'6jZDSSZZxjQ',
'p2lYr3vM_1w',
'7QUtEmBT_-w',
'34_PXCzGw1M',
],
startAt: const Duration(minutes: 1, seconds: 36),
showControls: true,
showFullscreenButton: true,
desktopMode: true,
privacyEnhanced: true,
useHybridComposition: true,
),
);
_controller.onEnterFullscreen = () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
log('Entered Fullscreen');
};
_controller.onExitFullscreen = () {
log('Exited Fullscreen');
};
}
@override
Widget build(BuildContext context) {
const player = YoutubePlayerIFrame();
return YoutubePlayerControllerProvider(
// Passing controller to widgets below.
controller: _controller,
child: Scaffold(
appBar: AppBar(
title: const Text('Youtube Player IFrame'),
),
body: LayoutBuilder(
builder: (context, constraints) {
if (kIsWeb && constraints.maxWidth > 800) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Expanded(child: player),
const SizedBox(
width: 500,
child: SingleChildScrollView(
child: Controls(),
),
),
],
);
}
return ListView(
children: [
player,
const Controls(),
],
);
},
),
),
);
}
@override
void dispose() {
_controller.close();
super.dispose();
}
}
///
class Controls extends StatelessWidget {
///
const Controls();
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// _space,
// MetaDataSection(),
// _space,
// SourceInputSection(),
// _space,
// PlayPauseButtonBar(),
// _space,
// VolumeSlider(),
// _space,
// PlayerStateSection(),
],
),
);
}
Widget get _space => const SizedBox(height: 10);
}
这是该存储库的 link:https://pub.dev/packages/youtube_player_iframe,完整下载它 运行 它是使用 VS 代码或 android studio 的 main.dart 文件,你不能 运行 只有一个 main.dart 文件而没有这个插件的其他文件 work.Doing 这个,会让你知道如何 运行 这个插件。
我想知道如何打开 YouTube 视频并使用视频播放器在我的 Flutter 应用程序上显示它,该视频播放器允许用户停止视频、向前移动、向后移动,只需在视频。
我正在考虑使用 youtube_player_iframe
,因为我在互联网上看到这是唯一允许打开 YouTube 视频的小部件(对于 iOS,youtube_player
对于 Android)所以我安装它并从 docs 复制粘贴示例并修复了一些错误。
如果有人能帮助我理解为什么它不起作用,我将非常高兴。
要从终端 运行 安装:flutter pub add youtube_player_iframe
或者只添加依赖:youtube_player_iframe: ^2.0.0
这是代码,复制粘贴即可 运行 :
import 'dart:developer';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:youtube_player_iframe/youtube_player_iframe.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(YoutubeApp());
}
///
class YoutubeApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Youtube Player IFrame Demo',
theme: ThemeData(
primarySwatch: Colors.deepPurple,
iconTheme: const IconThemeData(color: Colors.deepPurpleAccent),
),
debugShowCheckedModeBanner: false,
home: YoutubeAppDemo(),
);
}
}
///
class YoutubeAppDemo extends StatefulWidget {
@override
_YoutubeAppDemoState createState() => _YoutubeAppDemoState();
}
class _YoutubeAppDemoState extends State<YoutubeAppDemo> {
late YoutubePlayerController _controller;
String urlVideoFromYouTube = 'v0RWej7Sqg4'; //this is the last part of the YouTube url https://www.youtube.com/watch?v=v0RWej7Sqg4 copy-pasted by me
@override
void initState() {
super.initState();
_controller = YoutubePlayerController(
initialVideoId: urlVideoFromYouTube,
params: const YoutubePlayerParams(
playlist: [
'nPt8bK2gbaU',//Default playlist
'K18cpp_-gP8',
'iLnmTe5Q2Qw',
'_WoCV4c6XOE',
'KmzdUe0RSJo',
'6jZDSSZZxjQ',
'p2lYr3vM_1w',
'7QUtEmBT_-w',
'34_PXCzGw1M',
],
startAt: const Duration(minutes: 1, seconds: 36),
showControls: true,
showFullscreenButton: true,
desktopMode: true,
privacyEnhanced: true,
useHybridComposition: true,
),
);
_controller.onEnterFullscreen = () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
log('Entered Fullscreen');
};
_controller.onExitFullscreen = () {
log('Exited Fullscreen');
};
}
@override
Widget build(BuildContext context) {
const player = YoutubePlayerIFrame();
return YoutubePlayerControllerProvider(
// Passing controller to widgets below.
controller: _controller,
child: Scaffold(
appBar: AppBar(
title: const Text('Youtube Player IFrame'),
),
body: LayoutBuilder(
builder: (context, constraints) {
if (kIsWeb && constraints.maxWidth > 800) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Expanded(child: player),
const SizedBox(
width: 500,
child: SingleChildScrollView(
child: Controls(),
),
),
],
);
}
return ListView(
children: [
player,
const Controls(),
],
);
},
),
),
);
}
@override
void dispose() {
_controller.close();
super.dispose();
}
}
///
class Controls extends StatelessWidget {
///
const Controls();
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// _space,
// MetaDataSection(),
// _space,
// SourceInputSection(),
// _space,
// PlayPauseButtonBar(),
// _space,
// VolumeSlider(),
// _space,
// PlayerStateSection(),
],
),
);
}
Widget get _space => const SizedBox(height: 10);
}
这是该存储库的 link:https://pub.dev/packages/youtube_player_iframe,完整下载它 运行 它是使用 VS 代码或 android studio 的 main.dart 文件,你不能 运行 只有一个 main.dart 文件而没有这个插件的其他文件 work.Doing 这个,会让你知道如何 运行 这个插件。