使用 youtube_player_iframe Flutter 观看 YouTube 视频

问题描述

我想知道如何打开 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(),// PlayPausebuttonbar(),// VolumeSlider(),// PlayerStateSection(),);
  }

  Widget get _space => const SizedBox(height: 10);
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）