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:video_player/video_player.dart';

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 或 Cupertino UI 中！

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('在线视频播放'),
            ), // AppBar
            body: Center(
                child: SizedBox(
                    child: AspectRatio(
                        aspectRatio: 3 / 2,
                        child: Chewie(
                            controller: chewieController,
                        ), // Chewie
                    ), // AspectRatio
                ) // SizedBox
            ), // Center
        ); // Scaffold
    }
}

修改底部 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,
                        ),
                    ),
                )
            ),
        );
    }
}