[flutter] 플러터에서의 비디오 처리 방법

30 Nov 2023

flutter

Flutter는 크로스 플랫폼 모바일 앱 개발을 위한 프레임워크로서, 비디오 처리 기능을 제공합니다. 이번 포스트에서는 Flutter에서 비디오를 처리하는 방법에 대해 알아보겠습니다.

1. 비디오 패키지 설치

비디오 처리를 위해 먼저 video_player 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.0.0

패키지를 추가한 후에는 pub get 명령어를 실행하여 패키지를 다운로드하고 프로젝트에 적용해야 합니다.

2. 비디오 재생

비디오를 재생하기 위해서는 VideoPlayerController 클래스를 사용해야 합니다. 먼저 VideoPlayerController.network 메서드를 사용하여 비디오를 로드할 수 있습니다. 다음은 온라인 비디오를 로드하는 예제 코드입니다:

import 'package:video_player/video_player.dart';

VideoPlayerController _controller;

@override
void initState() {
  super.initState();
  
  _controller = VideoPlayerController.network(
    'https://example.com/video.mp4',
  )..initialize().then((_) {
    setState(() {});
  });
}

@override
void dispose() {
  super.dispose();
  
  _controller.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: _controller.value.isInitialized
        ? AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: VideoPlayer(_controller),
          )
        : Container(),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        setState(() {
          if (_controller.value.isPlaying) {
            _controller.pause();
          } else {
            _controller.play();
          }
        });
      },
      child: Icon(
        _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
      ),
    ),
  );
}

위 코드는 온라인 비디오를 로드하고 재생하는 기능을 구현한 것입니다. VideoPlayerController.network 메서드를 사용하여 비디오를 로드하고, initialize 메서드를 통해 초기화한 후 VideoPlayer 위젯에 넘겨줍니다. 추가로 floatingActionButton을 통해 재생 및 일시정지 기능을 구현하였습니다.

3. 로컬 비디오 재생

온라인 비디오 외에도 로컬에 저장된 비디오를 재생할 수도 있습니다. 이를 위해서는 VideoPlayerController.file 메서드를 사용하면 됩니다. 다음은 로컬 비디오를 로드하는 예제 코드입니다:

import 'package:video_player/video_player.dart';

VideoPlayerController _controller;

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

  _controller = VideoPlayerController.file(
    File('/path/to/video.mp4'),
  )..initialize().then((_) {
    setState(() {});
  });
}

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

  _controller.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: _controller.value.isInitialized
        ? AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: VideoPlayer(_controller),
          )
        : Container(),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        setState(() {
          if (_controller.value.isPlaying) {
            _controller.pause();
          } else {
            _controller.play();
          }
        });
      },
      child: Icon(
        _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
      ),
    ),
  );
}

위 코드는 로컬에 저장된 비디오를 로드하고 재생하는 기능을 구현한 것입니다. VideoPlayerController.file 메서드를 사용하여 비디오를 로드하고, initialize 메서드를 통해 초기화한 후 VideoPlayer 위젯에 넘겨줍니다.

4. 진행 상황 표시

비디오 재생 중에 진행 상황을 표시하는 기능을 구현하려면, Slider 위젯을 사용하면 됩니다. 다음은 진행 상황 표시 기능을 추가한 예제 코드입니다:

import 'package:video_player/video_player.dart';

VideoPlayerController _controller;
double _sliderValue = 0.0;

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

  _controller = VideoPlayerController.network(
    'https://example.com/video.mp4',
  )..initialize().then((_) {
    setState(() {});
  });

  _controller.addListener(() {
    setState(() {
      _sliderValue = _controller.value.position.inSeconds.toDouble();
    });
  });
}

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

  _controller.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: _controller.value.isInitialized
        ? Column(
            children: [
              AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              ),
              Slider(
                value: _sliderValue,
                min: 0.0,
                max: _controller.value.duration.inSeconds.toDouble(),
                onChanged: (value) {
                  setState(() {
                    _sliderValue = value;
                  });
                  _controller.seekTo(
                    Duration(seconds: value.toInt()),
                  );
                },
              ),
            ],
          )
        : Container(),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        setState(() {
          if (_controller.value.isPlaying) {
            _controller.pause();
          } else {
            _controller.play();
          }
        });
      },
      child: Icon(
        _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
      ),
    ),
  );
}

위 코드는 비디오 재생 중에 진행 상황을 표시하는 기능을 추가한 것입니다. VideoPlayerController.addListener 메서드를 사용하여 비디오 재생 위치가 업데이트될 때마다 _sliderValue 값을 업데이트하고, Slider 위젯의 onChanged 콜백 함수를 통해 비디오 재생 위치를 변경할 수 있도록 구현하였습니다.

5. 결론

이번 포스트에서는 Flutter에서 비디오를 처리하는 방법에 대해 알아보았습니다. video_player 패키지를 사용하여 온라인 및 로컬 비디오를 재생하고, 진행 상황을 표시하는 기능을 구현할 수 있습니다. 이를 활용하여 멋진 비디오 앱을 개발해보세요!

참고 자료

video_player 패키지