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

百度已收录   阅读次数: 79
2021-08-0522:46:00 发表评论
摘要

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

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/>

如下图所示:

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

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

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

之后,就可以在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,
          ),
        ));
  }
}

运行效果如下图所示:

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

更多有关该依赖库的详情内容,可以查阅pub.dev有关该依赖库的介绍。

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: