flutter 视频播放

 

视频播放 - 准备工作及注意事项

// 以下是视频播放功能在Flutter开发前的准备工作及一些需要注意的事项。
1、把自己的 android stuido 升级为最新版本，Xcode 升级成最新版本。否则安装配置插件的时候可能会出现问题
2、安装完成调用原生的 api 库后，需要重新运行 flutter run
3、如果运行 flutter run 失败，请打开 android studio 后重新运行，如果 android studio 下载包失败的话请用电脑连接手机热点重试。
4、如果依赖安装完成后引入库提示错误，请重启 Vscode

Flutter 视频播放插件介绍

// Flutter官方提供了一个叫做video_player的插件来播放视频，但这个插件在UI和功能上有一些限制。
// 因此，这里我们会使用一个更强大的第三方插件chewie来播放视频。
// chewie是基于video_player构建的，但它提供了更多的功能，如控制栏、全屏播放等，并且提供了更友好的Material或Cupertino界面。

在 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

视频播放功能的实现 - 代码实现

// 下面是使用video_player和chewie实现视频播放功能的Flutter代码示例。

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<CameraPage> {

  var videoPlayerController;   // 视频播放控制器
  var chewieController;       // chewie视频组件控制器
  var play = true;            // 控制视频播放状态，true为播放，false为暂停

  @override
  initState() {
    super.initState();
  }

  @override
  dispose() {
    super.dispose();
    videoPlayerController.dispose();  // 释放视频资源
    chewieController.dispose();      // 释放chewie组件资源
  }

  @override
  Widget build(BuildContext context) {
    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,
    );
  }
}