Flutter视频播放插件play_video的使用

Flutter视频播放插件play_video的使用

简介

play_video 是一个用于在Flutter应用程序中播放视频的插件，支持iOS、Android和Web平台。该插件提供了丰富的功能，如硬件加速、多视频支持、自定义控件等。

支持的平台

*不同浏览器可能有不同的视频播放能力（支持的格式、自动播放等）。请根据具体浏览器进行测试。

功能特性

• ✅ 视频播放
• ✅ 跨平台支持
• ✅ 硬件/GPU加速
• ✅ 多视频支持（下一首/上一首/跳转/随机播放）
• ✅ 音量/播放速率/音调/亮度调节
• ✅ 锁定/解锁
• ✅ 完全可定制的控件
• ✅ 截图功能
• ✅ 默认UI中的完整视频控件
• ✅ 多种功能性的可复用小部件
• ✅ 更多设置（速度/适配/等）
• ✅ 喜欢/取消喜欢视频
• [Todo] 历史记录带时间
• [Todo] 播放列表
• [Todo] 喜欢/播放列表/历史记录双重验证

Web平台注意事项

Web平台不支持 dart:io，因此避免使用 Video.file 构造函数或 VideoType.file。使用这些构造函数会抛出 UnimplementedError。某些功能（如音量、亮度）在Web上可能无法正常工作。

支持的视频格式

• iOS 和 macOS: 使用 AVPlayer，支持的格式取决于iOS版本。可以通过 AVURLAsset 查询支持的音频视频格式。
• Android: 使用 ExoPlayer，支持的格式可以参考 ExoPlayer官方文档。
• Web: 支持的格式取决于用户的浏览器（厂商和版本），请参考 video_player_web包 获取更多信息。

示例代码

1. 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  play_video: ^0.0.1

2. 初始化插件

在 main.dart 文件中初始化 play_video 插件：

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

void main() async {
  // 确保Flutter绑定已经初始化
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化视频播放器
  await PlayVideoRender.init();
  
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false, // 移除调试模式横幅
      home: PlayVideoScreen(),
    ),
  );
}

3. 单个视频播放

创建一个播放单个视频的页面：

class PlayVideoScreen extends StatefulWidget {
  const PlayVideoScreen({super.key});

  @override
  State<PlayVideoScreen> createState() => _PlayVideoScreenState();
}

class _PlayVideoScreenState extends State<PlayVideoScreen> {
  late PlayVideoController controller;

  @override
  void initState() {
    super.initState();

    // 初始化控制器，设置自动播放并指定视频路径
    controller = PlayVideoController(
      isAutoPlay: true,
      videos: Videos.single(
        videoPath: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
        type: VideoType.network, // 指定视频类型为网络视频
      ),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PlayVideo(
        controller: controller, // 绑定控制器
        width: MediaQuery.sizeOf(context).width, // 设置宽度为屏幕宽度
        height: MediaQuery.sizeOf(context).height, // 设置高度为屏幕高度
      ),
    );
  }
}

4. 多个视频播放

创建一个播放多个视频的页面：

class PlayVideoScreen extends StatefulWidget {
  const PlayVideoScreen({super.key});

  @override
  State<PlayVideoScreen> createState() => _PlayVideoScreenState();
}

class _PlayVideoScreenState extends State<PlayVideoScreen> {
  late PlayVideoController controller;

  @override
  void initState() {
    super.initState();

    // 初始化控制器，设置自动播放并指定多个视频路径
    controller = PlayVideoController(
      isAutoPlay: true,
      videos: Videos.multiVideoWithSingleType(
        videos: [
          'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
          'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
          'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
        ],
        type: VideoType.network, // 指定视频类型为网络视频
      ),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PlayVideo(
        controller: controller, // 绑定控制器
        width: MediaQuery.sizeOf(context).width, // 设置宽度为屏幕宽度
        height: MediaQuery.sizeOf(context).height, // 设置高度为屏幕高度
      ),
    );
  }
}

使用说明

play_video 插件提供了完全可定制的UI和默认UI，用户可以通过手势控制视频播放。控制器本身提供了对视频播放的全面控制，包括播放、暂停、快进、快退等操作。此外，还可以通过控制器获取播放器的数据，例如当前播放时间、总时长等，方便实现历史记录、播放列表等功能。

注意事项

• 如果你在Android平台上使用网络视频，请确保在 AndroidManifest.xml 文件中添加了 android.permission.INTERNET 权限：

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