chewie 播放视频

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

pub 地址:https://pub.dev/packages/chewie

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

安装

dependencies:
  video_player: ^2.10.0
  chewie: ^1.12.1

使用

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

class ChewiePage extends StatefulWidget {
  const ChewiePage({super.key});

  @override
  State<ChewiePage> createState() => _ChewiePageState();
}

class _ChewiePageState extends State<ChewiePage> {
  late ChewieController chewieController;
  late VideoPlayerController videoPlayerController;
  @override
  void initState() {
    super.initState();
    videoPlayerController = VideoPlayerController.networkUrl(Uri.parse(
        'https://stream7.iqilu.com/10339/article/202002/17/778c5884fa97f460dac8d90493c451de.mp4'));
    chewieController = ChewieController(
      videoPlayerController: videoPlayerController,
      aspectRatio: 3 / 2, //视频宽高比
      autoPlay: false,
      looping: true,
      //自定义显示播放速度
      optionsBuilder: (context, defaultOptions) async {
        await showModalBottomSheet(
            context: context,
            builder: (context) {
              return SizedBox(
                height: 200,
                child: ListView(
                  children: [
                    ListTile(
                      title: const Text('播放速度'),
                      onTap: () {
                        defaultOptions[0].onTap!(context);
                      },
                    ),
                    ListTile(
                      title: const Text('取消'),
                      onTap: () {
                        Navigator.pop(context);
                      },
                    )
                  ],
                ),
              );
            });
      },
    );
  }

  @override
  void dispose() {
    super.dispose();
    videoPlayerController.dispose();
    chewieController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('chewie播放视频'),
        ),
        body: Center(
          child: AspectRatio(
            aspectRatio: 3 / 2,
            child: Chewie(controller: chewieController),
          ),
        ));
  }
}

video_player 播放视频

基础的播放视频插件，常用的是他的升级版 chewie 插件，chewie 是在 video_player 之上，配置要先配置 video_player

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

安装

dependencies:
  video_player: ^2.10.0

配置

Android 配置

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

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

android 也需要 https 才可以播放

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

使用

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

class VideoPlayerPage extends StatefulWidget {
  const VideoPlayerPage({super.key});

  @override
  State<VideoPlayerPage> createState() => _VideoPlayerPageState();
}

class _VideoPlayerPageState extends State<VideoPlayerPage> {
  late VideoPlayerController _controller;
  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.networkUrl(
        Uri.parse('https://vjs.zencdn.net/v/oceans.mp4'))
      ..initialize().then((_) {
        setState(() {});
      });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('视频播放'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: Container(color: Colors.red),
              ),22
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}