การจัดการและใช้งาน เกี่ยวกับ Video ใน Flutter ตอนที่ 1

video_player: ^2.9.1

   // vertical video 
    /*
    https://cdn.pixabay.com/video/2024/08/30/228847_tiny.mp4
    https://cdn.pixabay.com/video/2023/07/28/173530-849610807_tiny.mp4
    https://cdn.pixabay.com/video/2024/03/31/206294_tiny.mp4
    https://cdn.pixabay.com/video/2023/10/27/186714-878826932_tiny.mp4
    https://cdn.pixabay.com/video/2024/07/28/223551_tiny.mp4
    https://cdn.pixabay.com/video/2024/08/18/227174_tiny.mp4
    */
    // horizontal video
    /*
    https://cdn.pixabay.com/video/2024/07/27/223461_tiny.mp4
    https://cdn.pixabay.com/video/2023/10/15/185096-874643413_tiny.mp4
    https://cdn.pixabay.com/video/2022/11/22/140111-774507949_tiny.mp4
    https://cdn.pixabay.com/video/2024/07/14/221180_tiny.mp4
    https://cdn.pixabay.com/video/2022/10/19/135658-764361528_tiny.mp4
    https://cdn.pixabay.com/video/2021/08/04/83880-585600454_tiny.mp4
    https://cdn.pixabay.com/video/2024/09/06/230060_tiny.mp4
    */

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

import 'fullscreenvideo.dart';

class Clip extends StatefulWidget {
  static const routeName = '/clip';

  const Clip({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _ClipState();
  }
}

class _ClipState extends State<Clip> {
  late VideoPlayerController _controller;
  String videoUrl = ''; // Variable to store video URL

  @override
  void initState() {
    super.initState();
    print("debug: initialize");
    videoUrl =
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4';
    _controller = VideoPlayerController.networkUrl(Uri.parse(videoUrl))
      ..addListener(() {
        // Listening for changes in VideoPlayerValue
        setState(() {
          if (_controller.value.isPlaying) {
            print("debug: Playing");
            print("debug: ${_controller.value.duration}");
          } else if (_controller.value.isBuffering) {
            print("debug: Buffering");
          } else if (_controller.value.isCompleted) {
            print("debug: Finished");            
          } else {
            print("debug: Paused");
          }
        });
      })
      ..initialize().then((_) {
        print("debug: video initialize");
        setState(() {});
      });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Clip'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: GestureDetector(
                  onTap: () {
                    // Navigate to fullscreen mode when tapped
/*                     Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => FullScreenVideo(videoUrl),
                      ),
                    ); */
                  
                  },
                  child: VideoPlayer(_controller),
                ),
              )
            : const CircularProgressIndicator(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // ควบคุมการทำงานของปุ่ม ถ้าเล่นอยู่ให้รอคำสั่ง หยุดชั่วคราว
          // ถ้าหยุดอยู่ ให้รอคำสั่ง เล่น
          setState(() {
            _controller.value.isPlaying && !_controller.value.isCompleted
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying && !_controller.value.isCompleted
              ? Icons.pause
              : Icons.play_arrow,
        ),
      ),
    );
  }
}

aspectRatio: 16/9,
aspectRatio: 4/3,
aspectRatio: 1,

      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: GestureDetector(
                  onTap: () {
                    // Navigate to fullscreen mode when tapped
/*                     Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => FullScreenVideo(videoUrl),
                      ),
                    ); */
                  },
                  child: VideoPlayer(_controller),
                ),
              )
            : const CircularProgressIndicator(),
      ),

_controller.value.isInitialized

VideoPlayer(_controller),

const CircularProgressIndicator(),

      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      _controller.value.isPlaying && !_controller.value.isCompleted
                          ? _controller.pause()
                          : _controller.play();
                    });                    
                  },
                  child: VideoPlayer(_controller),
                ),
              )
            : const CircularProgressIndicator(),
      ),

class _ClipState extends State<Clip> {
  late VideoPlayerController _controller;
  String videoUrl = ''; // Variable to store video URL
  // เพิ่มส่วนของ สถานะการเล่นอยู่ และเวลาของตำแหน่งคลิปปัจจุบัน
  bool _isPlaying = false;
  Duration _currentPosition = Duration.zero;

  @override
  void initState() {
    super.initState();
    print("debug: initialize");
    videoUrl =
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4';
    _controller = VideoPlayerController.networkUrl(Uri.parse(videoUrl))
      ..addListener(() {
        // Listening for changes in VideoPlayerValue
        setState(() {
          if (_controller.value.isPlaying) {
            print("debug: Playing");
            print("debug: ${_controller.value.duration}");
          } else if (_controller.value.isBuffering) {
            print("debug: Buffering");
          } else if (_controller.value.isCompleted) {
            print("debug: Finished");
          } else {
            print("debug: Paused");
          }
          _currentPosition =
              _controller.value.position; // Update current position
        });
      })
      ..initialize().then((_) {
        print("debug: video initialize");
        setState(() {});
      });
  }

