Воспроизведение видео, когда оно завершено, и отображается значок воспроизведения, на который пользователь нажимает

#flutter #dart

#flutter #dart

Вопрос:

Редактировать: Я только начал изучать Flutter, и мне еще многому предстоит научиться. На данный момент мне было сложно искать способы воспроизведения видео. Моя цель — воспроизвести видео, когда оно закончено, и отображается значок воспроизведения, на который пользователь может нажать. Это единственные пакеты, которые я импортировал.

 import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';
  
  Widget _buildVideoPlay() {
    return Center(
      child: _controller.value.initialized ? _VideoStack() : Container(),
    );
  }

 Widget _VideoStack() {
    return Stack(
      children: [
        _VideoCore(),
        FlatButton(
          onPressed: () => setState(() {
            _controller.value.isPlaying ? _controller.initialize() : _controller.pause()
        }),
          child: Center(
            child: _controller.value.isPlaying
                ? Icon(Icons.pause, color: Colors.blue, size: 30.0)
                : Icon(Icons.play_arrow, color: Colors.blue, size: 30.0),
        ),
      ],
    );
  }

  Widget _VideoCore() {
    return Container(
      child: Center(
        child: AspectRatio(
          aspectRatio: _controller.value.aspectRatio,
          child: VideoPlayer(_controller),
        ),
      ),
    );
  }
  

Ответ №1:

В этом случае установите для параметра finishedPlaying значение true, если длительность текущей позиции равна длительности видео. Затем используйте это логическое значение, чтобы отобразить кнопку воспроизведения.

  bool finishedPlaying = false;
  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
    setState(() {
        });
      if (_controller.value.duration == _controller.value.position) {
        setState(() {
          finishedPlaying = true;
        });
        
      }
    });
  }
  
 FlatButton(
          onPressed: () => setState(() {
                if (finishedPlaying) {
                  _controller.play(); // Replay the video
                } else {
                  _controller.value.isPlaying
                      ? _controller.play()
                      : _controller.pause();
                }
              }),
          child: Center(
              child: finishedPlaying
                  ? Icon(Icons.replay, color: Colors.blue, size: 30.0)
                  : (_controller.value.isPlaying
                      ? Icon(Icons.pause, color: Colors.blue, size: 30.0)
                      : Icon(Icons.play_arrow,
                          color: Colors.blue, size: 30.0)))),
  

Комментарии:

1. Привет @sleepingkit. Я пробовал, но это не сработает. У меня уже есть это в моем коде, где видео инициализируется перед нажатием кнопки воспроизведения. ` @override аннулирует initState() { super.initState(); controller = VideoPlayerController.network(url) ..инициализируйте().затем(( ) { setState(() {}); }); }`

2. @NoobDev В какой у вас сейчас ситуации, постоянно отображается значок паузы, а значок со стрелкой воспроизведения не отображается, когда видео закончено?

3. Они оба работают хорошо. Я могу приостановить и воспроизвести видео прямо сейчас. Моя цель — когда видео будет завершено, появится значок воспроизведения, и при нажатии на него видео будет воспроизводиться снова.

4. @NoobDev о, я вижу, я обновил ответ, посмотрим, поможет ли это вам

5. Спасибо! Не следует ли мне что-то изменить в моем виджете _VideoStack?

Ответ №2:

я не понимаю, что вы подразумеваете под ответом, это похоже на цикл? вы можете попробовать это

 IconButton(
                        icon: Icon(
                          Icons.loop,
                          color: _controller.value.isLooping
                              ? Colors.green
                              : Colors.black,
                        ),
                        onPressed: () {
                          _controller.setLooping(!_controller.value.isLooping);
                        })
  

Комментарии:

1. Моя цель — использовать значок (Icons.replay) : D

Ответ №3:

 bool isPlay = false;
bool finishedPlaying = false;

@override
void initState() {
super.initState();
videoPlayerController.addListener(() {
  setState(() {
  });
  if (videoPlayerController.value.duration == videoPlayerController.value.position) {
    setState(() {
      isPlay = false;
      finishedPlaying = true;
    });
  } else {
    setState(() {
      finishedPlaying = false;
    });
  }
});
  

}

 Stack(
    children: [
      CachedVideoPlayer(videoPlayerController),
      Align(
        alignment: Alignment.center,
        child: IconButton(
          onPressed: () {
            if (finishedPlaying) {
              videoPlayerController.seekTo(Duration.zero);
              videoPlayerController.play(); // Replay the video
            }
            if (isPlay) {
              videoPlayerController.pause();
            } else {
              videoPlayerController.play();
            }
            setState(() {
              isPlay = !isPlay;
            });
          },
          icon: Icon(
            finishedPlaying
                ? Icons.replay
                : isPlay
                    ? Icons.pause_circle
                    : Icons.play_circle,
            size: 30,
          ),
        ),
      ),
    ],
  ),