[Flutter] 플러터로 여러가지 영상(비디오) 재생하는 법(Video_player)

이번 포스트는 유튜브 화면과 같이 리스트뷰로 여러가지 영상을  Video_player로 보여주는 것입니다.

참고 자료:  플러터 공식문서  -> 영상 재생 및 일시 중지

 

영상 재생 및 일시 중지

완성된 화면입니다. 

 

 

기본적인 컨셉은 별도의 비디오 플레이어 위젯을 만들고 그 위젯을 리스트 뷰로 보여주는 것입니다. 

 

비디오 위젯은 기본 예제를 참고하여 만들었습니다. 자세한 설명은 위에 참고 자료 링크를 보시는 것이 더 좋을 거 습니다. 

// video_page.dart

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

class VideoPage extends StatefulWidget {
  final String videoUrl;

  VideoPage({Key? key, required this.videoUrl}) : super(key: key);

  @override
  State<VideoPage> createState() => _VideoPageState();
}

class _VideoPageState extends State<VideoPage> {
  late VideoPlayerController _controller;
  late Future<void> _initailizedController;

  @override
  void initState() {
    _controller = VideoPlayerController.network(widget.videoUrl);
    _initailizedController = _controller.initialize();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _initailizedController,
      builder: (_, snapshot) {
        return AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: GestureDetector(
                onTap: () {
                  setState(() {
                    if (_controller.value.isPlaying) {
                      _controller.pause();
                    } else {
                      _controller.play();
                    }
                  });
                },
                child: VideoPlayer(_controller)));
      },
    );
  }
}

 

다음은 리스트 뷰 위젯입니다. 

// home_page.dart

import 'package:flutter/material.dart';
import 'package:videoflutter/video_page.dart';

class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);


  List<String> urls = [
    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemCount: 2,
          itemBuilder: (_, index) {
            return VideoPage(videoUrl: urls[index]);
          }),
    );
  }
}

 

다음은 메인 함수입니다.

// main.py

import 'package:flutter/material.dart';
import 'package:videoflutter/home_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}