video_player、chewie 播放视频

使用video_player播放视频

地址：https://pub.dev/packages/video_player

Android配置

/android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

Ios配置

Ios无需配置，注意要使用https协议

dependencies:
    video_player: ^2.4.7

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
class VideoPage extends StatefulWidget {
  const VideoPage({super.key});
  @override
  State<VideoPage> createState() => _VideoPageState();
}
class _VideoPageState extends State<VideoPage> {
  late VideoPlayerController _controller;
  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
      'https://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4')
      ..initialize().then((_) {
      // Ensure the first frame is shown after the video is initialized, even
      before the play button has been pressed.
        print("initialized");
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("video VideoPlayer"),
      ),
      body: Center(
        child: _controller.value.isInitialized
        ? AspectRatio(
          aspectRatio: _controller.value.aspectRatio,
          child: VideoPlayer(_controller),
        )
        : AspectRatio(
          aspectRatio: _controller.value.aspectRatio,
          child: Container(color: Colors.red),
        ),
      ),
      floatingActionButton: FloatingActionButton(    
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
              ? _controller.pause()
              : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

使用chewie播放视频

在 Flutter 里官方提供了一个 video_player插件可以播放视频。但是video_player有一些局限性。没法控制底部播放进度等。 所以我们主要给大家讲解一个第三方的视频播放库chewie。chewie是一个非官方的第三方视频播放组件，看起来好像是基于 HTML5 播放的组件。chewie 相对 video_player 来说，有控制栏和全屏的功能。Chewie 使用 video_player 引擎并将其包裹在友好的 Material 或 CupertinoUI 中！

https://pub.dev/packages/video_playe

https://pub.dev/packages/chewie

chewie基于video_player，所以要使用chewie必须配置video_player

dependencies:
    chewie: <latest_version>
    video_player: <latest_version>

完整demo

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';
class ChewieVideoPage extends StatefulWidget {
  const ChewieVideoPage({super.key});
  @override
  State<ChewieVideoPage> createState() => _ChewieVideoPageState();
}
class _ChewieVideoPageState extends State<ChewieVideoPage> {
  late VideoPlayerController videoPlayerController;
  late ChewieController chewieController;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _initVideo();
  }
  _initVideo() async {
    videoPlayerController = VideoPlayerController.network(
      'https://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4');
    chewieController = ChewieController(
      videoPlayerController: videoPlayerController,
      aspectRatio: 3 / 2,
      autoPlay: true,
      looping: true,
    );
  }
  /*销毁*/
  @override
  void dispose() {
    videoPlayerController.dispose();
    chewieController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('在线视频播放'),
      ),
      body: Center(
        child: SizedBox(
          child: AspectRatio(
            aspectRatio: 3 / 2,
            child: Chewie(
              controller: chewieController,
            ),
          ),
        )),
    );
  }
}

修改底部ActionSheet以及播放的速度

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

class ChewieVideoPage extends StatefulWidget {
  const ChewieVideoPage({super.key});
  @override
  State<ChewieVideoPage> createState() => _ChewieVideoPageState();
}
class _ChewieVideoPageState extends State<ChewieVideoPage> {
  late VideoPlayerController videoPlayerController;
  late ChewieController chewieController;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _initVideo();
  }
  _initVideo() async {
    videoPlayerController = VideoPlayerController.network(
      'https://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4');
    chewieController = ChewieController(
      videoPlayerController: videoPlayerController,
      aspectRatio: 3 / 2,
      autoPlay: true,
      looping: true,
      optionsBuilder: (context, defaultOptions) async {
        //defaultOptions保存了对应的按钮 先打印然后再去自定义
        return await showModalBottomSheet(
          context: context,
          builder: (context) {
            return SizedBox(
              height: 120,
              child: ListView(
                children: [
                  ListTile(
                    title: const Text("播放速度"),
                    onTap: (){
                      defaultOptions[0].onTap!();
                    },
                  ),
                  ListTile(
                    title: const Text("取消"),
                    onTap: (){
                      Navigator.of(context).pop();
                    },
                  )
                ],
              ),
            );
          }
        );
      },
    );
  }
  /*销毁*/
  @override
  void dispose() {
    videoPlayerController.dispose();
    chewieController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('在线视频播放'),
      ),
      body: Center(
        child: SizedBox(
          child: AspectRatio(
            aspectRatio: 3 / 2,
            child: Chewie(
              controller: chewieController,
            ),
          ),
        )),
    );
  }
}