android实现水平进度条_Flutter在线视频播放功能实现（chewie库）

前言：

实现在一个在线视频播放功能，使用第三方库Chewie。

实现步骤：

1、新建一个flutter项目。
2、获取Chewie插件。
3、添加播放视频所需要的权限。
4、调试代码实现你想要的效果。

获取Chewie插件：

1、在pubspec.yaml文件中添加Chewie插件（video_player也要添加）：

chewie: ^0.9.10
video_player: ^0.10.5+3

//执行获取命令：flutter pub get

添加Chewie插件

2、添加视频播放权限（未确定是不是一定要，但建议添加一下）

 <!-- 视频播放权限-->
 <uses-permission android:name="android.permission.INTERNET"/>

Android权限设置

示例代码（最简例子）：

import 'package:flutter/material.dart';
import 'package:chewie/chewie.dart'; //chewie插件导入
import 'package:video_player/video_player.dart'; //video_player插件导入

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter视频播放',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:Scaffold(
        body: viDeoPlayer(), //播放控件放在这里调用
      ),
    );
  }
}

//******************建议视频播放控件封装成类或函数************************
Widget viDeoPlayer() {
  
  var usr='https://nico-android-apk.oss-cn-beijing.aliyuncs.com/landscape.mp4';  // 视频播放地址
  
  //视频播放控件设置
  Widget playerWidget = Chewie(
           controller: ChewieController(
           videoPlayerController: VideoPlayerController.network(usr), //播放的视频地址写在这里
           aspectRatio: 5/3, //屏幕高宽比
           autoPlay: true, //是否自动播放
           looping: false, //是否循环播放

           //fullScreenByDefault:false, //默认情况下全屏
          //isLive:true, //视频长度替换成live字样
          ),
       );
  return playerWidget; //返回
}

效果展示：

知乎视频​www.zhihu.com

后语：

1、Chewie只是一个基于官方video_player插件开发的一个轮子，在快速开发的项目中比较适用。如果需要实现更好的效果，建议使用video_player自已造一个轮子。

2、调试过程中尽量使用真机调试，模拟器的效果实在不敢恭维，特别是新手，搞不懂的还以为这个插件有问题。

3、另外在获取插件过程中会出现插件和Flutter不兼容的情况，因此建议大家把Flutter的sdk更新到最新或次新，以免出现各种让你想放弃的情况（有问题尽量耐心解决，溯洄从之,道阻且长）。

4、最后，劝大家珍爱生命，远离IT。

参考文章：

flutter -- 视频播放​www.jianshu.com

/*****************************后续补充***********************************/

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


//在特定位置开始播放视频,这里为第60秒开始播放
startAt:Duration( 
        seconds:60,
 ),