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，一定要在頁面銷毀的時候銷毀試圖播放器，不然的話，在返回其他頁面或者跳入其他頁面的時候，原來頁面的影片還在播放。

以上。