Flutter视频控件插件ve_vod_controls的使用

Flutter视频控件插件ve_vod_controls的使用

pub package GitHub license

基于 ve_vod 封装的视频播放器，携带控制器。

快速开始

准备工作

添加依赖

将 ve_vod_controls 添加至 pubspec.yaml 引用：

dependencies:
  ve_vod_controls: ^latest_version

ve_vod:
  # 基础版
  sub_spec: standard
  # 高级版
  # sub_spec: premium

平台配置

Android

环境要求

相关配置内容已在本插件以及 ve_vod 中完成，无需重复配置。包括：

  1. 添加 maven 仓库
  2. 添加 SDK 依赖
  3. Java 8 支持
  4. 权限声明
  5. 混淆规则

⚠️ 特别注意：

  1. WRITE_EXTERNAL_STORAGE 为非必需权限，可根据您的实际需求设置，插件内并未添加。
  2. 构建出现依赖jcenter的问题时，项目内添加 maven { url "https://artifact.bytedance.com/repository/Volcengine/" }
iOS

环境要求

ve_vod 中完成了SDK的集成，需要开发者自行添加相关配置：

  1. 关闭 Bitcode
  2. 配置 Pod Source。请在您的 Xcode 工程的 Podfile 文件中添加以下 Source：
# 资源地址
source 'https://github.com/CocoaPods/Specs.git'
source 'https://github.com/volcengine/volcengine-specs.git'

License 文件

推荐放置在 flutter 目录下 assets/license/xxx.lic

示例

引入头文件

import 'package:ve_vod_controls/ve_vod_controls.dart';

初始化SDK

VeVodControls.instance.init(
  appId: 'xx',
  licenseFilePath: 'assets/license/vod.lic',
  appName: 'xx',
  appVersion: '1.0.0',
  appChannel: 'dev',
);

火山云文档

如果你喜欢我的项目，请在项目右上角 “Star” 一下。你的支持是对我最大的鼓励！ ^_^

完整示例Demo

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:ve_vod_controls/ve_vod_controls.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  final VeVodControls _veVodControlsPlugin = VeVodControls();

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

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initPlatformState() async {
    String platformVersion;
    // Platform messages may fail, so we use a try/catch PlatformException.
    // We also handle the message potentially returning null.
    try {
      platformVersion = await _veVodControlsPlugin.getPlatformVersion() ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Text('Running on: $_platformVersion\n'),
        ),
      ),
    );
  }
}

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

1 回复

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


在Flutter中，使用第三方插件可以大大简化开发过程，特别是对于视频控件这种复杂的功能。ve_vod_controls 是一个用于视频点播（VOD）控制的 Flutter 插件。以下是如何在 Flutter 项目中使用 ve_vod_controls 插件的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  ve_vod_controls: ^最新版本号  # 请替换为实际可用的最新版本号

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

接下来，你可以在你的 Flutter 项目中使用 ve_vod_controls。以下是一个简单的示例，展示如何集成和使用该插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Video Player Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: VideoPlayerScreen(),
    );
  }
}

class VideoPlayerScreen extends StatefulWidget {
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;
  ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    // 初始化视频控制器
    _controller = VideoPlayerController.network(
      'https://www.example.com/path/to/your/video.mp4', // 替换为你的视频URL
    )
      ..initialize().then((_) {
        // 当视频初始化完成后，设置Chewie控制器
        setState(() {
          _chewieController = ChewieController(
            videoPlayerController: _controller,
            aspectRatio: _controller.value.aspectRatio,
            autoPlay: false,
            looping: false,
            // 使用ve_vod_controls自定义控件
            customControls: VeVodControls(
              // 可以在这里配置ve_vod_controls的参数
            ),
          );
        });
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    _chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player Demo'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: Chewie(
                  controller: _chewieController,
                ),
              )
            : Container(
                child: CircularProgressIndicator(),
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

注意：

  1. ve_vod_controls 插件的具体使用方式可能有所不同，具体请参考其官方文档或示例代码。
  2. 上面的代码示例中使用了 Chewie 插件来封装 video_player，因为 Chewie 提供了更高级的 UI 控件。然而，ve_vod_controls 可能需要一些额外的配置来与 Chewie 或 video_player 一起使用。如果 ve_vod_controls 提供了自己的视频播放器组件，你可能需要直接使用它而不是 Chewie。
  3. 由于 ve_vod_controls 并非一个广泛认知的 Flutter 插件（在撰写此回复时），上述代码可能需要根据实际插件的 API 进行调整。如果 ve_vod_controls 有其自己的视频播放器组件，你可能需要查阅其文档来了解如何正确集成。

务必参考 ve_vod_controls 的官方文档和示例代码，以确保正确集成和使用该插件。

回到顶部