Flutter 中的视频播放器

• 2019 年 10 月 4 日
• 筆記

在Flutter中，官方提供了一个 video_player 插件可以播放视频，但是 video_player 有一些局限性。没法控制底部播放进度等。所以我们主要给大家讲解一个第三方的视频播放库 chewie。chewie 是一个非官方的第三方视频播放组件，它是基于 video_player 的。Chewie相对于 video_player 来说，有控制栏和全屏的功能。

代码如下：

import 'package:flutter/material.dart';  import 'package:chewie/chewie.dart';  import 'package:video_player/video_player.dart';    class VideoPlayerPage extends StatefulWidget {    VideoPlayerPage({Key key}) : super(key: key);      _VideoPlayerPageState createState() => _VideoPlayerPageState();  }    class _VideoPlayerPageState extends State<VideoPlayerPage> {    VideoPlayerController videoPlayerController;    ChewieController chewieController;      @override    void initState() {      super.initState();      //配置视频地址      videoPlayerController = VideoPlayerController.network(          'http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4');      chewieController = ChewieController(        videoPlayerController: videoPlayerController,        aspectRatio: 3 / 2, //宽高比        autoPlay: true, //自动播放        looping: true, //循环播放      );    }      @override    Widget build(BuildContext context) {      return Scaffold(        appBar: AppBar(title: Text("视频播放器")),        body: Center(          //视频播放器          child: Chewie(            controller: chewieController,          ),        ),      );    }      @override    void dispose() {      /**       * 当页面销毁的时候，将视频播放器也销毁       * 否则，当页面销毁后会继续播放视频！       */      videoPlayerController.dispose();      chewieController.dispose();      super.dispose();    }  }

效果如下：

有以下几点需要注意：

1，chewie是依赖 video_player 的，所以两个第三方都需要引入：

chewie: ^0.9.7  video_player: ^0.10.2+1

2，一定要在页面销毁的时候销毁试图播放器，不然的话，在返回其他页面或者跳入其他页面的时候，原来页面的视频还在播放。

以上。