Flutter视频播放插件flutter_youtube_video_player的使用

Flutter视频播放插件flutter_youtube_video_player的使用

A Flutter package for embedding a YouTube player with customizable controls and features.

Alt text

安装

在你的 pubspec.yaml 文件中添加以下行：

dependencies:
  flutter_youtube_player: ^0.1.2

然后运行：

flutter pub get

使用

在你的 Dart 代码中导入该包：

import 'package:flutter_youtube_player/flutter_youtube_player.dart';

使用 PotraitPlayer 小部件在应用中嵌入 YouTube 播放器：

PotraitPlayer(
  link: 'YOUR_YOUTUBE_VIDEO_URL', // 替换为实际的 YouTube 视频 URL
  aspectRatio: 16 / 9, // 调整所需的宽高比
  kColorWhite: Colors.white, // 可选：自定义颜色主题
  kColorPrimary: Colors.orange,
  kColorBlack: Colors.black,
);

参数

  • link: YouTube 视频 URL。
  • aspectRatio: 播放器的宽高比。
  • kColorWhite: （可选）白色背景元素的颜色。
  • kColorPrimary: （可选）按钮和进度条的主要颜色。
  • kColorBlack: （可选）黑色背景元素的颜色。

特性

  • 播放/暂停控制: 点击视频以切换播放/暂停。还有额外的播放/暂停按钮可用。
  • 亮度控制: 在视频左侧垂直滑动以调整亮度。
  • 音量控制: 在视频右侧垂直滑动以调整音量。
  • 寻求控制: 通过点击相应的按钮向前或向后寻求。
  • 全屏: 点击全屏按钮以切换到横屏模式。
  • 设置弹出窗口: 点击设置按钮以访问其他设置。

示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('YouTube Player 示例'),
        ),
        body: PotraitPlayer(
          link: 'YOUR_YOUTUBE_VIDEO_URL', // 替换为实际的 YouTube 视频 URL
          aspectRatio: 16 / 9,
        ),
      ),
    );
  }
}

将 YOUR_YOUTUBE_VIDEO_URL 替换为你想要播放的实际 YouTube 视频 URL。此外，根据项目的需要，可以添加更多部分到 README 中，如“贡献”，“问题”和“变更日志”。

许可证

该项目在 MIT 许可下发布 - 详情请参阅 LICENSE 文件。


更多关于Flutter视频播放插件flutter_youtube_video_player的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter视频播放插件flutter_youtube_video_player的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter应用中使用flutter_youtube_video_player插件来播放YouTube视频的示例代码。

首先，确保你的Flutter项目已经设置完毕，并且在pubspec.yaml文件中添加了flutter_youtube_video_player依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_youtube_video_player: ^^最新版本号  # 请替换为最新的版本号

然后，运行flutter pub get来获取依赖。

接下来，在你的Flutter应用中，你可以按照以下步骤使用flutter_youtube_video_player：

  1. 导入必要的包：
import 'package:flutter/material.dart';
import 'package:flutter_youtube_video_player/flutter_youtube_video_player.dart';
  1. 创建YouTube视频播放器：

在你的主页面或者任何你想显示视频的页面，你可以创建一个YoutubePlayerController和YoutubePlayerBuilder。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VideoPlayerScreen(),
    );
  }
}

class VideoPlayerScreen extends StatefulWidget {
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化控制器并设置视频ID
    _controller = YoutubePlayerController(
      initialVideoId: '你的YouTube视频ID',
      flags: YoutubePlayerFlags(
        autoPlay: false,
        mute: false,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('YouTube Video Player'),
      ),
      body: Center(
        child: YoutubePlayerBuilder(
          controller: _controller,
          builder: (context, player) {
            return player;
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 控制播放/暂停
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        tooltip: _controller.value.isPlaying ? 'Pause' : 'Play',
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 释放控制器资源
    _controller.dispose();
    super.dispose();
  }
}

在这个示例中：

  • YoutubePlayerController 用于控制YouTube视频的播放。
  • YoutubePlayerBuilder 用于构建YouTube播放器视图。
  • 浮动按钮（FloatingActionButton）用于控制视频的播放和暂停。

请注意，将 '你的YouTube视频ID' 替换为你实际想要播放的YouTube视频的ID。

这个示例展示了如何在Flutter应用中集成和使用flutter_youtube_video_player插件来播放YouTube视频。你可以根据需要进一步自定义和扩展这个基础示例。

回到顶部