Flutter视频播放插件custom_vimeo_player的使用

Flutter视频播放插件custom_vimeo_player的使用

custom_vimeo_player

Flutter Website Dart Website Android Website iOS Website

这是一个用于嵌入可自定义播放控件的Vimeo视频的Flutter插件。

特性

  • 简单地集成Vimeo视频
  • 可定制的播放控件（自动播放、循环、静音等）
  • 事件处理（播放、暂停、结束等）
  • 通过InAppWebView支持原生iOS/Android
  • MIT许可

预览

custom_vimeo_player

使用方法

import 'package:custom_vimeo_player/custom_vimeo_player.dart';

CustomVimeoPlayer(
  videoId: '<your_vimeo_id>',
),

必需参数

参数名 描述
String vimeoId 要播放的Vimeo视频的ID

可选参数

参数名 描述
bool autoPlay 加载时是否自动播放（默认：false）
bool loop 播放结束后是否循环（默认：false）
bool muted 开始播放时是否静音（默认：false）
bool showTitle 是否显示视频标题（默认：false）
bool showByline 是否显示视频字幕（默认：false）
bool controls 是否显示播放控件（默认：true）
bool dnt 是否防止跟踪（默认：true）
VoidCallback? onReady 视频准备播放时调用
VoidCallback? onPlay 视频开始播放时调用
VoidCallback? onPause 视频暂停时调用
VoidCallback? onEnd 视频播放结束时调用
VoidCallback? onSeeked 视频位置改变时调用

依赖项

示例代码

以下是一个完整的示例代码：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Vimeo Player Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Custom Vimeo Player Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final snackBarReady = const SnackBar(
    content: Text('Video is ready to play'),
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SizedBox(
        height: 250,
        child: CustomVimeoPlayer(
          videoId: '<your_vimeo_id>', // 替换为你的Vimeo视频ID
          onPlay: () {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                content: Text('Video started playing'),
                backgroundColor: Colors.green,
              ),
            );
          },
          onEnd: () {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                content: Text('Video playback completed'),
                backgroundColor: Colors.green,
              ),
            );
          },
        ),
      ),
    );
  }
}

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

1 回复

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


当然，关于在Flutter中使用custom_vimeo_player插件来播放Vimeo视频，下面是一个基本的代码示例，展示了如何集成和使用这个插件。

首先，确保你已经在pubspec.yaml文件中添加了custom_vimeo_player依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_vimeo_player: ^latest_version  # 请替换为实际的最新版本号

然后，运行flutter pub get来获取依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤来使用custom_vimeo_player插件播放Vimeo视频：

  1. 导入必要的包：
import 'package:flutter/material.dart';
import 'package:custom_vimeo_player/custom_vimeo_player.dart';
  1. 创建Vimeo视频播放器页面：
class VimeoVideoPlayerPage extends StatefulWidget {
  final String videoId;

  VimeoVideoPlayerPage({required this.videoId});

  @override
  _VimeoVideoPlayerPageState createState() => _VimeoVideoPlayerPageState();
}

class _VimeoVideoPlayerPageState extends State<VimeoVideoPlayerPage> {
  late VimeoPlayerController _vimeoPlayerController;

  @override
  void initState() {
    super.initState();
    // 初始化VimeoPlayerController
    _vimeoPlayerController = VimeoPlayerController(
      videoId: widget.videoId,
      autoplay: false, // 是否自动播放
      looping: false,  // 是否循环播放
      muted: false,    // 是否静音
    );
  }

  @override
  void dispose() {
    // 释放资源
    _vimeoPlayerController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Vimeo Video Player'),
      ),
      body: Center(
        child: CustomVimeoPlayer(
          controller: _vimeoPlayerController,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 控制播放/暂停
          if (_vimeoPlayerController.value.isPlaying) {
            _vimeoPlayerController.pause();
          } else {
            _vimeoPlayerController.play();
          }
        },
        tooltip: _vimeoPlayerController.value.isPlaying ? 'Pause' : 'Play',
        child: Icon(
          _vimeoPlayerController.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}
  1. 在你的应用中导航到Vimeo视频播放器页面：
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Vimeo Player Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Vimeo Player Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 替换为你的Vimeo视频ID
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => VimeoVideoPlayerPage(videoId: 'your_vimeo_video_id')),
              );
            },
            child: Text('Play Video'),
          ),
        ),
      ),
    );
  }
}

在上面的代码中，your_vimeo_video_id应该替换为实际的Vimeo视频ID。这个示例展示了如何初始化VimeoPlayerController，并将其与CustomVimeoPlayer组件关联，同时提供了一个简单的播放/暂停控制按钮。

确保在实际项目中处理错误和异常，并根据需要调整UI和逻辑。

回到顶部