我使用以下代码向用户展示视频并让他们能够暂停、重播视频:
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
class BasicOverlayWidget extends StatelessWidget {
final VideoPlayerController? controller;
const BasicOverlayWidget({
Key? key,
@override this.controller,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => controller!.value.isPlaying
? controller!.pause()
: controller!.play(),
child: Stack(children: [
buildPlay(),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: buildIndicator(),
)
]),
);
}
Widget buildIndicator() =>
VideoProgressIndicator(controller!, allowScrubbing: true);
Widget buildPlay() => controller!.value.isPlaying
? Container()
: Container(
alignment: Alignment.center,
color: Colors.black26,
child: Container(
alignment: Alignment.center,
color: Colors.black26,
child: Icon(
Icons.play_arrow,
color: Colors.white,
size: 80,
),
),
);
}
我想做的是当用户点击已经播放的视频时,显示暂停图标半秒钟,然后显示播放按钮,直到用户再次点击视频再次开始播放按钮消失(类似每个视频播放器都在做什么)。
上面的代码很好地完成了第二个工作,但我不知道如何显示暂停图标半秒,然后暂停视频并显示播放图标?
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'basic_overlay_widget.dart';
class VideoPlayerBaseWidget extends StatelessWidget {
final VideoPlayerController? controller;
const VideoPlayerBaseWidget({
Key? key,
@override this.controller,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return controller != null && controller!.value.isInitialized
? AspectRatio(
aspectRatio: 16 / 9,
child: Container(
alignment: Alignment.center,
child: buildVideo(),
),
)
: Container(
height: 200,
child: const Center(child: CircularProgressIndicator()),
);
}
Widget buildVideo() => Stack(children: [
buildVideoPlayer(),
Positioned.fill(child: BasicOverlayWidget(controller: controller)),
]);
Widget buildVideoPlayer() => VideoPlayer(controller!);
}