Flutter 如何毫不延迟地在视频播放器上连续播放视频？

我希望在Flitter中重新创建Snapchat的背靠背视频格式。由于

video\u player

在视频结束时缺少回调（否则很容易回调地狱），我想知道是否有人对构建这样的东西有一些建议

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';


void main() {
  runApp(MaterialApp(
    title: 'My app', // used by the OS task switcher
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  List<VideoPlayerController> _controllers = [];
  VoidCallback listener;
  bool _isPlaying = false;
  int _current = 0;

  @override
  void initState() {

   super.initState();


    // Add some sample videos
    _controllers.add(VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    ));
    _controllers.add(VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    ));
    _controllers.add(VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    ));

    this.tick();

    // Try refreshing by brute force (this isn't going too well)
    new Timer.periodic(Duration(milliseconds: 100), (Timer t) {
      int delta = 99999999;
      if(_controllers[_current].value != null) {
        delta = (_controllers[_current].value.duration.inMilliseconds - _controllers[_current].value.position.inMilliseconds);
      }
      print("Tick " + delta.toString());
      if(delta < 500) {
        _current += 1;
        this.tick();
      }
    });

  }

  void tick() async {
    print("Current: " + _current.toString());

    await _controllers[_current].initialize();
    await _controllers[_current].play();

    print("Ready");



    setState((){
      _current = _current;
    });

  }

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: _controllers[_current].value.aspectRatio,
      // Use the VideoPlayer widget to display the video
      child: VideoPlayer(_controllers[_current]),
    );
  }
}

导入'dart:async'；
进口“包装：颤振/材料.省道”；
导入“package:video_player/video_player.dart”；
void main（）{
runApp（材料应用程序）(
标题：“我的应用程序”，//由操作系统任务切换程序使用
主页：MyHomePage（），
));
}
类MyHomePage扩展StatefulWidget{
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
列表_控制器=[]；
无效回调侦听器；
bool_isplay=false；
int _电流=0；
@凌驾
void initState（）{
super.initState（）；
//添加一些示例视频
_控制器。添加（VideoPlayerController.network(
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
));
_控制器。添加（VideoPlayerController.network(
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
));
_控制器。添加（VideoPlayerController.network(
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
));
这个。勾选（）；
//尝试用蛮力刷新（这不太顺利）
新计时器。周期性（持续时间（毫秒：100），（计时器t）{
内部增量=9999999；
if（_控制器[_当前].value！=null）{
增量=（_控制器[_当前].value.duration.inmillizes-_控制器[_当前].value.position.inmillizes）；
}
打印（“勾选”+delta.toString（））；
如果（δ<500）{
_电流+=1；
这个。勾选（）；
}
});
}
void tick（）异步{
打印（“当前：+_Current.toString（））；
等待_控制器[_当前]。初始化（）；
等待_控制器[_当前].play（）；
打印（“就绪”）；
设置状态（）{
_电流=_电流；
});
}
@凌驾
小部件构建（构建上下文）{
返回AspectRatio(
aspectRatio:_控制器[_当前].value.aspectRatio，
//使用VideoPlayer小部件显示视频
子项：视频播放器（_控制器[_当前]），
);
}
}

---

我现在播放的是第一个视频，但是第一个和第二个视频之间有很长的延迟。我相信这与我无法摆脱连接到第0项的侦听器有关。

初始化网络

VideoPlayerController

可能需要一些时间才能完成。您可以在播放当前视频时初始化下一个视频的控制器。这将占用更多的内存，但我认为如果只预缓冲一两个视频，不会产生太大的问题。然后，当按下下一个或上一个按钮时，视频就可以播放了

这是我的解决办法。它的功能，它预先缓冲上一个和下一个视频，完成后跳到下一个视频，显示当前位置和缓冲，暂停和长按播放

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

main() {
  runApp(MaterialApp(
    home: VideoPlayerDemo(),
  ));
}

class VideoPlayerDemo extends StatefulWidget {
  @override
  _VideoPlayerDemoState createState() => _VideoPlayerDemoState();
}

class _VideoPlayerDemoState extends State<VideoPlayerDemo> {
  int index = 0;
  double _position = 0;
  double _buffer = 0;
  bool _lock = true;
  Map<String, VideoPlayerController> _controllers = {};
  Map<int, VoidCallback> _listeners = {};
  Set<String> _urls = {
    'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4#1',
    'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4#2',
    'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4#3',
    'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4#4',
    'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4#5',
    'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4#6',
    'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4#7',
  };

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

    if (_urls.length > 0) {
      _initController(0).then((_) {
        _playController(0);
      });
    }

