Flutter视频播放插件om_vimeo_player的使用

Flutter视频播放插件om_vimeo_player的使用

Omar Nasser

Omar Nasser

om_vimeo_player 插件

om_vimeo_player 插件提供了一个基于 webview_flutter 的 Vimeo 播放器 Flutter 小部件。

开始使用

在你的项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  om_vimeo_player: ^0.0.1

然后在你的 Dart 文件中导入该包：

import 'package:om_vimeo_player/om_vimeo_player.dart';

示例

以下是一个完整的示例代码，展示了如何使用 om_vimeo_player 插件来播放 Vimeo 视频。

import 'package:flutter/material.dart';
import 'package:om_vimeo_player/om_vimeo_player.dart';

void main() {
  runApp(VimeoExample());
}

class VimeoExample extends StatefulWidget {
  [@override](/user/override)
  _VimeoExampleState createState() => _VimeoExampleState();
}

class _VimeoExampleState extends State<VimeoExample> {
  VimeoVideo? vimeoVideo;
  BetterPlayerController? controller;

  Future<dynamic> initVimeo() async {
    var res = await Vimeo(
      videoId: '899877810',
      eventId: '',
      accessKey: "",
    ).load;

    if (res is VimeoError) {
      return res;
    }

    bool autoPlay = false;
    if (res is VimeoVideo) {
      vimeoVideo = res;
      controller = BetterPlayerController(
        BetterPlayerConfiguration(autoPlay: res.isLive || autoPlay),
        betterPlayerDataSource: BetterPlayerDataSource(
          BetterPlayerDataSourceType.network,
          vimeoVideo!.videoUrl.toString(),
          liveStream: res.isLive,
        ),
      );
    }

    return vimeoVideo;
  }

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    controller?.dispose(forceDispose: true);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(toolbarHeight: 0),
          body: Stack(alignment: Alignment.topCenter, children: [
            FutureBuilder<dynamic>(
              future: initVimeo(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) {
                  return Container(
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.grey.shade700)),
                      child: AspectRatio(
                          aspectRatio: 16 / 9,
                          child: Container(
                              child:
                              Center(child: CircularProgressIndicator()))));
                }

                if (snapshot.data is VimeoError) {
                  return Container(
                    decoration: BoxDecoration(
                        border: Border.all(color: Colors.grey.shade700)),
                    child: AspectRatio(
                      aspectRatio: 16 / 9,
                      child: Container(
                        alignment: Alignment.center,
                        padding: EdgeInsets.all(16),
                        child: Center(
                          child: Text(
                            "${(snapshot.data as VimeoError).developerMessage}" +
                                "\n${(snapshot.data as VimeoError).errorCode ?? ""}" +
                                "\n\n${(snapshot.data as VimeoError).error}",
                            textAlign: TextAlign.center,
                          ),
                        ),
                      ),
                    ),
                  );
                }

                return VimeoPlayer(
                  vimeoVideo: vimeoVideo!,
                  videoController: controller!,
                );
              },
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                height: 48,
                color: Colors.red.withOpacity(0.3),
                alignment: Alignment.center,
                child: Text(
                  'Vimeo Player Example',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
          ])),
    );
  }
}

更多关于Flutter视频播放插件om_vimeo_player的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter视频播放插件om_vimeo_player的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


om_vimeo_player 是一个用于在 Flutter 应用中播放 Vimeo 视频的插件。它提供了简单的 API，可以轻松地将 Vimeo 视频嵌入到你的应用中。以下是如何使用 om_vimeo_player 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 om_vimeo_player 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  om_vimeo_player: ^latest_version

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入 om_vimeo_player：

import 'package:om_vimeo_player/om_vimeo_player.dart';

3. 使用 VimeoPlayer 小部件

你可以使用 VimeoPlayer 小部件来播放 Vimeo 视频。你需要提供 Vimeo 视频的 ID 或 URL。

使用 Vimeo 视频 ID

VimeoPlayer(
  videoId: '123456789', // 替换为你的 Vimeo 视频 ID
  autoPlay: true,
  looping: true,
)

使用 Vimeo 视频 URL

VimeoPlayer(
  videoUrl: 'https://vimeo.com/123456789', // 替换为你的 Vimeo 视频 URL
  autoPlay: true,
  looping: true,
)

4. 配置选项

VimeoPlayer 小部件支持以下配置选项：

  • videoId：Vimeo 视频的 ID。
  • videoUrl：Vimeo 视频的 URL。
  • autoPlay：是否自动播放视频，默认为 false。
  • looping：是否循环播放视频，默认为 false。
  • aspectRatio：视频的宽高比，默认为 16 / 9。
  • allowFullScreen：是否允许全屏播放，默认为 true。
  • muted：是否静音播放，默认为 false。

5. 处理播放事件

你可以通过 VimeoPlayerController 来控制视频的播放，并监听播放事件。

class MyVideoPlayer extends StatefulWidget {
  [@override](/user/override)
  _MyVideoPlayerState createState() => _MyVideoPlayerState();
}

class _MyVideoPlayerState extends State<MyVideoPlayer> {
  late VimeoPlayerController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = VimeoPlayerController(
      videoId: '123456789', // 替换为你的 Vimeo 视频 ID
    )..initialize().then((_) {
        _controller.addListener(() {
          // 监听播放事件
          if (_controller.value.isPlaying) {
            print('视频正在播放');
          } else {
            print('视频暂停');
          }
        });
        setState(() {});
      });
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Vimeo 视频播放器'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VimeoPlayer(controller: _controller),
              )
            : CircularProgressIndicator(),
      ),
    );
  }
}
回到顶部