Flutter音频播放插件pod_player_new的使用

Video player for flutter web & mobile devices, pod player supports playing video from Youtube and Vimeo

pod player 是一个简单且易于使用的视频播放器。其视频控件与YouTube播放器类似（可自定义控件），并且可以播放来自 Youtube 和 Vimeo 的视频（通过提供URL或视频ID）。

该插件基于flutter的官方 video_player 插件构建。

功能 #

• 播放 youtube 视频（使用视频URL或ID）
• 播放 vimeo 视频（使用视频ID）
• 视频覆盖层类似于YouTube
• 双击 求进度。
• 单击视频显示/隐藏视频覆盖层。
• 自动隐藏覆盖层
• 更改 播放速度
• 自定义覆盖层
• 自定义进度条
• 自定义标签
• 更改视频质量 （适用于vimeo和youtube）
• 启用/禁用全屏播放器
• 支持直播YouTube视频
• [TODO] 支持视频播放列表

Web上的功能 #

• 在视频播放器上双击以启用/禁用全屏模式

• 静音/取消静音 音量

• 视频播放器与键盘集成

  • 空格键 播放/暂停视频
  • M 静音/取消静音视频
  • F 启用/禁用全屏
  • ESC 启用/禁用全屏
  • -> 向前寻求视频
  • <- 向后寻求视频

• 双击视频（启用/禁用全屏）

演示 #

• 从YouTube播放视频

• Vimeo播放器和自定义视频播放器

更改质量和播放速度	从任何地方控制视频

• 与YouTube类似的控件

带覆盖层	不带覆盖层 (alwaysShowProgressBar = true)

• 在移动设备上全屏显示

• 视频控件

双击时	自定义进度条

• Web上的视频播放器

使用 #

• 安装
  • Android
  • iOS
  • Web
• 如何使用
• 配置pod player
• 添加缩略图
• 如何从YouTube播放视频
• 如何从Vimeo播放视频
• 视频播放器选项
• 示例

安装 #

在你的Flutter项目的 pubspec.yaml 文件中：

dependencies:
  pod_player_new: <latest_version>

Android #

如果你正在使用基于网络的视频，请确保在你的Android清单文件中包含以下权限，该文件位于 <project root>/android/app/src/main/AndroidManifest.xml：

<uses-permission android:name="android.permission.INTERNET"/>

如果你需要访问使用http（而不是https）URL的视频。

位于应用标签内：

<application
  - - -
  - - - - - -
  android:usesCleartextTraffic="true"

iOS #

将权限添加到你的应用的Info.plist文件中，该文件位于 <project root>/ios/Runner/Info.plist：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Web ( 不推荐在生产环境中使用) #

如果你在Web上使用 youtube 或 vimeo 播放器，则在Web上会有一些 CORS 问题， 因此请使用此 flutter_cors 包。

使用 flutter_cors 包来启用或禁用CORS

要启用CORS（运行此命令）

dart pub global activate flutter_cors
fluttercors --enable

要禁用CORS（运行此命令）

fluttercors --disable

如何使用 #

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

class PlayVideoFromNetwork extends StatefulWidget {
  const PlayVideoFromNetwork({Key? key}) : super(key: key);

  [@override](/user/override)
  State<PlayVideoFromNetwork> createState() => _PlayVideoFromNetworkState();
}

class _PlayVideoFromNetworkState extends State<PlayVideoFromNetwork> {
  late final PodPlayerController controller;

  [@override](/user/override)
  void initState() {
    controller = PodPlayerController(
      playVideoFrom: PlayVideoFrom.network(
        'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
      ),
    )..initialise();
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: PodVideoPlayer(controller: controller),
    );
  }
}

配置pod player #

  controller = PodPlayerController(
    playVideoFrom: PlayVideoFrom.youtube('https://youtu.be/A3ltMaM6noM'),
    podPlayerConfig: const PodPlayerConfig(
      autoPlay: true,
      isLooping: false,
      videoQualityPriority: [720, 360]
    )
  )..initialise();

添加缩略图 #

PodVideoPlayer(
  controller: controller,
  videoThumbnail: const DecorationImage(
    /// load from asset: AssetImage('asset_path')
    image: NetworkImage('https://images.unsplash.com/photo-1569317002804-ab77bcf1bce4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dW5zcGxhc2h8ZW58MHx8MHx8&w=1000&q=80',
    ),
    fit: BoxFit.cover,
  ),
),

添加PodPlayerLabels (自定义标签) #

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: PodVideoPlayer(
      controller: controller,
      podPlayerLabels: const PodPlayerLabels(
        play: "Play label customized",
        pause: "Pause label customized",
        ...
      ),
    ),
  );
}

如何从YouTube播放视频 #

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

class PlayVideoFromYoutube extends StatefulWidget {
  const PlayVideoFromYoutube({Key? key}) : super(key: key);

  [@override](/user/override)
  State<PlayVideoFromYoutube> createState() => _PlayVideoFromYoutubeState();
}

class _PlayVideoFromYoutubeState extends State<PlayVideoFromYoutube> {
  late final PodPlayerController controller;

  [@override](/user/override)
  void initState() {
    controller = PodPlayerController(
      playVideoFrom: PlayVideoFrom.youtube('https://youtu.be/A3ltMaM6noM'),
    )..initialise();
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: PodVideoPlayer(controller: controller),
    );
  }
}

如何从Vimeo播放视频 #

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

class PlayVideoFromVimeo extends StatefulWidget {
  const PlayVideoFromVimeo({Key? key}) : super(key: key);

  [@override](/user/override)
  State<PlayVideoFromVimeo> createState() => _PlayVideoFromVimeoState();
}

class _PlayVideoFromVimeoState extends State<PlayVideoFromVimeo> {
  late final PodPlayerController controller;

  [@override](/user/override)
  void initState() {
    controller = PodPlayerController(
      playVideoFrom: PlayVideoFrom.vimeo('518228118'),
    )..initialise();
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: PodVideoPlayer(controller: controller),
    );
  }
}