  // Helper function to format duration as mm:ss
  String _formatDuration(Duration duration) {
    String twoDigits(int n) => n.toString().padLeft(2, '0');
    final minutes = twoDigits(duration.inMinutes.remainder(60));
    final seconds = twoDigits(duration.inSeconds.remainder(60));
    return "$minutes:$seconds";
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Clip'),
      ),
      body: Stack(
        children: [
          Center(
            child: _controller.value.isInitialized
                ? AspectRatio(
                    aspectRatio: _controller.value.aspectRatio,
                    child: GestureDetector(
                      onTap: () {
                        setState(() {
                          _isPlaying = !_isPlaying;
                          _controller.value.isPlaying &&
                                  !_controller.value.isCompleted
                              ? _controller.pause()
                              : _controller.play();
                        });
                      },
                      child: VideoPlayer(_controller),
                    ),
                  )
                : const CircularProgressIndicator(),
          ),
          // Video seek bar
          if (_controller.value.isInitialized)
            Positioned(
              bottom: 30,
              left: 20,
              right: 20,
              child: Column(
                children: [
                  // Slider for seeking the video
                  Slider(
                    value: _currentPosition.inMicroseconds.toDouble(),
                    min: 0,
                    max: _controller.value.duration.inMicroseconds.toDouble(),
                    onChanged: (value) {
                      setState(() {
                        _controller.seekTo(Duration(microseconds: value.toInt()));
                      });
                    },
                  ),
                  // Display current position and total duration
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        _formatDuration(_currentPosition),
                        style: const TextStyle(color: Colors.black),
                      ),
                      Text(
                        _formatDuration(_controller.value.duration),
                        style: const TextStyle(color: Colors.black),
                      ),
                    ],
                  ),
                ],
              ),
            ),
        ],
      ),
    );
  }
}

....
..
      ..initialize().then((_) {
        print("debug: video initialize");
        _controller.play(); // เล่นทันทีเมื่อวิดีโอพร้อม
        _controller.setLooping(true); // ให้วนลูป
        setState(() {});
      });
....
..

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


// Fullscreen video player with landscape orientation
class FullScreenVideo extends StatefulWidget {
  final String videoUrl; // Use video URL to create separate controller

  const FullScreenVideo(this.videoUrl, {Key? key}) : super(key: key);

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

class _FullScreenVideoState extends State<FullScreenVideo> {
  late VideoPlayerController _controller;

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

    // Initialize a new controller for fullscreen mode
    _controller = VideoPlayerController.networkUrl(Uri.parse(widget.videoUrl))
      ..initialize().then((_) {
        setState(() {}); // Ensure UI is refreshed when video is loaded
        _controller.play(); // Optionally auto-play video when in fullscreen
      });

    // Check if the video is initialized before setting orientation
    if (_controller.value.isInitialized) {
      _setOrientationBasedOnAspectRatio();
    } else {
      // Add a listener to wait for video initialization
      _controller.addListener(() {
        if (_controller.value.isInitialized) {
          _setOrientationBasedOnAspectRatio();
        }
      });
    }

    // Hide the status bar and navigation bar for true fullscreen
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  }

  void _setOrientationBasedOnAspectRatio() {
    // Set the orientation based on the aspect ratio of the video
    if (_controller.value.aspectRatio > 1) {
      // If the video is wider than it is tall, set to landscape
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.landscapeRight,
        DeviceOrientation.landscapeLeft,
      ]);
    } else {
      // If the video is taller than it is wide, set to portrait
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
      ]);
    }
  }

  @override
  void dispose() {
    // Restore the orientation to portrait when exiting fullscreen
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
    // Restore system UI when exiting fullscreen
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Dismissible(
      direction: DismissDirection.vertical,
      key: const Key('key'),
      onDismissed: (_) => Navigator.of(context).pop(),
      child: Scaffold(
        backgroundColor: Colors.black,
        body: Stack(
          children: [
            Center(
              child: _controller.value.isInitialized
                  ? AspectRatio(
                      aspectRatio: _controller.value.aspectRatio,
                      child: VideoPlayer(_controller),
                    )
                  : const CircularProgressIndicator(),
            ),
            // Positioned close button at the top-left corner
            Positioned(
              top: 20,
              left: 10,
              child: IconButton(
                icon: const Icon(Icons.close, color: Colors.white, size: 30),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ),
            // Centered play/pause button with opacity
            _controller.value.isInitialized
                ? Positioned(
                    left: MediaQuery.of(context).size.width / 2 - 30,
                    top: MediaQuery.of(context).size.height / 2 - 30,
                    child: Opacity(
                      opacity: _controller.value.isPlaying && !_controller.value.isCompleted
                      ? 0.0
                      : 0.5,
                      child: GestureDetector(
                        onTap: () {
                          setState(() {
                            _controller.value.isPlaying &&
                                    !_controller.value.isCompleted
                                ? _controller.pause()
                                : _controller.play();
                          });
                        },
                        child: Icon(
                          _controller.value.isPlaying &&
                                  !_controller.value.isCompleted
                              ? Icons.pause
                              : Icons.play_arrow,
                          color: Colors.white,
                          size: 60,
                        ),
                      ),
                    ),
                  )
                : Container(),
          ],
        ),
      ),
    );
  }
}

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

