Flutter视频播放控制插件video_player_with_controls的使用

Flutter视频播放控制插件video_player_with_controls的使用

video_player_with_controls 是一个 Dart 包，它为 Flutter 应用程序提供了具有额外控件和功能的增强型视频播放器。

功能

  • 播放/暂停功能
  • 显示已播放时间和总时间
  • 全屏支持
  • 3秒无操作后自动隐藏控件
  • 可自定义的跳过功能，可以向前或向后跳过指定秒数

截图

初始界面 播放界面 全屏界面

使用

要使用此包，在 pubspec.yaml 文件中添加 video_player_with_controls 作为依赖项。

dependencies:
  video_player_with_controls: ^1.0.0

在 Dart 代码中导入该包。

import 'package:video_player_with_controls/video_player_with_controls.dart';

然后添加以下代码片段：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('视频播放器带控件'),
    ),
    body: Center(
      child: SizedBox(
        height: 250.0,
        child: VideoPlayerWithControls(
          videoUrl: 'https://assets.mixkit.co/videos/preview/mixkit-girl-dancing-happily-in-a-field-of-flowers-4702-large.mp4',
          skipVideoUptoSec: 8
        ),
      )
    )
  );
}

希望你喜欢这个插件！

完整示例代码

以下是完整的示例代码，展示如何使用 video_player_with_controls 插件。

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

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

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

  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: '视频播放器带控件'),
    );
  }
}

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 String videoPlayUrl = 
      'https://assets.mixkit.co/videos/preview/mixkit-girl-dancing-happily-in-a-field-of-flowers-4702-large.mp4';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: SizedBox(
          height: 250.0,
          child: VideoPlayerWithControls(
              videoUrl: videoPlayUrl, skipVideoUptoSec: 8),
        )));
  }
}

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

1 回复

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


video_player_with_controls 是一个为 Flutter 视频播放器增强控制的插件。它基于 Flutter 官方的 video_player 插件，并添加了常用的播放控制功能，如播放/暂停、进度条、全屏切换等。

以下是使用 video_player_with_controls 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 video_player_with_controls 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  video_player_with_controls: ^X.X.X # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 video_player_with_controls 包：

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

3. 创建视频播放器

使用 VideoPlayerWithControls 创建视频播放器。你需要提供一个 VideoPlayerController 实例。

class VideoPlayerWithControlsExample extends StatefulWidget {
  @override
  _VideoPlayerWithControlsExampleState createState() =>
      _VideoPlayerWithControlsExampleState();
}

class _VideoPlayerWithControlsExampleState
    extends State<VideoPlayerWithControlsExample> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
      'https://www.example.com/sample.mp4', // 替换为你的视频 URL
    )..initialize().then((_) {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player with Controls'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? VideoPlayerWithControls(
                controller: _controller,
              )
            : CircularProgressIndicator(),
      ),
    );
  }

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

4. 运行应用

确保你已经正确设置了视频 URL，然后运行你的 Flutter 应用。你将看到一个带有播放控制功能的视频播放器。

5. 自定义控件

你可以通过传递参数来自定义 VideoPlayerWithControls 的外观和行为。例如，你可以控制是否显示全屏按钮、是否自动播放等。

VideoPlayerWithControls(
  controller: _controller,
  showFullscreenButton: true,
  autoPlay: true,
  looping: false,
)

6. 全屏模式

video_player_with_controls 插件支持全屏模式。你可以通过点击全屏按钮或调用 enterFullScreen 方法来进入全屏模式。

VideoPlayerWithControls(
  controller: _controller,
  showFullscreenButton: true,
  onEnterFullscreen: () {
    print('Entering full screen mode');
  },
  onExitFullscreen: () {
    print('Exiting full screen mode');
  },
)

7. 处理错误

你还可以通过监听 VideoPlayerController 的错误来处理视频播放过程中的异常。

_controller.addListener(() {
  if (_controller.value.hasError) {
    print('Video playback error: ${_controller.value.errorDescription}');
  }
});
回到顶部