it营大地专栏

Flutter Native-Flutter实现视频播放

发布于 4 个月前 作者 sinazl 287 次浏览 来自 分享

一、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

二、Flutter chewie视频播放完整demo

import 'package:flutter/material.dart';

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

class ChewieVideoDemo extends StatefulWidget {
  ChewieVideoDemo({Key key}) : super(key: key);

  _ChewieVideoDemoState createState() => _ChewieVideoDemoState();
}

class _ChewieVideoDemoState extends State<ChewieVideoDemo> {

    VideoPlayerController videoPlayerController;

    ChewieController chewieController;

    @override
  void initState() {
    // TODO: implement 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
  void dispose() {
    // TODO: implement dispose
    super.dispose();
      videoPlayerController.dispose();
      chewieController.dispose();
      super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('标题'),
      ),
      body: Center(
        child:  Chewie(
          controller: chewieController,
        ),
      ),
    );
  }
}

回到顶部