youtube_player_flutter

ypf_banner

使用官方 iFrame Player API 在 Flutter 中内联播放或流式传输 YouTube 视频的插件。支持 Android 和 iOS 平台。

ypf_demo

主要特点

  • 内嵌播放
  • 支持字幕
  • 无需 API 密钥
  • 支持自定义控件
  • 支持直播视频
  • 支持更改播放速率
  • 支持 Android 和 iOS
  • 根据带宽调整质量
  • 通过水平拖动快进和快退

该插件在底层使用了webview_flutter来播放视频。

由于webview_flutter依赖Flutter嵌入Android和iOS视图的新机制，此插件可能共享一些标记为platform-views和/或webview的已知问题。

设置

iOS

通过向应用的 Info.plist 文件添加一个布尔属性来选择加入嵌入式视图预览
键为 io.flutter.embedded_views_preview，值为 YES。

Android

无需配置 - 该插件应开箱即用。

使用Youtube Player

YoutubePlayer(
    context: context,
    initialVideoId: "iLnmTe5Q2Qw",
    flags: YoutubePlayerFlags(
      autoPlay: true,
      showVideoProgressIndicator: true,
    ),
    videoProgressIndicatorColor: Colors.amber,
    progressColors: ProgressColors(
      playedColor: Colors.amber,
      handleColor: Colors.amberAccent,
    ),
    onPlayerInitialized: (controller) {
      _controller = controller;
      _controller.addListener(listener);
    },
),

播放直播视频

将isLive属性设置为true，以便更改UI以匹配直播视频。

YoutubePlayer(
    context: context,
    initialVideoId: "iLnmTe5Q2Qw",
    flags: YoutubePLayerFlags(
      isLive: true,
    ),
    liveUIColor: Colors.amber,
),

想自定义播放器？

从v5.x.x及更高版本开始，使用topActions和bottomActions属性来自定义播放器。

该插件包含的一些小部件是

  • 全屏按钮
  • 剩余时长
  • 当前位置
  • 播放/暂停按钮
  • 播放速度按钮
  • ProgressBar
YoutubePlayer(
    context: context,
    initialVideoId: "iLnmTe5Q2Qw",
    bottomActions: [
      CurrentPosition(),
      ProgressBar(isExpanded: true),
      TotalDuration(),
    ],
),

根本不喜欢这些控件？

别担心，我有个解决办法。:wink

将hideControls属性设置为true，然后您可以使用从onPlayerInitialized属性获得的控制器来创建自己的自定义控件。

YoutubePlayer(
    context: context,
    initialVideoId: "iLnmTe5Q2Qw",
    flags: YoutubePlayerFlags(
      hideControls: true,
    ),
    onPlayerInitialized: (controller) {
      //Create your own UI using this controller
      //on top of the player.
    },
),

想通过Youtube链接播放？

该插件还提供了convertUrlToId()方法，该方法将youtube链接转换为其相应的视频ID。

String videoId;
videoId = YoutubePlayer.convertUrlToId("https://www.youtube.com/watch?v=BBAyRBTfsOU");
print(videoId); // BBAyRBTfsOU

示例

更详细的示例

笔记

在此处了解有关配置选项的更多信息。

下载

从上面的徽章下载apk并尝试该插件。

限制

由于该插件基于平台视图。此插件需要Android API级别20或更高版本。

如果您只想面向Android并需要支持Android Kitkat或更低版本，那么您可以使用youtube_player。

GitHub

https://github.com/sarbagyastha/youtube_player_flutter