multi_vid_player/lib/pages/multi_canvas_player/page.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:vid_player_demo/controller/player_controller.dart';
import 'package:vid_player_demo/pages/canvas_player/view.dart';
import 'package:vid_player_demo/pages/image_player/view.dart';

class MultiCanvasPlayerPage extends StatefulWidget {
  const MultiCanvasPlayerPage({Key? key}) : super(key: key);
  @override
  _MultiCanvasPlayerPageState createState() => _MultiCanvasPlayerPageState();
}

class _MultiCanvasPlayerPageState extends State<MultiCanvasPlayerPage> {
  final vidURLs = [
    "http://cdn-bj.fis.plus/093BE20682B14BFB95D811F221A2B2FD.vid",
    "http://cdn-bj.fis.plus/f2d1607f66cc42d0b4a6f4e55afbaeca.vid",
    "http://cdn-bj.fis.plus/1fb270dbb35e448a8792eb46df882264.vid",
    "http://cdn-bj.fis.plus/95867692c39b4293bc0928192d1b53cb.vid",
    "http://cdn-bj.fis.plus/582ba3077ea64ace882a7e11577a842b.vid",
    "http://cdn-bj.fis.plus/ae37b3910cea406484f76da7b002708e.vid",
    "http://cdn-bj.fis.plus/1d21144f3e524477bb8471d8d66da603.vid",
    "http://cdn-bj.fis.plus/1fb270dbb35e448a8792eb46df882264.vid",
    "http://cdn-bj.fis.plus/95867692c39b4293bc0928192d1b53cb.vid",
  ];

  final _playerStateController = Get.put(PlayerStateController());
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("多个播放器同时播放"),
        ),
        body: Column(
          children: [
            const SizedBox(height: 24),
            ElevatedButton(
                onPressed: () => {_playerStateController.play(context)},
                child: const Text("Play Together")),
            const SizedBox(height: 24),
            SizedBox(height: 800, child: buildPlayersGrid(vidURLs)),
          ],
        ));
  }

  Widget buildPlayersGrid(List<String> urls) {
    return GridView.count(
      crossAxisCount: 3,
      childAspectRatio: 1,
      shrinkWrap: true,
      children: urls
          .map((url) => CanvasPlayerView(url, viewSize: const Size(300, 300)))
          .toList(),
    );
  }

  @override
  void dispose() {
    super.dispose();
    Get.delete<PlayerStateController>();
    _playerStateController.dispose();
  }
}