Flutter의 비디오 플레이어(Video Player) 사용법

비디오 플레이어는 Flutter 애플리케이션에서 비디오 콘텐츠를 재생할 수 있게 해주는 유용한 도구입니다. 비디오 플레이어를 사용하면 사용자가 로컬 파일이나 네트워크 상의 비디오를 재생할 수 있습니다. 이번 글에서는 Flutter에서 비디오 플레이어를 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. 비디오 플레이어 패키지 설치

Flutter 애플리케이션에서 비디오 플레이어를 사용하기 위해 video_player 패키지를 설치합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.2.6

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. Android 설정

Android 프로젝트에서 비디오 플레이어를 사용하려면 추가적인 설정이 필요하지 않습니다.

3. iOS 설정

iOS 프로젝트에서 비디오 플레이어를 사용하려면 Info.plist 파일을 수정해야 합니다. ios/Runner/Info.plist 파일에 다음 설정을 추가합니다.

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

 

4. 비디오 플레이어 초기화

비디오 플레이어를 사용하려면 먼저 VideoPlayerController를 초기화해야 합니다. 다음은 비디오 플레이어를 초기화하고 비디오를 재생하는 예제입니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VideoPlayerExample(),
    );
  }
}

class VideoPlayerExample extends StatefulWidget {
  @override
  _VideoPlayerExampleState createState() => _VideoPlayerExampleState();
}

class _VideoPlayerExampleState extends State<VideoPlayerExample> {
  late VideoPlayerController _controller;
  late Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
      'https://www.example.com/sample_video.mp4',
    );
    _initializeVideoPlayerFuture = _controller.initialize();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Video Player Example')),
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              _controller.play();
            }
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

 

위 코드는 VideoPlayerController를 사용하여 네트워크 비디오를 재생하는 예제입니다. FutureBuilder를 사용하여 비디오 플레이어 초기화가 완료될 때까지 로딩 인디케이터를 표시하고, 초기화가 완료되면 비디오를 재생합니다. FloatingActionButton을 사용하여 비디오를 재생 및 일시 정지할 수 있습니다.

 

 

 

반응형

 

 

5. 로컬 비디오 파일 재생

로컬 비디오 파일을 재생하려면 VideoPlayerController.file 메서드를 사용합니다. 다음은 로컬 비디오 파일을 재생하는 예제입니다.

 

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:path/path.dart' as path;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LocalVideoPlayerExample(),
    );
  }
}

class LocalVideoPlayerExample extends StatefulWidget {
  @override
  _LocalVideoPlayerExampleState createState() => _LocalVideoPlayerExampleState();
}

class _LocalVideoPlayerExampleState extends State<LocalVideoPlayerExample> {
  late VideoPlayerController _controller;
  late Future<void> _initializeVideoPlayerFuture;

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

  Future<void> _initializeVideoPlayer() async {
    final directory = await getApplicationDocumentsDirectory();
    final videoPath = path.join(directory.path, 'sample_video.mp4');
    _controller = VideoPlayerController.file(File(videoPath));
    _initializeVideoPlayerFuture = _controller.initialize();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Local Video Player Example')),
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              _controller.play();
            }
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

 

위 코드는 로컬 비디오 파일을 재생하는 예제입니다. getApplicationDocumentsDirectory 메서드를 사용하여 로컬 디렉토리 경로를 얻고, 해당 경로에 있는 비디오 파일을 재생합니다.

6. 비디오 컨트롤 추가

비디오 플레이어에 재생, 일시 정지, 정지 등의 컨트롤을 추가할 수 있습니다. 다음은 비디오 컨트롤을 추가하는 예제입니다.

 

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VideoPlayerWithControls(),
    );
  }
}

class VideoPlayerWithControls extends StatefulWidget {
  @override
  _VideoPlayerWithControlsState createState() => _VideoPlayerWithControlsState();
}

class _VideoPlayerWithControlsState extends State<VideoPlayerWithControls> {
  late VideoPlayerController _controller;
  late Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
      'https://www.example.com/sample_video.mp4',
    );
    _initializeVideoPlayerFuture = _controller.initialize();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Video Player with Controls')),
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return Column(
              children: <Widget>[
                AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                ),
                VideoProgressIndicator(_controller, allowScrubbing: true),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.replay_10),
                      onPressed: () {
                        _controller.seekTo(_controller.value.position - Duration(seconds: 10));
                      },
                    ),
                    IconButton(
                      icon: Icon(
                        _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
                      ),
                      onPressed: () {
                        setState(() {
                          if (_controller.value.isPlaying) {
                            _controller.pause();
                          } else {
                            _controller.play();
                          }
                        });
                      },
                    ),
                    IconButton(
                      icon: Icon(Icons.stop),
                      onPressed: () {
                        _controller.seekTo(Duration.zero);
                        _controller.pause();
                      },
                    ),
                    IconButton(
                      icon: Icon(Icons.forward_10),
                      onPressed: () {
                        _controller.seekTo(_controller.value.position + Duration(seconds: 10));
                      },
                    ),
                  ],
                ),
              ],
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

 

위 코드는 비디오 플레이어에 재생, 일시 정지, 정지, 앞뒤로 10초 이동 등의 컨트롤을 추가하는 예제입니다. VideoProgressIndicator를 사용하여 비디오 진행 상태를 표시하고, IconButton을 사용하여 다양한 컨트롤을 구현합니다.

결론

Flutter 애플리케이션에서 비디오 플레이어를 사용하면 로컬 파일이나 네트워크 상의 비디오를 재생할 수 있습니다. video_player 패키지를 사용하여 비디오를 재생하고, 다양한 컨트롤을 추가하는 방법을 통해 비디오 플레이어 기능을 구현할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 비디오 플레이어를 효율적으로 사용해보세요. 비디오 플레이어를 통해 애플리케이션의 기능을 확장하고, 사용자 경험을 향상시킬 수 있습니다.