Error: : The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

It happens when the video volume is not 0, but in this case I already scrolled multiple times so mobile web browsers should allow it to play right? Also it doesn’t happen on desktop.
Here’s the code. Thank you folks!

// VideoItem embedded in a PageView which has a very simple itemBuilder
itemBuilder: (context, index) {
  final url = content[index]['url'] as String;
  return VideoItem(url: url, isMuted: _isMuted);
}

class VideoItem extends StatefulWidget {
  final String url;
  final bool isMuted;

  VideoItem({required this.url, required this.isMuted});

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

class _VideoItemState extends State<VideoItem> {
  VideoPlayerController? _controller;
  bool init = false;

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

  @override
  void didUpdateWidget(VideoItem oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.isMuted != oldWidget.isMuted) {
      _controller?.setVolume(widget.isMuted ? 0 : 1);
    }
  }

  void _initializeController() {
    if (_controller != null) {
      _controller?.dispose();
    }
    _controller = VideoPlayerController.networkUrl(Uri.parse(widget.url))
      ..initialize().then((_) {
        setState(() {
          init = true;
          _controller?.setVolume(widget.isMuted ? 0 : 1);
          _controller?.setLooping(true);
          _controller?.play();
        });
      });
  }

  void _togglePlayPause() {
    setState(() {
      if (_controller!.value.isPlaying) {
        print('Pausing video');
        _controller?.pause();
      } else {
        print('Playing video');
        _controller?.play();
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      child: GestureDetector(
        onTap: _togglePlayPause,
        child: Stack(
          alignment: Alignment.center,
          children: [
            init
                ? VideoPlayer(_controller!)
                : Center(
                    child: CircularProgressIndicator(
                    color: Colors.grey[500],
                  )),
          ],
        ),
      ),
    );
  }
}

The video should play normally without the error