26. [Flutter] VideoPlayer 위젯으로 앱에 동영상 활용하기

VideoPlayer

앱내에 동영상을 사용할 수 있도록 도와주는 위젯으로 asset, url 과 같이 경로에 있는 동영상을 controller로 받아 여러가지 속성을 이용하여 표현해주는 위젯입니다.

---

주요 속성

VideoPlayerController	비디오 재생을 제어하는 컨트롤러입니다.
VideoPlayer	비디오를 표시하는 위젯입니다.
VideoPlayerController.initialize	비디오를 초기화하는 메서드입니다.
VideoPlayerController.setVolume	비디오의 볼륨을 설정하는 메서드입니다.
VideoPlayerController.addListener	_videoPlayerController 객체의 값이 변경될 때 호출되는 콜백 함수를 설정하는 메서드입니다.
VideoPlayerController.value.isInitialized	비디오가 시작되었는지 여부를 확인하는 메서드입니다.
VideoPlayerController.value.duration	비디오의 총 재생 길이입니다.
VideoPlayerController.value.position	비디오의 현재 재생 위치입니다.

 

- 설치 링크: https://pub.dev/packages/video_player

video_player | Flutter Package

---

 

예시.

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

class TestScreen extends StatefulWidget {
  const TestScreen({super.key});

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  final VideoPlayerController _videoPlayerController =
      VideoPlayerController.networkUrl(Uri.parse(
          'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4'));

  @override
  void initState() {
    _videoPlayerController.initialize();
    _videoPlayerController.setVolume(0.3);

    super.initState();
    setState(() {});
    _videoPlayerController.addListener(_onVideoFinish);
  }

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

  late bool isPlay = false;
  void _onTapVideo() {
    isPlay = !isPlay;
    isPlay ? _videoPlayerController.play() : _videoPlayerController.pause();
    setState(() {});
  }

  void _onVideoFinish() {
    if (_videoPlayerController.value.isInitialized) {
      if (_videoPlayerController.value.duration ==
          _videoPlayerController.value.position) {
        isPlay = false;
        _videoPlayerController.initialize();
      }
    }
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
            onTap: _onTapVideo,
            child: Container(
                width: 300,
                height: 200,
                decoration: const BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(15))),
                child: VideoPlayer(_videoPlayerController))),
      ),
    );
  }
}

---

설명.

isPlay라는 bool형의 변수를 선언하여 동영상 재생 상태를 조작할 수 있게 만들었습니다.

동영상 재생이 끝까지 완료되었을 때, 동영상을 초기화시키고 멈춤상태로 변경합니다.

 

• VideoPlayerController.asset 혹은 VideoPlayerController.networkUrl 로비디오 파일의 경로나 URL을 가진 생성자를 통해 컨트롤러 _videoPlayerController 를 생성합니다.
• VideoPlayer(_videoPlayerController) 와 같이 VideoPlayer 위젯안에 controller를 넣어줍니다.
• VideoPlayer를 클릭했을 때 이벤트 발생을 위해 Container와 GestureDetector로 감싸고 onTap에 _onTapVideo 메소드를 연결시켜줍니다.
• isPlay에 동영상이 실행되고 있으면 true를 줄 수있도록 변수를 선언해줍니다.
• _onTapVideo 메소드에 isPlay를 이용하여 _videoPlayerController.play()로 재생 _videoPlayerController.pause()로 멈춤 기능을 구현합니다.
• initState 상태주기 메소드에 _videoPlayerController.initialize()로 동영상을 초기화하고, _videoPlayerController.setVolume(0.3)으로 동영상 볼륨을 0.3으로 맞춰줍니다.
• _videoPlayerController.addListener(_onVideoFinish) 로 리스너를 선언하고 메소드로 _onVideoFinish를 연결해줍니다.
• _onFinish에서는 _videoPlayerController.value.isInitialized 로 동영상이 시작되었는지 확인하고 _videoPlayerController.value.duration (동영상 총 재생 길이) 과 _videoPlayerController.value.position (현재 진행된 재생 길이)이 같으면 동영상을 초기화하고 멈춤상태로 변경합니다.

---

빌드된 모습.