视频播放

一、准备工作、注意事项

  1、把自己的 android stuido 升级为最新版本，Xcode 升级成最新版本。否则安装配置插件的时候可能会出现问题

  2、安装完成调用原生的 api 库后，需要重新运行 flutter run

  3、如果运行 flutter run 失败，请打开 android studio 后重新运行，如果 android studio 下载包失败的话请用电脑连接手机热点重试。

  4、如果依赖安装完成后引入库提示错误，请重启 Vscode

二、Flutter 视频播放

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

 

// 两个都要安装

https://pub.dev/packages/video_playe

https://pub.dev/packages/chewie

 

案例代码

import 'package:flutter/material.dart';

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

class CameraPage extends StatefulWidget{
  CameraPage({Key key});
  _CameraPage createState() => _CameraPage();
}

class _CameraPage extends State {

  var videoPlayerController;
  var chewieController;
  var play = true;
  initState() {
    super.initState();
  }
  dispose() {
    super.dispose();
    videoPlayerController.dispose();
    chewieController.dispose();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
            title: Text('设备硬件')
        ),
        body: ListView(
          children: <Widget>[
            RaisedButton(child: Text('播放视频'), onPressed: () {
              playAudio();
              setState(() {
                play = true;
              });

            }),
            play ?  Container(child:  Chewie(controller: chewieController),) : SizedBox(height: 0,)
          ]
        )
    );
  }
  // 播放视频
  playAudio() {
    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,
    );
  }
}