fix(flutter): 修复 iOS 视频首帧闪屏
This commit is contained in:
Zhou Weidong committed
1 parent
ca6776580f
commit
6b397015b1
3 files changed
+345
-54
No files matched your search
@@ -0,0 +1,222 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:video_player/video_player.dart';
|
||||
|
||||
import '../../../core/widgets/remote_image.dart';
|
||||
|
||||
const Duration _videoFadeDuration = Duration(milliseconds: 200);
|
||||
const double _debugRight = 8;
|
||||
const double _debugBottom = 8;
|
||||
const double _debugFontSize = 11;
|
||||
const double _errorHorizontal = 32;
|
||||
const int _errorMaxLines = 3;
|
||||
|
||||
/// 封面底层与视频层共用同一控制器，视频首帧就绪后再淡入。
|
||||
class PlayerVideoSurface extends StatefulWidget {
|
||||
const PlayerVideoSurface({
|
||||
super.key,
|
||||
required this.controller,
|
||||
required this.posterUrl,
|
||||
required this.videoUrl,
|
||||
required this.theater,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final VideoPlayerController? controller;
|
||||
final String posterUrl;
|
||||
final String videoUrl;
|
||||
final bool theater;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
State<PlayerVideoSurface> createState() => _PlayerVideoSurfaceState();
|
||||
}
|
||||
|
||||
class _PlayerVideoSurfaceState extends State<PlayerVideoSurface> {
|
||||
String? _lastDebugState;
|
||||
|
||||
@override
|
||||
void didUpdateWidget(covariant PlayerVideoSurface oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
if (oldWidget.controller != widget.controller) _lastDebugState = null;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final controller = widget.controller;
|
||||
if (controller == null) return _frame(null);
|
||||
return ValueListenableBuilder<VideoPlayerValue>(
|
||||
valueListenable: controller,
|
||||
builder: (context, value, _) => _frame(value),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _frame(VideoPlayerValue? value) {
|
||||
final controller = widget.controller;
|
||||
final reveal = _shouldReveal(value);
|
||||
_logStateChange(value);
|
||||
return Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
_FallbackBackground(posterUrl: widget.posterUrl),
|
||||
AnimatedOpacity(
|
||||
key: const Key('player-video-opacity'),
|
||||
opacity: reveal ? 1 : 0,
|
||||
duration: _videoFadeDuration,
|
||||
curve: Curves.easeOut,
|
||||
child: reveal && controller != null
|
||||
? _VideoLayer(
|
||||
controller: controller,
|
||||
value: value!,
|
||||
theater: widget.theater,
|
||||
onTap: widget.onTap,
|
||||
)
|
||||
: const SizedBox.expand(),
|
||||
),
|
||||
if (kDebugMode)
|
||||
Positioned(
|
||||
right: _debugRight,
|
||||
bottom: _debugBottom,
|
||||
child: DecoratedBox(
|
||||
decoration: const BoxDecoration(color: Color(0x99000000)),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2),
|
||||
child: Text(
|
||||
_debugStatus(value),
|
||||
key: const Key('player-debug-video'),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: Colors.white70,
|
||||
fontSize: _debugFontSize,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (kDebugMode && value?.hasError == true)
|
||||
Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: _errorHorizontal),
|
||||
child: Text(
|
||||
value?.errorDescription ?? 'unknown video error',
|
||||
key: const Key('player-video-error'),
|
||||
maxLines: _errorMaxLines,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(color: Colors.white70, fontSize: 13),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
bool _shouldReveal(VideoPlayerValue? value) {
|
||||
return value != null &&
|
||||
!value.hasError &&
|
||||
value.isInitialized &&
|
||||
value.size.width > 0 &&
|
||||
(value.position > Duration.zero || value.isPlaying);
|
||||
}
|
||||
|
||||
void _logStateChange(VideoPlayerValue? value) {
|
||||
if (!kDebugMode) return;
|
||||
final status = _debugStatus(value);
|
||||
final signature =
|
||||
'$status|${value?.isInitialized ?? false}|'
|
||||
'${value?.errorDescription ?? 'none'}';
|
||||
if (signature == _lastDebugState) return;
|
||||
_lastDebugState = signature;
|
||||
final source = widget.controller?.dataSource ?? widget.videoUrl;
|
||||
debugPrint(
|
||||
'[video] init=${value?.isInitialized ?? false} '
|
||||
'err=${value?.errorDescription ?? 'none'} host=${_host(source)}',
|
||||
);
|
||||
}
|
||||
|
||||
String _debugStatus(VideoPlayerValue? value) {
|
||||
if (value == null) return 'loading';
|
||||
if (value.hasError) {
|
||||
return 'error: ${value.errorDescription ?? 'unknown'}';
|
||||
}
|
||||
if (value.isBuffering) return 'buffering';
|
||||
if (value.isInitialized) return 'initialized';
|
||||
return 'loading';
|
||||
}
|
||||
|
||||
String _host(String source) {
|
||||
final uri = Uri.tryParse(source);
|
||||
if (uri == null || uri.host.isEmpty) return 'unknown';
|
||||
final port = uri.hasPort
|
||||
? uri.port
|
||||
: uri.scheme == 'https'
|
||||
? 443
|
||||
: 80;
|
||||
return '${uri.host}:$port';
|
||||
}
|
||||
}
|
||||
|
||||
class _VideoLayer extends StatelessWidget {
|
||||
const _VideoLayer({
|
||||
required this.controller,
|
||||
required this.value,
|
||||
required this.theater,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final VideoPlayerController controller;
|
||||
final VideoPlayerValue value;
|
||||
final bool theater;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: onTap,
|
||||
child: FittedBox(
|
||||
fit: theater ? BoxFit.contain : BoxFit.cover,
|
||||
child: SizedBox(
|
||||
width: value.size.width,
|
||||
height: value.size.height,
|
||||
child: VideoPlayer(controller, key: ValueKey(controller)),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _FallbackBackground extends StatelessWidget {
|
||||
const _FallbackBackground({required this.posterUrl});
|
||||
|
||||
final String posterUrl;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (posterUrl.trim().isEmpty) {
|
||||
return const ColoredBox(
|
||||
key: Key('player-fallback-background'),
|
||||
color: Colors.black,
|
||||
);
|
||||
}
|
||||
return Stack(
|
||||
key: const Key('player-fallback-background'),
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
RemoteImage(
|
||||
posterUrl,
|
||||
key: const Key('player-fallback-cover'),
|
||||
fit: BoxFit.cover,
|
||||
fallbackColor: Colors.black,
|
||||
),
|
||||
const ColoredBox(
|
||||
key: Key('player-fallback-scrim'),
|
||||
color: Color(0x4D000000),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user