Flutter视频播放video_player + chewie

video_player 视频播放结合chewie控制器使用

  video_player: ^2.1.2

import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';
void main() => runApp(const VideoApp());

/// Stateful widget to fetch and then display video content.
class VideoApp extends StatefulWidget {
  const VideoApp({Key key}) : super(key: key);

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

class _VideoAppState extends State<VideoApp> {
  //全局控制
  VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    //进行初始化
    _controller = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
    //将视频加载进页面
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: VideoPlayer(_controller),
          )
              : Container(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    //将控制销毁
    super.dispose();
    _controller.dispose();
  }
}

    //获取当前视频播放的信息
    VideoPlayerValue videoPlayerValue = _videoPlayerController.value;
    //是否初始化完成
    bool initialized = videoPlayerValue.initialized;
    //是否正在播放
    bool isPlaying = videoPlayerValue.isPlaying;
    //当前播放的视频的宽高比例
    double aspectRatio = videoPlayerValue.aspectRatio;
    //当前视频是否缓存
    bool isBuffer = videoPlayerValue.isBuffering;
    //当前视频是否循环
    bool isLoop = videoPlayerValue.isLooping;
    //当前播放视频的总时长
    Duration totalDuration = videoPlayerValue.duration;
    //当前播放视频的位置
    Duration currentDuration = videoPlayerValue.position;
    if (initialized) {
      // 视频已初始化
      if (isPlaying) {
        // 正播放 --- 暂停
        _videoPlayerController.pause();
      } else {
        //暂停 ----播放
        _videoPlayerController.play();
      }
      setState(() {});
    } else {
      //未初始化
      _videoPlayerController.initialize().then((_) {
        // videoPlayerController.play();
        // setState(() {});
      });
    }

    //获取当前视频播放的信息
    VideoPlayerValue videoPlayerValue = _videoPlayerController.value;

    //是否初始化完成
    bool initialized = videoPlayerValue.initialized;
    //是否正在播放
    bool isPlaying = videoPlayerValue.isPlaying;
    //当前播放的视频的宽高比例
    double aspectRatio = videoPlayerValue.aspectRatio;
    //当前视频是否缓存
    bool isBuffer = videoPlayerValue.isBuffering;
    //当前视频是否循环
    bool isLoop = videoPlayerValue.isLooping;
    //当前播放视频的总时长
    Duration totalDuration = videoPlayerValue.duration;
    //当前播放视频的位置
    Duration currentDuration = videoPlayerValue.position;
    if (initialized) {
      // 视频已初始化
      if (isPlaying) {
        // 正播放 --- 暂停
        _videoPlayerController.pause();
      } else {
        //暂停 ----播放
        _videoPlayerController.play();
      }
      setState(() {});
    } else {
      //未初始化
      _videoPlayerController.initialize().then((_) {
        // videoPlayerController.play();
        // setState(() {});
      });
    }

参考文章

播放器插件对比

在Flutter中播放器插件可以分为三大类：

官方播放器：
video_player 基于video_player封装的播放器：
chewie
better_player 基于ijkplayer等方案的播放器
flutter_ijkplayer

播放器	说明	特点
video_player	支持Android、iOS和web的Flutter官方播放器；基于：ExoPlayer(Android)、AVPlayer(iOS)、video_player_web(web)	迭代更新及时、兼容性好、API使用较复杂
chewie	基于video_player的播放器插件	简洁易用、功能强大
better_player	基于video_player 与 Chewie的另一款视频播放器	解决了一些特定场景下使用的问题
基于ijkplayer等方案的播放器	开发维护人员较少、大多是个人项目	兼容性和迭代风险高

chewie属性说明

构造属性	说明
videoPlayerController	视频的控制器
autoInitialize	在启动时初始化视频。 这将准备播放视频。
startAt	在特定位置开始播放视频
autoPlay	显示视频后立即播放
looping	视频是否应循环播放
showControlsOnInitialize	初始化小部件时是否显示控件。
showControls	是否完全显示控件
customControls	定义自定义控件
errorBuilder	当视频播放出现错误时，您可以构建自定义
aspectRatio	视频的宽高比。 重要的是要获得正确的尺寸，将回退到适合的空间内。
cupertinoProgressColors	用于iOS控件的颜色。 默认情况下，iOS播放器使用，从原始iOS 11设计中采样的颜色。
materialProgressColors	物料进度条要使用的颜色。 默认情况下，材质 播放器使用主题中的颜色。
placeholder	初始化之前，占位符显示在视频下方
overlay	在视频和控件之间放置的小部件
fullScreenByDefault	定义按下播放器时播放器是否以全屏启动
allowedScreenSleep	定义播放器是否全屏睡眠
allowFullScreen	定义是否应显示全屏控件
isLive	定义控件是否应用于实时流视频
allowMuting	定义是否应显示静音控件
systemOverlaysAfterFullScreen	定义退出全屏后可见的系统覆盖
deviceOrientationsAfterFullScreen	退出全屏后定义一组允许的设备方向
routePageBuilder	为全屏定义自定义RoutePageBuilder

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

class ChewieVideoPage extends StatefulWidget {
  ChewieVideoPage({Key key}) : super(key: key);

  @override
  State<ChewieVideoPage> createState() => _ChewieVideoPageState();
}

class _ChewieVideoPageState extends State<ChewieVideoPage> {
  VideoPlayerController videoPlayerController;
   ChewieController chewieController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    videoPlayerController = VideoPlayerController.network(
        'https://qiniu.xiaodengmi.com/a9ac5d86ca3109cb22ed805b1f227074.mp4');
    chewieController = ChewieController(
      videoPlayerController: videoPlayerController,
      aspectRatio: 3 / 2,
      autoPlay: true,
      looping: true,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("在线播放视频"),
      ),
      body: Center(
        child: Chewie(
          controller: chewieController,
        ),
      ),
    );
  }
}