Flutter中使用chewie实现视频播放

越陌度阡

发布于 2021-01-29 10:36:52

3.5K0

发布于 2021-01-29 10:36:52

1. 安装插件

配置 chewie 插件。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  date_format: ^1.0.6
  flutter_cupertino_date_picker: ^1.0.26+2 
  flutter_swiper: ^1.1.6
  fluttertoast: ^7.1.6
  http: ^0.12.2
  dio: ^3.0.10
  flutter_html: ^1.1.0
  flutter_inappwebview: ^4.0.0+4
  device_info: ^1.0.0
  amap_location: ^0.2.0
  image_picker: ^0.6.7+21

  # chewie的依赖
  video_player: ^1.0.1
  # 视频播放
  chewie: ^0.12.2

在pubspec.yaml中配置保存后，在VS Code环境中会自动下载依赖包。

如果无法正常下载，执行 flutter pub get 。

注意：chewie插件依赖于video_player，所以video_player必须一起安装。

2. 引入依赖

在需要用到的该插件的文件中引入插件包。

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

3. 使用插件

// 声明控制器(两个)
VideoPlayerController videoPlayerController;
ChewieController chewieController;

void initState(){
    super.initState();
    // 生成控制器(两个)
    videoPlayerController=VideoPlayerController.network(
        'https://qiniu.xiaodengmi.com/a9ac5d86ca3109cb22ed805b1f227074.mp4'
    );
    chewieController = ChewieController(
        videoPlayerController: videoPlayerController,
        // 比例
        aspectRatio: 3/2,
        // 自动播放
        autoPlay: true,
        // 循环
        looping: true,
    );
}

在组件卸载时一定要销毁控制器。

@override
void dispose() {
    // 销毁播放器的控制器
    videoPlayerController.dispose();
    chewieController.dispose();
    super.dispose();
}

4. 完整实例

import 'package:flutter/material.dart';

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

class ChewieVideoPage extends StatefulWidget {
    ChewieVideoPage({Key key}) : super(key: key);
    @override
    _ChewieVideoPageState createState() => _ChewieVideoPageState();
}

class _ChewieVideoPageState extends State<ChewieVideoPage> {

    // 声明控制器(两个)
    VideoPlayerController videoPlayerController;
    ChewieController chewieController;

    void initState(){
        super.initState();
        // 生成控制器(两个)
        videoPlayerController=VideoPlayerController.network(
            'https://qiniu.xiaodengmi.com/a9ac5d86ca3109cb22ed805b1f227074.mp4'
        );
        chewieController = ChewieController(
            videoPlayerController: videoPlayerController,
            // 比例
            aspectRatio: 3/2,
            // 自动播放
            autoPlay: true,
            // 循环
            looping: true,
        );
    }

    @override
    void dispose() {
        // 销毁播放器的控制器
        videoPlayerController.dispose();
        chewieController.dispose();
        super.dispose();
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title:Text('在线视频播放')
            ),
            // 加载播放器
            body:Chewie(
                controller: chewieController,
            )

        );
        
    }
}

参考：

https://pub.flutter-io.cn/packages/video_player

https://pub.flutter-io.cn/packages/chewie

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/01/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

https