동영상 플레이어

플러터에서 재생가능한 다양한 형태의 영상파일(MP4, M3U8 등) 재생방법을 샘플소스와 함께 제공합니다. 영상 제어판은 고객사의 환경에 맞도록 커스트마이징이 가능합니다.

better_player

Flutter 앱에서 동영상을 재생하려면 "better_player" 패키지를 사용할 수 있습니다. "better_player"는 풍부한 기능과 사용이 간단한 오픈 소스 동영상 플레이어 라이브러리입니다. 해당 패키지를 사용하여 Flutter 앱에서 머터리얼 디자인 및 쿠퍼티노 디자인을 적용한 동영상 플레이어를 만들 수 있습니다. 필요에 따라 디자인을 선택하여 앱을 더욱 맞춤화할 수 있습니다.

1. 프로젝트 설정

먼저, Flutter 프로젝트에 "better_player" 패키지를 추가해야 합니다. 이를 위해 pubspec.yaml 파일을 열고 다음과 같이 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  better_player: ^0.0.63 # 패키지 버전은 최신 버전으로 업데이트할 수 있습니다

그런 다음 터미널에서 다음 명령을 실행하여 패키지를 가져옵니다:

flutter pub get

2. 동영상 파일 준비

동영상 파일을 프로젝트 폴더에 추가하거나 원격 URL에서 동영상을 가져와야 합니다.

3. 코드 작성

 _dataSource = BetterPlayerDataSource(BetterPlayerDataSourceType.network,
        'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4');

    _betterPlayerController = BetterPlayerController(
      BetterPlayerConfiguration(
        autoDispose: true,
        controlsConfiguration: BetterPlayerControlsConfiguration(
          playerTheme: _playerTheme,
        ),
        aspectRatio: 16 / 9,
        fit: BoxFit.contain,
        autoPlay: true,
      ),
      betterPlayerDataSource: _dataSource,
    );

4. 동영상 URL 설정

위 코드에서 "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" 부분을 실제 동영상 파일의 URL로 변경하세요.

5. 앱 실행

Flutter 앱을 실행하면 동영상 플레이어가 화면에 나타날 것입니다. 동영상을 자동으로 재생하고, 반복 재생하며, 화면 비율을 설정할 수 있습니다.

"better_player" 패키지를 사용하면 Flutter 앱에서 동영상을 쉽게 재생할 수 있습니다. 이 라이브러리를 활용하여 동영상 관련 앱을 만들 때 유용하게 사용할 수 있습니다.

머터리얼 디자인 (Material Design)

   _playerTheme = BetterPlayerTheme.material;
                    _betterPlayerController.pause();
                    _betterPlayerController = BetterPlayerController(
                      BetterPlayerConfiguration(
                        autoDispose: true,
                        controlsConfiguration:
                            BetterPlayerControlsConfiguration(
                          playerTheme: _playerTheme,
                        ),
                        aspectRatio: 16 / 9,
                        fit: BoxFit.contain,
                        autoPlay: true,
                      ),
                      betterPlayerDataSource: _dataSource,
                    );

머터리얼 디자인은 Google에서 개발한 디자인 가이드라인을 따라 디자인된 스타일입니다. 머터리얼 디자인은 시각적으로 깔끔하며 사용자 친화적인 디자인을 강조합니다.

Better Player의 머터리얼 디자인은 머터리얼 디자인의 컴포넌트 및 위젯을 따라 디자인되며, 아이콘, 버튼, 플레이어 컨트롤 및 전반적인 사용자 인터페이스 디자인이 머터리얼 가이드라인을 준수합니다.

쿠퍼티노 디자인 (Cupertino Design)

  _playerTheme = BetterPlayerTheme.cupertino;
                    _betterPlayerController.pause();
                    _betterPlayerController = BetterPlayerController(
                      BetterPlayerConfiguration(
                        autoDispose: true,
                        controlsConfiguration:
                            BetterPlayerControlsConfiguration(
                          playerTheme: _playerTheme,
                        ),
                        aspectRatio: 16 / 9,
                        fit: BoxFit.contain,
                        autoPlay: true,
                      ),
                      betterPlayerDataSource: _dataSource,
                    );

쿠퍼티노 디자인은 Apple의 디자인 가이드라인을 따라 디자인된 스타일입니다. 이 디자인은 iOS 플랫폼에 최적화되어 있으며, iOS 사용자 경험을 강조합니다.

Better Player의 쿠퍼티노 디자인은 iOS 플랫폼에서 느껴지는 스타일과 디자인 컴포넌트를 따릅니다. 이로써 iOS 사용자는 익숙한 느낌의 동영상 플레이어를 사용할 수 있습니다.

커스텀 디자인 (Custom Design)

 _playerTheme = BetterPlayerTheme.custom;
                    _betterPlayerController.pause();
                    _betterPlayerController = BetterPlayerController(
                      BetterPlayerConfiguration(
                        autoDispose: true,
                        controlsConfiguration:
                            BetterPlayerControlsConfiguration(
                          playerTheme: _playerTheme,
                          customControlsBuilder: (controller, onFullScreen) =>
                              CustomControlsWidget(
                            controller: controller,
                            fullscreenButtonBackgroundColor: Colors.purple,
                            playBarColor: Colors.purple,
                          ),
                        ),
                        aspectRatio: 16 / 9,
                        fit: BoxFit.contain,
                        autoPlay: true,
                      ),
                      betterPlayerDataSource: _dataSource,
                    );

커스텀 디자인은 머터리얼 또는 쿠퍼티노 디자인 가이드라인을 따르지 않고 사용자 정의된 디자인을 의미합니다. 사용자가 자체적으로 디자인을 조정하거나 플레이어의 외관을 완전히 사용자 정의할 수 있습니다.

Better Player의 커스텀 디자인은 사용자가 원하는 대로 디자인을 수정하고 스타일을 변경할 수 있는 유연성을 제공합니다. 사용자는 색상, 폰트, 레이아웃 및 다른 디자인 요소를 완전히 제어할 수 있습니다.

위의 코드 예제들은 BetterPlayer 라이브러리를 사용하여 동영상 플레이어를 다양한 디자인 스타일로 구성하는 방법을 보여줍니다. 이를 통해 앱의 사용자 경험을 향상시키고, 앱의 디자인을 여러 플랫폼에서 머터리얼 디자인, 쿠퍼티노 디자인 또는 사용자 정의 디자인에 맞게 조정할 수 있습니다.

Previous옵션모듈 Next유튜브 연동

Last updated 11 months ago