Flutter双击播放视图插件double_tap_player_view的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter双击播放视图插件double_tap_player_view的使用

插件介绍

double_tap_player_view 是一个用于处理通过双击触发快进/快退行为的插件。 它借鉴了 DoubleTapPlayerView 的设计。

示例代码

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:video_player/video_player.dart';

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with AfterLayoutMixin {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4')
      ..initialize().then((_) =&gt; setState(() {}));
    WidgetsBinding.instance.addPostFrameCallback((_) async =&gt; _controller.play());
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: AspectRatio(
            aspectRatio: 16 / 9,
            child: DoubleTapPlayerView(
              doubleTapConfig: DoubleTapConfig.create(onDoubleTap: (lr) {
                debugPrint('double tapped: $lr');
              }),
              swipeConfig: SwipeConfig.create(overlayBuilder: _overlay),
              child: VideoPlayer(_controller),
            ),
          ),
        ),
      ),
    );
  }

  Widget _overlay(SwipeData data) {
    final dxDiff = (data.currentDx - data.startDx).toInt();
    final diffDuration = Duration(seconds: dxDiff);
    final prefix = diffDuration.isNegative ? '-' : '+';
    final positionText = '$prefix${diffDuration.printDuration()}';
    final aimedDuration = diffDuration + const Duration(minutes: 5);
    final diffText = aimedDuration.printDuration();

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            positionText,
            style: const TextStyle(
              fontSize: 30,
              color: Colors.white,
            ),
          ),
          const SizedBox(height: 4),
          Text(
            diffText,
            style: const TextStyle(
              fontSize: 20,
              color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }
}

extension on Duration {
  /// ref: https://stackoverflow.com/a/54775297/8183034
  String printDuration() {
    String twoDigits(int n) =&gt; n.toString().padLeft(2, '0');
    final twoDigitMinutes = twoDigits(inMinutes.abs().remainder(60));
    final twoDigitSeconds = twoDigits(inSeconds.abs().remainder(60));
    return '$twoDigitMinutes:$twoDigitSeconds';
  }
}

使用说明

  1. 安装依赖：

    dependencies:
  double_tap_player_view: ^1.0.3

  2. 导入插件：

    import 'package:double_tap_player_view/double_tap_player_view.dart';

  3. 创建 DoubleTapPlayerView：

    DoubleTapPlayerView(
  doubleTapConfig: DoubleTapConfig.create(),
  swipeConfig: SwipeConfig.create(overlayBuilder: _overlay),
  child: VideoPlayer(_controller),
),

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用double_tap_player_view插件的一个简单示例。首先，你需要确保已经在pubspec.yaml文件中添加了该插件的依赖：

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

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

下面是一个完整的示例代码，展示了如何使用double_tap_player_view插件来实现双击播放视频的功能：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DoubleTapPlayerController? _controller;

  @override
  void initState() {
    super.initState();
    // 初始化控制器
    _controller = DoubleTapPlayerController(
      // 设置视频源URL，可以是本地文件路径或网络URL
      videoSource: 'https://www.example.com/path/to/your/video.mp4',
      // 设置为自动播放（可选）
      autoPlay: false,
    );
  }

  @override
  void dispose() {
    // 释放控制器资源
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Double Tap Player View Demo'),
      ),
      body: Center(
        child: DoubleTapPlayerView(
          controller: _controller!,
          onDoubleTap: () {
            // 双击事件回调，可以在这里添加自定义逻辑
            print('Double tapped!');
            if (_controller!.isPlaying) {
              _controller!.pause();
            } else {
              _controller!.play();
            }
          },
          // 其他可选参数，如宽高、占位图等
          aspectRatio: 16 / 9,
          placeholder: Image.asset('assets/placeholder_image.png'), // 如果需要占位图，请确保在assets中添加了图片
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 示例：通过按钮控制播放/暂停
          if (_controller!.isPlaying) {
            _controller!.pause();
          } else {
            _controller!.play();
          }
        },
        tooltip: 'Play/Pause',
        child: Icon(_controller!.isPlaying ? Icons.pause : Icons.play_arrow),
      ),
    );
  }
}

在这个示例中，我们创建了一个DoubleTapPlayerController来管理视频播放器的状态，并将其传递给DoubleTapPlayerView组件。我们还实现了双击事件回调，在双击时切换视频的播放和暂停状态。此外，我们还添加了一个浮动按钮来手动控制视频的播放和暂停。

请确保将videoSource的值替换为有效的视频URL或本地文件路径，并根据需要调整其他参数。

希望这个示例能帮助你理解如何在Flutter项目中使用double_tap_player_view插件。

回到顶部