本文为您介绍了Flutter平台播放器SDK的说明以及集成方式。并且以Android Studio为例,为您演示如何快速集成。

项目说明

Flutter播放器原生层的开发基于Android播放器SDK和iOS播放器SDK。目前已将源码通过Demo依赖的方式透出,开发者可以自行添加。源码请参见播放器SDK

项目目录结构如图所示:Flutter目录结构

目录文件名及功能说明如下所示。

文件名 内容 是否必需
android Android端原生代码与播放器SDK。
ios iOS端原生代码与播放器SDK。
lib Flutter端接口代码。
extra RTS SDK。
example Flutter播放器Demo。

集成方式

您可以通过集成依赖的方式,在项目中的pubspec.yaml文件中引入flutter_aliplayer依赖,快速集成Flutter播放器。
dependencies:
  flutter_aliplayer: ^version
# version为阿里云Flutter播放器的版本号,例如:5.4.0。在使用时,请根据使用的版本进行变更。

集成操作

以下操作以Android studio3.6.3为例,以最简单的方式,帮助您集成Flutter播放器。

环境准备
  • 使用Android studio开发:以版本号3.6.3为例,在Plugin页面下载Flutter插件。Flutter 1.21版本之前不包含Dart SDK,需要再配置Dart SDK。
  • 安装Flutter:下载地址,请参见Flutter下载

操作步骤

  1. 打开Android Studio,单击Start a new Flutter project
  2. 选择Flutter Application,单击Next
  3. 选择Flutter SDK path(本地下载好的Flutter路径),单击Next
  4. 单击Finish
  5. pubspec.yaml文件中引入flutter_aliplayer依赖。
    dependencies:
      flutter_aliplayer: ^version
    # version为阿里云Flutter播放器的版本号,例如:5.4.0。在使用时,请根据使用的版本进行变更。
    如需您需要添加RTS,请引入以下依赖。
     flutter_aliplayer_artc: ^version
     flutter_aliplayer_rts: ^version
    #  version为版本号。例如,flutter_aliplayer_artc: ^5.2.3, flutter_aliplayer_rts: ^1.5.0。在使用时,请根据使用的版本进行变更。

当您集成完依赖之后,可以使用以下代码,快速搭建Flutter播放器。

  1. lib文件夹下新建一个dart文件,创建并配置播放器。
    import 'package:flutter/material.dart';
    import 'package:flutter_aliplayer/flutter_aliplayer.dart';
    import 'package:flutter_aliplayer/flutter_aliplayer_factory.dart';
    
    class MyTest extends StatefulWidget {
      const MyTest({Key? key}) : super(key: key);
    
      @override
      _MyTestState createState() => _MyTestState();
    }
    
    class _MyTestState extends State<MyTest> {
    
      late FlutterAliplayer fAliplayer;
    
      @override
      void initState() {
        super.initState();
        //创建播放器
        fAliplayer = FlutterAliPlayerFactory.createAliPlayer();
      }
    
      //设置渲染的 View
      @override
      Widget build(BuildContext context) {
        var x = 0.0;
        var y = 0.0;
        Orientation orientation = MediaQuery.of(context).orientation;
        var width = MediaQuery.of(context).size.width;
    
        var height;
        if (orientation == Orientation.portrait) {
          height = width * 9.0 / 16.0;
        } else {
          height = MediaQuery.of(context).size.height;
        }
        AliPlayerView aliPlayerView = AliPlayerView(
            onCreated: onViewPlayerCreated,
            x: x,
            y: y,
            width: width,
            height: height);
        return OrientationBuilder(
          builder: (BuildContext context, Orientation orientation) {
            return Scaffold(
              body: Column(
                children: [
                  Container(
                      color: Colors.black,
                      child: aliPlayerView,
                      width: width,
                      height: height),
                ],
              ),
            );
          },
        );
      }
    
        void onViewPlayerCreated(viewId) async {
        //将渲染View设置给播放器
        fAliplayer.setPlayerView(viewId);
        //设置播放源,URL播放方式
        fAliplayer.setUrl("https://vidoe/test.mp4");
        //开启自动播放
        fAliplayer.setAutoPlay(true);
        fAliplayer.prepare();
      }
    }
  2. lib文件夹下选择跳转的dart文件,引入Flutter播放器的方法。本文以main.dart文件中跳转为例。

    跳转示例代码,仅供参考。

    Navigator.push(context, MaterialPageRoute(builder: (context) => MyTest())); //MyTest()为方法名称,可根据名称自行变更。
  3. 在上方菜单栏选择真机,单击Run按钮运行。
    说明 Android播放器SDK不支持模拟器。