    if (_urls.length > 1) {
      _initController(1).whenComplete(() => _lock = false);
    }
  }

  VoidCallback _listenerSpawner(index) {
    return () {
      int dur = _controller(index).value.duration.inMilliseconds;
      int pos = _controller(index).value.position.inMilliseconds;
      int buf = _controller(index).value.buffered.last.end.inMilliseconds;

      setState(() {
        if (dur <= pos) {
          _position = 0;
          return;
        }
        _position = pos / dur;
        _buffer = buf / dur;
      });
      if (dur - pos < 1) {
        if (index < _urls.length - 1) {
          _nextVideo();
        }
      }
    };
  }

  VideoPlayerController _controller(int index) {
    return _controllers[_urls.elementAt(index)];
  }

  Future<void> _initController(int index) async {
    var controller = VideoPlayerController.network(_urls.elementAt(index));
    _controllers[_urls.elementAt(index)] = controller;
    await controller.initialize();
  }

  void _removeController(int index) {
    _controller(index).dispose();
    _controllers.remove(_urls.elementAt(index));
    _listeners.remove(index);
  }

  void _stopController(int index) {
    _controller(index).removeListener(_listeners[index]);
    _controller(index).pause();
    _controller(index).seekTo(Duration(milliseconds: 0));
  }

  void _playController(int index) async {
    if (!_listeners.keys.contains(index)) {
      _listeners[index] = _listenerSpawner(index);
    }
    _controller(index).addListener(_listeners[index]);
    await _controller(index).play();
    setState(() {});
  }

  void _previousVideo() {
    if (_lock || index == 0) {
      return;
    }
    _lock = true;

    _stopController(index);

    if (index + 1 < _urls.length) {
      _removeController(index + 1);
    }

    _playController(--index);

    if (index == 0) {
      _lock = false;
    } else {
      _initController(index - 1).whenComplete(() => _lock = false);
    }
  }

  void _nextVideo() async {
    if (_lock || index == _urls.length - 1) {
      return;
    }
    _lock = true;

    _stopController(index);

    if (index - 1 >= 0) {
      _removeController(index - 1);
    }

    _playController(++index);

    if (index == _urls.length - 1) {
      _lock = false;
    } else {
      _initController(index + 1).whenComplete(() => _lock = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Playing ${index + 1} of ${_urls.length}"),
      ),
      body: Stack(
        children: <Widget>[
          GestureDetector(
            onLongPressStart: (_) => _controller(index).pause(),
            onLongPressEnd: (_) => _controller(index).play(),
            child: Center(
              child: AspectRatio(
                aspectRatio: _controller(index).value.aspectRatio,
                child: Center(child: VideoPlayer(_controller(index))),
              ),
            ),
          ),
          Positioned(
            child: Container(
              height: 10,
              width: MediaQuery.of(context).size.width * _buffer,
              color: Colors.grey,
            ),
          ),
          Positioned(
            child: Container(
              height: 10,
              width: MediaQuery.of(context).size.width * _position,
              color: Colors.greenAccent,
            ),
          ),
        ],
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(onPressed: _previousVideo, child: Icon(Icons.arrow_back)),
          SizedBox(width: 24),
          FloatingActionButton(onPressed: _nextVideo, child: Icon(Icons.arrow_forward)),
        ],
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“package:video_player/video_player.dart”；
main（）{
runApp（材料应用程序）(
主页：VideoPlayerDemo（），
));
}
类VideoPlayerDemo扩展StatefulWidget{
@凌驾
_VideoPlayerDemoState createState（）=>\u VideoPlayerDemoState（）；
}
类\u VideoPlayerDemoState扩展了状态{
int指数=0；
双_位置=0；
双缓冲区=0；
布尔锁=真；
映射_控制器={}；
映射_侦听器={}；
设置_URL={
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4#1',
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4#2',
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4#3',
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4#4',
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4#5',
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4#6',
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4#7',
};
@凌驾
void initState（）{
super.initState（）；
如果（_url.length>0）{
_初始化控制器（0）。然后（（）{
_播放控制器（0）；
});
}
如果（_url.length>1）{
_初始化控制器（1）。完成时（（）=>_lock=false）；
}
}
VoidCallback\u listenerSpawner（索引）{
返回（）{
int-dur=_控制器（索引）.value.duration.in毫秒；
int pos=_控制器（索引）.value.position.in毫秒；
int buf=_控制器（索引）.value.buffered.last.end.inmillizes；
设置状态（）{
如果（dur\u lock=false）；
}
}
void\u nextVideo（）异步{
if（_lock | | index==_url.length-1）{
返回；
}
_lock=true；
_停止控制器（索引）；
如果（索引-1>=0）{
_移除控制器（索引-1）；
}
_播放控制器（++索引）；
如果（索引==\u url.length-1）{
_锁=假；
}否则{
_初始化控制器（索引+1）。完成时（（）=>_lock=false）；
}
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“播放${uURL.length}的${index+1}”），
),
主体：堆栈(
儿童：[
手势检测器(
仅长按开始：（）=>_控制器（索引）。暂停（），
仅长按结束：（）=>_控制器（索引）.play（），
儿童：中心(
孩子：AspectRatio(
aspectRatio:_控制器（索引）.value.aspectRatio，
子：中心（子：视频播放器（_控制器（索引）），
),
),
),
定位(
子：容器(
身高：10，
宽度：MediaQuery.of（context）.size.width*\u缓冲区，
颜色：颜色。灰色，
),
),
定位(
子：容器(