Flutter音视频播放插件vap_player_plugin的使用

Flutter音视频播放插件vap_player_plugin的使用

开始使用

本项目是一个用于Flutter的插件包，包含了适用于Android和/或iOS的平台特定实现代码。

示例代码

以下是一个完整的示例，展示了如何在Flutter应用中使用vap_player_plugin插件来播放音视频文件。

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:path_provider/path_provider.dart';
import 'package:vap_player_plugin/vap_player_plugin.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyVapPlayerWidget(),
    );
  }
}

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

  [@override](/user/override)
  State<MyVapPlayerWidget> createState() => _MyVapPlayerWidgetState();
}

class _MyVapPlayerWidgetState extends State<MyVapPlayerWidget> {
  String? localFilePath;
  bool isLoading = true;

  [@override](/user/override)
  void initState() {
    super.initState();
    _downloadVapFile();
  }

  Future<void> _downloadVapFile() async {
    const String fileUrl =
        'https://bunnylive.in/entry/entryFiles/67095dfe1e607.mp4'; // 替换为您的文件URL
    try {
      // 获取存储文件的目录
      final directory = await getApplicationDocumentsDirectory();
      final filePath = '${directory.path}/animation.vap';

      // 下载文件
      final response = await http.get(Uri.parse(fileUrl));
      if (response.statusCode == 200) {
        final file = File(filePath);
        await file.writeAsBytes(response.bodyBytes);
        setState(() {
          localFilePath = filePath;
          isLoading = false;
        });
      } else {
        throw Exception('下载文件失败');
      }
    } catch (e) {
      print('下载文件时出错: $e');
      setState(() {
        isLoading = false;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: isLoading
          ? const CircularProgressIndicator()
          : localFilePath != null
              ? VapPlayerView(
                  videoPath: localFilePath!,
                  loop: 2,
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height,
                  onReady: () => print("播放器准备就绪"),
                  onStart: () => print("开始播放"),
                  onComplete: () => print("播放完成"),
                  onError: (error) => print("错误: $error"),
                )
              : const Text('加载动画失败。'),
    );
  }
}

代码说明

1. 导入必要的库:

   import 'dart:io';
   import 'package:flutter/material.dart';
   import 'package:http/http.dart' as http;
   import 'package:path_provider/path_provider.dart';
   import 'package:vap_player_plugin/vap_player_plugin.dart';
   

2. 主函数和MaterialApp配置:

   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return MaterialApp(
         theme: ThemeData(
           primarySwatch: Colors.blue,
           useMaterial3: true,
         ),
         debugShowCheckedModeBanner: false,
         home: const MyVapPlayerWidget(),
       );
     }
   }
   

3. 定义状态类并初始化文件下载:

   class MyVapPlayerWidget extends StatefulWidget {
     const MyVapPlayerWidget({super.key});
   
     [@override](/user/override)
     State<MyVapPlayerWidget> createState() => _MyVapPlayerWidgetState();
   }
   
   class _MyVapPlayerWidgetState extends State<MyVapPlayerWidget> {
     String? localFilePath;
     bool isLoading = true;
   
     [@override](/user/override)
     void initState() {
       super.initState();
       _downloadVapFile();
     }
   

4. 下载文件并保存到本地:

   Future<void> _downloadVapFile() async {
     const String fileUrl =
         'https://bunnylive.in/entry/entryFiles/67095dfe1e607.mp4'; // 替换为您的文件URL
     try {
       // 获取存储文件的目录
       final directory = await getApplicationDocumentsDirectory();
       final filePath = '${directory.path}/animation.vap';
   
       // 下载文件
       final response = await http.get(Uri.parse(fileUrl));
       if (response.statusCode == 200) {
         final file = File(filePath);
         await file.writeAsBytes(response.bodyBytes);
         setState(() {
           localFilePath = filePath;
           isLoading = false;
         });
       } else {
         throw Exception('下载文件失败');
       }
     } catch (e) {
       print('下载文件时出错: $e');
       setState(() {
         isLoading = false;
       });
     }
   }
   

5. 构建UI并在下载完成后显示播放器:

   [@override](/user/override)
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: Colors.black,
       body: isLoading
           ? const CircularProgressIndicator()
           : localFilePath != null
               ? VapPlayerView(
                   videoPath: localFilePath!,
                   loop: 2,
                   width: MediaQuery.of(context).size.width,
                   height: MediaQuery.of(context).size.height,
                   onReady: () => print("播放器准备就绪"),
                   onStart: () => print("开始播放"),
                   onComplete: () => print("播放完成"),
                   onError: (error) => print("错误: $error"),
                 )
               : const Text('加载动画失败。'),
     );
   }