Flutter Web VideoPlayer 始终显示在父容器下方问题求助

问题根源 #

Flutter Web中video_player组件的视频是作为HTML元素渲染的，默认层级低于Flutter的Canvas绘制层。这就导致即使你在Stack中将VideoPlayer放在下层，Canvas上的Widget（比如带背景色的Container）也会覆盖在视频之上，出现视频显示在所有元素底层的现象。

解决方案 #

通过以下步骤修复：

1. 提升HTML视频元素层级：在视频初始化完成后，手动设置HTML video元素的z-index，让它高于Flutter Canvas。
2. 优化布局对齐：使用Positioned确保覆盖层完全匹配视频容器的位置和大小，避免布局偏移。
3. 处理视频圆角：用ClipRRect包裹VideoPlayer，解决HTML视频元素不遵守Flutter borderRadius的问题。

修改后的完整代码 #

import 'dart:html' as html;
import 'package:ThePack/domain/screen_utils.dart';
import 'package:ThePack/presentation/pages/home_screen/sections/widgets/play_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:video_player/video_player.dart';

class VideoPlayerWidget extends StatefulWidget {
  final String video;
  double margin, width, height, scrollbarWidth;
  VideoPlayerWidget({
    required this.video,
    this.height = 44,
    this.width = 40,
    this.margin = 5,
    this.scrollbarWidth = 30,
  });

  @override
  _VideoPlayerWidgetState createState() => _VideoPlayerWidgetState();
}

class _VideoPlayerWidgetState extends State<VideoPlayerWidget> {
  late VideoPlayerController _controller;
  late Future<void> _initializeVideoPlayerFuture;
  bool _isPlaying = false;
  double _progressValue = 0.0;

  @override
  void initState() {
    super.initState();

    _controller = VideoPlayerController.asset(widget.video);

    _initializeVideoPlayerFuture = _controller.initialize().then((_) {
      // Web端单独处理：提升视频元素层级至Canvas之上
      if (kIsWeb) {
        final html.VideoElement videoElement = _controller.value.videoElement!;
        videoElement.style.zIndex = '9999';
        videoElement.setAttribute('playsinline', 'true'); // 可选：启用内联播放
      }
      setState(() {});
    });

    _controller.addListener(() {
      if (_controller.value.position >= _controller.value.duration) {
        setState(() {
          _isPlaying = false;
        });
      } else if (_controller.value.isPlaying) {
        setState(() {
          _progressValue =
              _controller.value.position.inMilliseconds.toDouble() /
                  _controller.value.duration.inMilliseconds.toDouble();
        });
      }
    });
  }

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

  String formatDuration(Duration duration) {
    String minutes = duration.inMinutes.remainder(60).toString().padLeft(2, '0');
    String seconds = duration.inSeconds.remainder(60).toString().padLeft(2, '0');
    return '$minutes:$seconds';
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Stack(
          children: [
            // 视频容器：添加ClipRRect实现圆角
            Container(
              margin: EdgeInsets.only(left: ScreenUtils.percentWidth(context, widget.margin)),
              height: ScreenUtils.percentHeight(context, widget.height),
              width: ScreenUtils.percentWidth(context, widget.width),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: _controller.value.isInitialized
                    ? VideoPlayer(_controller)
                    : const SizedBox(),
              ),
            ),
            // 覆盖层：用Positioned精确定位，避免重复设置布局参数
            Positioned(
              left: ScreenUtils.percentWidth(context, widget.margin),
              height: ScreenUtils.percentHeight(context, widget.height),
              width: ScreenUtils.percentWidth(context, widget.width),
              child: Container(
                decoration: _boxDecorationOpacity(),
                child: !_isPlaying
                    ? IconButton(
                        onPressed: _playPause,
                        icon: PlayButton(),
                      )
                    : InkWell(
                        focusColor: Colors.transparent,
                        highlightColor: Colors.transparent,
                        onTap: _playPause,
                      ),
              ),
            ),
          ],
        ),
        Container(
          alignment: Alignment.center,
          margin: EdgeInsets.only(
            left: ScreenUtils.percentWidth(context, widget.margin),
            top: ScreenUtils.percentHeight(context, 2),
          ),
          width: ScreenUtils.percentWidth(context, widget.width),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              SizedBox(
                width: ScreenUtils.percentWidth(context, widget.scrollbarWidth),
                child: Slider(
                  value: _progressValue,
                  onChanged: _navigationProgressBar,
                  activeColor: const Color(0xFFFF7373),
                  inactiveColor: const Color(0xFFFF7373).withAlpha(100),
                ),
              ),
              const Expanded(child: SizedBox()),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    formatDuration(_controller.value.position),
                    style: const TextStyle(fontSize: 12.0, color: Colors.red),
                  ),
                  const Text(
                    "  -  ",
                    style: TextStyle(fontSize: 12.0, color: Colors.red),
                  ),
                  Text(
                    formatDuration(_controller.value.duration),
                    style: const TextStyle(fontSize: 12.0, color: Colors.red),
                  ),
                ],
              ),
            ],
          ),
        )
      ],
    );
  }

  void _navigationProgressBar(double value) {
    setState(() {
      final Duration newPosition = Duration(
        milliseconds: (value * _controller.value.duration.inMilliseconds).round(),
      );
      _controller.seekTo(newPosition);
    });
  }

  void _playPause() {
    setState(() {
      if (_controller.value.isPlaying) {
        _controller.pause();
        _isPlaying = false;
      } else {
        _controller.play();
        _isPlaying = true;
      }
    });
  }

  BoxDecoration _boxDecorationOpacity() {
    return BoxDecoration(
      borderRadius: BorderRadius.circular(20),
      color: !_isPlaying ? const Color.fromARGB(96, 0, 0, 0) : Colors.transparent,
    );
  }
}

关键修改说明 #

• 提升视频层级：在Web端初始化完成后，获取HTML video元素并设置zIndex: '9999'，确保视频在Flutter Canvas之上渲染。
• 圆角处理：用ClipRRect包裹VideoPlayer，解决HTML视频元素不支持Flutter borderRadius的问题。
• 布局优化：使用Positioned定位覆盖层，避免重复设置margin、宽高，确保覆盖层与视频容器完全对齐。

内容的提问来源于stack exchange，提问作者Arisbor