[Flutter] Chewie 패키지를 사용해서 비디오 플레이어를 활용해보자

chewie

Example from chewie pub.dev

chewie 패키지를 활용해서 플러터 앱 안에 손쉽게 비디오 플레이어를 삽입할 수 있습니다. 단순히 동영상 재생만을 지원하는 것이 아니라 동영상과 관련된 여러 기능들, 예를 들어 subtitle 삽입이나 영상 속도 조절 등 여러 옵션들을 설정할 수도 있습니다.

key point

• initial load를 통해서 autoPlay 속성을 수정하여 비디오를 재생하게 할 수 있습니다.
• looping 속성을 사용해서 비디오가 자동 반복 재생되도록 설정해줄 수 있습니다.
• subtitle 속성을 사용해서 subtitle 내용을 설정해줄 수가 있습니다.
• subtitle builder 속성을 사용해서 어떻게 subtitle을 표시해줄 지 상세하게 설정할 수 있습니다.
• 추가적인 다른 옵션 속성들을 통해서 비디오 액션들을 customizing 해줄 수 있습니다.
• Initialization

import 'package:chewie/chewie.dart';
final videoPlayerController = VideoPlayerController.network(
    'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4');

await videoPlayerController.initialize();

final chewieController = ChewieController(
  videoPlayerController: videoPlayerController,
  autoPlay: true,
  looping: true,
);

final playerWidget = Chewie(
  controller: chewieController,
);

• dispose
  • 사용을 모두 마치면 두 컨트롤러 모두 dispose 해주는 것이 중요하다.

@override
void dispose() {
  videoPlayerController.dispose();
  chewieController.dispose();
  super.dispose();
}

• additional options
  • 추가적인 옵션들을 추가해주는 예시 코드

// To add additional options just add these lines to your ChewieController
additionalOptions: (context) {
  return <OptionItem>[
    OptionItem(
      onTap: () => debugPrint('My option works!'),
      iconData: Icons.chat,
      title: 'My localized title',
    ),
    OptionItem(
      onTap: () =>
          debugPrint('Another option working!'),
      iconData: Icons.chat,
      title: 'Another localized title',
    ),
  ];
},

// If you don't like to show your options with the default showModalBottomSheet 
// just override the View with the optionsBuilder method
optionsBuilder: (context, defaultOptions) async {
  await showDialog<void>(
    context: context,
    builder: (ctx) {
      return AlertDialog(
        content: ListView.builder(
          itemCount: defaultOptions.length,
          itemBuilder: (_, i) => ActionChip(
            label: Text(defaultOptions[i].title),
            onPressed: () =>
                defaultOptions[i].onTap!(),
          ),
        ),
      );
    },
  );
},

// What is an option without proper translation. 
// To add your strings to them just add
optionsTranslation: OptionsTranslation(
  playbackSpeedButtonText: 'Wiedergabegeschwindigkeit',
  subtitlesButtonText: 'Untertitel',
  cancelButtonText: 'Abbrechen',
),

• Subtitle

// Just add subtitles as following code is showing into your ChewieController
ChewieController(
  videoPlayerController: _videoPlayerController,
  autoPlay: true,
  looping: true,
  subtitle: Subtitles([
    Subtitle(
      index: 0,
      start: Duration.zero,
      end: const Duration(seconds: 10),
      text: 'Hello from subtitles',
    ),
    Subtitle(
      index: 1,
      start: const Duration(seconds: 10),
      end: const Duration(seconds: 20),
      text: 'Whats up? :)',
    ),
  ]),
  subtitleBuilder: (context, subtitle) => Container(
    padding: const EdgeInsets.all(10.0),
    child: Text(
      subtitle,
      style: const TextStyle(color: Colors.white),
    ),
  ),
);

https://pub.dev/packages/chewie

chewie | Flutter Package