Flutter全景视频播放插件video_360的使用

插件简介

video_360 是一个用于在Flutter应用中播放360度全景视频的插件，支持Android和iOS平台。它依赖于以下开源库：

• Android: 使用 AndroidX Media3 (1.1.1 版本，基于 Google ExoPlayer 2.19.1)
• iOS: 使用 Swifty360Player (版本 0.2.5)

注意事项

• 对于 Flutter 版本 <= 2.10.5 的项目，请使用 video_360 版本 0.0.6。
• 对于 Flutter 版本 >= 3.0.0 的项目，请使用 video_360 版本 0.0.8。

安装

要安装 video_360 插件，请按照以下步骤操作：

1. 在 pubspec.yaml 文件中添加依赖项：

   dependencies:
     video_360: ^0.0.9
   

2. 确保满足以下最低 SDK 要求：

   • Android: 最低 SDK 目标版本为 19。
   • iOS: 最低 iOS 目标版本为 11.0，Swift 版本为 5.x。

使用方法

导入库

首先，在 Dart 文件中导入 video_360 库：

import 'package:video_360/video_360.dart';

添加 Video360View 组件

接下来，在你的 Widget 树中添加 Video360View 组件，并配置其属性：

Video360View(
  onVideo360ViewCreated: _onVideo360ViewCreated,
  url: 'YOUR_360_VIDEO_URL',    
  isRepeat: true, // 默认为 false
  onPlayInfo: (Video360PlayInfo info) {
    // 回调函数，用于获取播放信息
  },
)

控制器方法

通过 Video360Controller 可以控制视频的播放、暂停等行为：

• play(): 播放视频。
• stop(): 停止视频。
• reset(): 重置视频。
• jumpTo(milliseconds): 跳转到指定时间点（参数为毫秒）。
• seekTo(milliseconds): 快进或快退指定时间（参数为正数表示快进，负数表示快退）。

示例代码

下面是一个完整的示例代码，展示了如何在 Flutter 应用中集成并使用 video_360 插件：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Video360Controller? controller;

  String durationText = '';
  String totalText = '';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Video 360 Plugin example app'),
      ),
      body: Stack(
        children: [
          Center(
            child: SizedBox(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Video360View(
                url: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8',
                onVideo360ViewCreated: _onVideo360ViewCreated,
                onPlayInfo: (Video360PlayInfo info) {
                  setState(() {
                    durationText = info.duration.toString();
                    totalText = info.total.toString();
                  });
                },
              ),
            ),
          ),
          Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  MaterialButton(
                    onPressed: () {
                      controller?.play();
                    },
                    color: Colors.grey[100],
                    child: const Text('Play'),
                  ),
                  MaterialButton(
                    onPressed: () {
                      controller?.stop();
                    },
                    color: Colors.grey[100],
                    child: const Text('Stop'),
                  ),
                  MaterialButton(
                    onPressed: () {
                      controller?.reset();
                    },
                    color: Colors.grey[100],
                    child: const Text('Reset'),
                  ),
                  MaterialButton(
                    onPressed: () {
                      controller?.jumpTo(80000);
                    },
                    color: Colors.grey[100],
                    child: const Text('1:20'),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  MaterialButton(
                    onPressed: () {
                      controller?.seekTo(-2000);
                    },
                    color: Colors.grey[100],
                    child: const Text('<<'),
                  ),
                  MaterialButton(
                    onPressed: () {
                      controller?.seekTo(2000);
                    },
                    color: Colors.grey[100],
                    child: const Text('>>'),
                  ),
                  Flexible(
                    child: MaterialButton(
                      onPressed: () {},
                      color: Colors.grey[100],
                      child: Text('$durationText / $totalText'),
                    ),
                  ),
                ],
              )
            ],
          )
        ],
      ),
    );
  }

  void _onVideo360ViewCreated(Video360Controller controller) {
    this.controller = controller;
    this.controller?.play();
  }
}

此示例创建了一个简单的 Flutter 应用程序，其中包含一个360度视频播放器，并提供了基本的播放控制按钮。你可以根据需要调整视频 URL 和其他参数。