Flutter中如何实现seekbar功能并排除广告推广内容

在Flutter中如何实现类似音乐播放器的seekbar功能？我知道有一些第三方库可以实现，但搜索结果里夹杂太多广告推广内容，很难找到可靠的解决方案。请问有什么推荐的方法或库可以实现这个功能？最好能提供具体的代码示例，同时避免使用那些过度商业化的插件。谢谢！

2 回复

Flutter中可使用Slider组件实现seekbar功能。通过监听onChanged和onChangeEnd事件控制播放进度。排除广告内容需在业务逻辑中处理，例如根据时间轴跳过广告区间，或使用无广告的媒体源。

更多关于Flutter中如何实现seekbar功能并排除广告推广内容的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现seekbar功能并排除广告内容，可以通过以下方式：

1. 使用video_player包实现基础seekbar

import 'package:video_player/video_player.dart';

class VideoPlayerWithSeekbar extends StatefulWidget {
  @override
  _VideoPlayerWithSeekbarState createState() => _VideoPlayerWithSeekbarState();
}

class _VideoPlayerWithSeekbarState extends State<VideoPlayerWithSeekbar> {
  late VideoPlayerController _controller;
  
  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network('your_video_url')
      ..initialize().then((_) {
        setState(() {});
      });
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AspectRatio(
          aspectRatio: _controller.value.aspectRatio,
          child: VideoPlayer(_controller),
        ),
        VideoProgressIndicator(
          _controller,
          allowScrubbing: true,
        ),
        // 自定义seekbar
        Slider(
          value: _controller.value.position.inSeconds.toDouble(),
          min: 0,
          max: _controller.value.duration.inSeconds.toDouble(),
          onChanged: (value) {
            _controller.seekTo(Duration(seconds: value.toInt()));
          },
        ),
      ],
    );
  }
}

2. 排除广告内容的实现方法

class AdFreeVideoPlayer extends StatefulWidget {
  final List<Duration> adTimestamps; // 广告时间段列表
  
  AdFreeVideoPlayer({required this.adTimestamps});
  
  @override
  _AdFreeVideoPlayerState createState() => _AdFreeVideoPlayerState();
}

class _AdFreeVideoPlayerState extends State<AdFreeVideoPlayer> {
  // 跳过广告时间段
  void _seekToValidPosition(double seekValue) {
    Duration targetPosition = Duration(seconds: seekValue.toInt());
    
    // 检查是否在广告时间段内
    for (var adRange in widget.adTimestamps) {
      if (_isInAdRange(targetPosition, adRange)) {
        // 跳过广告，定位到广告结束时间
        _controller.seekTo(adRange.end);
        return;
      }
    }
    
    _controller.seekTo(targetPosition);
  }
  
  bool _isInAdRange(Duration position, Duration adRange) {
    // 根据实际广告时间段逻辑判断
    return position >= adRange.start && position <= adRange.end;
  }
}

3. 推荐的完整方案

使用chewie包（基于video_player的UI包装器）：

dependencies:
  chewie: ^1.4.0
  video_player: ^2.5.1

Chewie(
  controller: ChewieController(
    videoPlayerController: _controller,
    autoPlay: true,
    looping: false,
    // 自定义进度条配置
    customControls: const CustomControls(),
  ),
)

关键要点：

  • 使用video_player作为基础视频播放
  • 通过监听进度条拖动事件，在广告时间段自动跳过
  • 维护广告时间段列表，在seek时进行验证
  • 使用chewie可以简化UI开发

这样可以实现基本的seekbar功能，并有效排除广告内容。

回到顶部