import 'fullscreenvideo.dart';

class Clip extends StatefulWidget {
  static const routeName = '/clip';

  const Clip({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _ClipState();
  }
}

class _ClipState extends State<Clip> {
  late VideoPlayerController _controller;
  String videoUrl = ''; // Variable to store video URL
  // เพิ่มส่วนของ สถานะการเล่นอยู่ และเวลาของตำแหน่งคลิปปัจจุบัน
  bool _isPlaying = false;
  Duration _currentPosition = Duration.zero;

  @override
  void initState() {
    super.initState();
    print("debug: initialize");
    videoUrl =
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4';
    _controller = VideoPlayerController.networkUrl(Uri.parse(videoUrl))
      ..addListener(() {
        // Listening for changes in VideoPlayerValue
        setState(() {
          if (_controller.value.isPlaying) {
            print("debug: Playing");
            print("debug: ${_controller.value.duration}");
          } else if (_controller.value.isBuffering) {
            print("debug: Buffering");
          } else if (_controller.value.isCompleted) {
            print("debug: Finished");
          } else {
            print("debug: Paused");
          }
          _currentPosition =
              _controller.value.position; // Update current position
        });
      })
      ..initialize().then((_) {
        print("debug: video initialize");
        // _controller.play();
        // _controller.setLooping(true);
        setState(() {});
      });
  }

  // Helper function to format duration as mm:ss
  String _formatDuration(Duration duration) {
    String twoDigits(int n) => n.toString().padLeft(2, '0');
    final minutes = twoDigits(duration.inMinutes.remainder(60));
    final seconds = twoDigits(duration.inSeconds.remainder(60));
    return "$minutes:$seconds";
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Clip'),
      ),
      body: Stack(
        children: [
          Center(
            child: _controller.value.isInitialized
                ? AspectRatio(
                    aspectRatio: _controller.value.aspectRatio,
                    child: GestureDetector(
                      onTap: () {
                        setState(() {
                          _isPlaying = !_isPlaying;
                          _controller.value.isPlaying &&
                                  !_controller.value.isCompleted
                              ? _controller.pause()
                              : _controller.play();
                        });
                      },
                      child: Stack(
                        children: [
                          VideoPlayer(_controller),
                          // Centered play/pause button with opacity
                          Positioned(
                            right: 0,
                            bottom: 0,
                            child: Opacity(
                              opacity: _controller.value.isPlaying &&
                                      !_controller.value.isCompleted
                                  ? 0.5
                                  : 0.5,
                              child: GestureDetector(
                                onTap: () {
                                  _controller.pause();
                                  // Navigate to fullscreen mode when tapped
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                      builder: (context) =>
                                          FullScreenVideo(videoUrl),
                                    ),
                                  );
                                },
                                child: Icon(
                                  _controller.value.isPlaying &&
                                          !_controller.value.isCompleted
                                      ? Icons.fullscreen
                                      : Icons.fullscreen_outlined,
                                  color: Colors.white,
                                  size: 60,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  )
                : const CircularProgressIndicator(),
          ),
          // Video seek bar
          if (_controller.value.isInitialized)
            Positioned(
              bottom: 30,
              left: 20,
              right: 20,
              child: Column(
                children: [
                  // Slider for seeking the video
                  Slider(
                    value: _currentPosition.inMicroseconds.toDouble(),
                    min: 0,
                    max: _controller.value.duration.inMicroseconds.toDouble(),
                    onChanged: (value) {
                      setState(() {
                        _controller
                            .seekTo(Duration(microseconds: value.toInt()));
                      });
                    },
                  ),
                  // Display current position and total duration
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        _formatDuration(_currentPosition),
                        style: const TextStyle(color: Colors.black),
                      ),
                      Text(
                        _formatDuration(_controller.value.duration),
                        style: const TextStyle(color: Colors.black),
                      ),
                    ],
                  ),
                ],
              ),
            ),
        ],
      ),
    );
  }
}