Flutter中的视频播放

2020-02-15

chewie: Flutter中好用的视频播放插件

chewie使用了Flutter官方提供插件video_player,所以使用时需要同时配置video_player

视频播放

使用准备

添加依赖:

video_player: ^0.10.7

chewie: ^0.9.8+1

导包:

import ‘package:video_player/video_player.dart’;

import ‘package:chewie/chewie.dart’;

开始使用

注意: Android9.0以上官方禁止了http明文通信,可在AndroidManifest.xml中在application节点下添加android:usesCleartextTraffic="true"即可

VideoPlayerController videoPlayerController;
ChewieController chewieController;

//初始化
@override
void initState() {
    super.initState();
    videoPlayerController = VideoPlayerController.network(
        'http://vfx.mtime.cn/Video/2019/06/27/mp4/190627231412433967.mp4');

    chewieController = ChewieController(
        videoPlayerController: videoPlayerController,
        aspectRatio: 3 / 2,
        //设置自动播放
        autoPlay: false,
        //设置自动初始化,加载进度
        autoInitialize: true,
        //循环播放
        looping: true,
    );
}

//关闭页面后销毁,若不销毁,关闭正在播放的页面后视频仍会继续播放
@override
void dispose() {
    videoPlayerController.dispose();
    chewieController.dispose();
    super.dispose();
}

//在想用的地方使用
final playerWidget = Chewie(
  controller: chewieController,
);

完整代码如下

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

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

  @override
  _VideoPlayerState createState() {
    return _VideoPlayerState();
  }
}

class _VideoPlayerState extends State<VideoPlayer> {
  VideoPlayerController videoPlayerController;
  ChewieController chewieController;

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

    videoPlayerController = VideoPlayerController.network(
        'http://vfx.mtime.cn/Video/2019/06/27/mp4/190627231412433967.mp4');

    chewieController = ChewieController(
      videoPlayerController: videoPlayerController,
      aspectRatio: 3 / 2,
      autoPlay: false,
      autoInitialize: true,
      looping: false,
    );
  }

  /*销毁*/
  @override
  void dispose() {
    videoPlayerController.dispose();
    chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('在线视频播放'),
      ),
      body: Center(
          child: Chewie(
        controller: chewieController,
      )),
    );
  }
}