Critical: [Web Safari] (MacOS & iOS) won't render video player

[ollyde]

Flutter 3.3.9
video_player: 2.4.8

Currently we cannot release on Web because of this 1 bug.

When using the video player on Safari using the canvis-kit renderer it doesn't display while inside a Clip (ClipRR, ClipOval, etc).

There is a temporary solution mentioned here #80401

But looking at the DOM in canvis-kit there is no 'clip' or reference to clip path.

The JS solution is also noted here https://jsfiddle.net/yjbanov/nh9jzLba/42/

But how can we do this using canvis-kit?

Using the HTML renderer isn't an option as there are many bugs with it.

We can't ignore clip as that is an essential design in out app.

I doubt it will be in the Flutter master until next Summer.

What is the solution?

[exaby73]

Hello. There seems to be a duplicate issue #80401. This may be already fixed in beta or master channels. Could you confirm this?

[ollyde]

@exaby73

Testing on beta channel I can confirm that it works! Tis fixed

When should we expect this in release? Since it's critical to many people.

[ollyde]

Test code btw:

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() {
  runApp(
    MaterialApp(
      home: _App(),
    ),
  );
}

class _App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _BumbleBeeRemoteVideo(),
    );
  }
}

class _BumbleBeeRemoteVideo extends StatefulWidget {
  @override
  _BumbleBeeRemoteVideoState createState() => _BumbleBeeRemoteVideoState();
}

class _BumbleBeeRemoteVideoState extends State<_BumbleBeeRemoteVideo> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
      videoPlayerOptions: VideoPlayerOptions(),
    );

    playThis();
  }

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

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(24),
      child: Container(
        width: 320,
        height: 200,
        color: Colors.green,
        child: VideoPlayer(_controller),
      ),
    );
  }

  Future<void> playThis() async {
    await _controller.setLooping(true);
    await _controller.setVolume(0.0);
    await _controller.initialize();
    _controller.play();
  }
}

[exaby73]

You can check the cherrypick process for this. Since this is fixed, I will close this issue as a duplicate of #80401. Thank you

[ollyde]

@exaby73 thanks for your help

We can't use an un-test an unstable Flutter branch in a production release of a platform. Do you have some sort of rough estimate for when it could be released?

[exaby73]

I cannot be certain unfortunately. You can request a cherry-pick with the above link. There is a template you can fill, and it may be considered for the next hotfix.

[ollyde]

@exaby73 where is the template, perhaps I can nudge them!

[exaby73]

You can find it here

[ollyde]

@exaby73 I've made a CP, what next?

[exaby73]

We'll have to wait for the team to look at it :) Thank you for the CP request

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.