flutter制作App中如何放置Youtube视频，只需要使用这个依赖库

2021-08-0522:46:00 发表评论

摘要

此前介绍过使用video_player播放视频，音频等实例，这次是介绍在App中如何引用Youtube视频，这个也是需要一个依赖库——youtube_player_flutter，使用它后，在App中播放YouTube视频就会轻而易举了，那么该如何使用呢？请看本篇文章所介绍的一个实例……

分享至：

开篇寄语

此前介绍过使用video_player播放视频，音频等实例，这次是介绍在App中如何引用Youtube视频，这个也是需要一个依赖库——youtube_player_flutter，使用它后，在App中播放YouTube视频就会轻而易举了，那么该如何使用呢？请看本篇文章所介绍的一个实例。

内容详情

以下内容大多是更改lib下的main.dart文件内容，删掉里面的内容，复制粘贴代码，开启调试就可以出现了。

要想使用youtube_player_flutter这个依赖库，就需要先安装上它，在terminal中输入以下命令：

flutter pub add youtube_player_flutter

等待安装完成后，就可以使用了，更多该依赖库的文档，请查看pub.dev上youtube_player_flutter的详情介绍，该依赖库目前支持iOS和Android，在配置文件中，也需要放开权限才能使用。

在iOS中，找到./ios/Runner/info.plist这个文件，在其中放置以下代码：

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

如下图所示：

而在Android中，设置最小的支持版本为17.0，如下图所示：

之后，就可以在iOS或者Android中播放YouTube视频啦，接着是修改main.dart中放置以下代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  static String myVideoId = 'BBAyRBTfsOU';
  YoutubePlayerController _controller = YoutubePlayerController(
    initialVideoId: myVideoId,
    flags: YoutubePlayerFlags(
      autoPlay: true,
      mute: false,
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter and Youtube'),
        ),
        body: Container(
          child: YoutubePlayer(
            controller: _controller,
            liveUIColor: Colors.amber,
          ),
        ));
  }
}

运行效果如下图所示：