如何在 video_player 上无延迟地连续播放视频？

Posted 2023-02-15

【中文标题】如何在 video_player 上无延迟地连续播放视频？

【英文标题】：How to play videos sequentialy on video_player without delay?

【发布时间】：2019-09-17 03:05:46

【问题描述】：

我希望在 Flutter 中重新创建 Snapchat 的背靠背视频格式。由于video_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]),
    );
  

我现在播放第一个视频，但第一个和第二个之间有很长的延迟。我认为这与我无法摆脱依附于第 0 项的侦听器有关。

【问题讨论】：

您找到了完美的解决方案吗？

【参考方案1】：

初始化网络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)),
        ],
      ),
    );
  

所有逻辑都存在于状态对象中，因此使其变脏。我以后可能会把它变成一个包。

【讨论】：

它可以工作，但是当我们快退时，只是白屏显示没有任何反应，只有视频号码在变化，请你帮我解决一下吗？ @easeccy

你创建了包吗？请提供