[flutter] 플러터에서 오프라인 비디오 재생 방법

플러터(Flutter)에서는 비디오 파일을 오프라인에서 재생하는 다양한 방법을 제공합니다. 이번 포스트에서는 플러터를 사용하여 오프라인 비디오를 재생하는 방법을 알아보겠습니다.

1. 비디오 플레이어 라이브러리 선택

플러터에서는 여러 비디오 플레이어 라이브러리가 제공됩니다. 대표적인 라이브러리로는 video_playerchewie가 있습니다. video_player는 간단하고 가벼운 라이브러리이며, chewievideo_player를 기반으로 좀 더 향상된 기능을 제공합니다.

2. 비디오 파일 준비 및 재생

2.1 video_player를 사용한 방법

  1. 먼저 video_player 라이브러리를 pubspec.yaml에 추가합니다.
dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.1.13
  1. 다음과 같이 VideoPlayerController를 생성하여 오프라인 비디오 파일을 준비합니다.
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class VideoPlayerScreen extends StatefulWidget {
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;
  
  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.asset("assets/videos/sample_video.mp4")
      ..initialize().then((_) {
        setState(() {});
      });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Video Player"),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : CircularProgressIndicator(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying ? _controller.pause() : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}
  1. 위의 코드는 sample_video.mp4라는 비디오 파일을 재생하는 예제입니다. 프로젝트의 assets/videos/ 폴더에 비디오 파일이 위치해야 합니다. 필요에 따라 경로와 파일 이름을 변경해야 할 수 있습니다.

2.2 chewie를 사용한 방법

  1. 먼저 chewie 라이브러리를 pubspec.yaml에 추가합니다.
dependencies:
  flutter:
    sdk: flutter
  chewie: ^1.2.1
  video_player: ^2.1.13
  1. 다음과 같이 ChewieController를 생성하여 오프라인 비디오 파일을 준비합니다.
import 'package:flutter/material.dart';
import 'package:chewie/chewie.dart';
import 'package:video_player/video_player.dart';

class ChewiePlayerScreen extends StatefulWidget {
  @override
  _ChewiePlayerScreenState createState() => _ChewiePlayerScreenState();
}

class _ChewiePlayerScreenState extends State<ChewiePlayerScreen> {
  ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    _chewieController = ChewieController(
      videoPlayerController: VideoPlayerController.asset("assets/videos/sample_video.mp4"),
      autoPlay: true,
      looping: true,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Chewie Player"),
      ),
      body: Center(
        child: Chewie(
          controller: _chewieController,
        ),
      ),
    );
  }
}
  1. 위의 코드는 sample_video.mp4라는 비디오 파일을 재생하는 예제입니다. 프로젝트의 assets/videos/ 폴더에 비디오 파일이 위치해야 합니다. 필요에 따라 경로와 파일 이름을 변경해야 할 수 있습니다.

3. 실행

위의 코드를 실행하면 해당 비디오 파일이 오프라인 상태에서 재생되는 것을 확인할 수 있습니다. video_player는 단순히 재생 기능만을 제공하는 반면, chewie는 더 다양한 기능(자막, 풀스크린 등)을 제공하므로 필요에 따라 선택하여 사용할 수 있습니다.

참고 자료