유튜브 처럼 플레이 화면과 하단에 동영상 리스트가 보일때 동영상 리스트를 클릭 시 상단 플레이에 플레이 되게 만들기

유튜브 처럼 화면을 추가적으로 띄우지 않고 플레이 화면과 하단에 동영상 리스트가 보일때 동영상 리스트를 클릭 시 상단 플레이에 플레이 되게 만들기를 할때 GlobalKey를 이용합니다.

 

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

class VideoDetail extends StatefulWidget {
  int? vIdx;

  VideoDetail({
    Key? key,
    this.vIdx,
  }) : super(key: key);

  @override
  _VideoDetailState createState() => _VideoDetailState();
}

class _VideoDetailState extends State<VideoDetail> {
  late String _videoUrl;
  late GlobalKey<HLSPlayerState> _playerKey;

  @override
  void initState() {
    super.initState();
    _videoUrl = "초기 비디오 URL";
    _playerKey = GlobalKey<HLSPlayerState>();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        HLSPlayer(
          key: _playerKey,
          strUrl: _videoUrl,
        ),
        ElevatedButton(
          onPressed: () {
            // GlobalKey를 사용하여 내부 클래스의 메서드 호출
            _playerKey.currentState?.changeVideoUrl("새로운 비디오 URL");
          },
          child: Text("비디오 변경"),
        ),
      ],
    );
  }
}

// hls_player.dart 파일

class HLSPlayer extends StatefulWidget {
  final String strUrl;
  const HLSPlayer({Key? key, required this.strUrl}) : super(key: key);

  @override
  HLSPlayerState createState() => HLSPlayerState();
}

class HLSPlayerState extends State<HLSPlayer> {
  late VideoPlayerController _videoPlayerController;

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

  void _initializePlayer() {
    _videoPlayerController = VideoPlayerController.networkUrl(Uri.parse(widget.strUrl));
    // 나머지 초기화 로직...
  }

  void changeVideoUrl(String newUrl) {
    _videoPlayerController.pause();
    _videoPlayerController.dispose();
    setState(() {
      _videoPlayerController = VideoPlayerController.networkUrl(Uri.parse(widget.strUrl));
    });
    // 나머지 변경 로직...
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // HLS 플레이어 위젯의 UI...
    );
  }
}

 void main() {
  runApp(MaterialApp(
    home: VideoDetail(vIdx: 1004), // 초기값을 전달합니다.
  ));
}