1921168 - app.videogen.io - Generated video is blank

Status: NEW

(Web Compatibility :: Site Reports, defect, P3)

Description

[Calin Tanase]

Environment:
Operating system: Android 11
Firefox version: Firefox Mobile [phone]

Preconditions:

• account needed

Steps to reproduce:

1. Go to https://app.videogen.io
2. Log in with your google account.
3. Tap on "Generate a video".
4. Select the "Blank" option.
5. Type a video prompt (e.g. Dog eating pizza) and tap on "Generate script"
6. Hit "Continue" and "Generate video".
7. Play the video.

Expected Behavior:
The video can be played correctly.

Actual Behavior:
The audio works but the video itself is blank.

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in Firefox Nightly, and Firefox Release
• Does not reproduce in Chrome

Created from https://github.com/webcompat/web-bugs/issues/142006

Comment 1

[Calin Tanase]

Attachment: FF vs Chrome.mp4

Comment 2

[az [:az]]

I was able to repro this as well on nightly. Here's a profile with logging information. There are a ton of repeating log entries which look like the following:

(MediaDecoder) MediaDecoder[7711005b00] UpdateVideoDecodeMode(), set Normal because the element has been tainted.
(MediaDecoder) MediaDecoder[770f336800] Changed mNextFrameStatus to NEXT_FRAME_AVAILABLE
(MediaDecoder) MediaDecoder[770f336800] Changed mNextFrameStatus to NEXT_FRAME_UNAVAILABLE_SEEKING
(MediaDecoder) MediaDecoder[7833e85b00] Seek, target=1.365333
(MediaDecoder) MediaDecoder[7833e85b00] Pause
(MediaDecoder) MediaDecoder[770f336800] Seek, target=0.000000
(MediaDecoder) MediaDecoder[770f336800] Pause
(MediaDecoder) MediaDecoder[7711005b00] UpdateVideoDecodeMode(), set Normal because the element has been tainted.
<repeat>

:jolin, would you have any thoughts here? I'm happy to help debug further as well.

Comment 3

[az [:az]]

This also repros on Linux desktop but to a much lesser extent. The majority of the video plays but occasionally some snippets won't load and it'll show a grey window for those instead.

Comment 4

[John Lin [:jhlin][:jolin]]

On Android, using canvas API to draw video contents doesn't work well, and it looks like the page uses that to show video:

<div class="group relative h-full w-full overflow-hidden rounded-2xl bg-gray-300 sm:rounded-3xl" style="width: 306.506px; height: 544.9px;">
  <div class="absolute h-full w-full overflow-hidden rounded-2xl sm:rounded-3xl" style="filter: blur(0px);">
    <img src="https://library.videogen.io/pexels-video-6931577-thumbnail-w400-h711.png" class="hidden" loading="eager">
    <img src="https://library.videogen.io/pexels-video-6120119-thumbnail-w400-h710.png" class="hidden" loading="eager">
    <img class="hidden" loading="eager">
    <video preload="auto" playsinline="" disablepictureinpicture="" src="https://library.videogen.io/pexels-video-6931577-primary-w540-h960.mp4" class="hidden"></video>
    <video preload="auto" playsinline="" disablepictureinpicture="" src="https://library.videogen.io/pexels-video-6120119-primary-w540-h960.mp4" class="hidden"></video>
    <video preload="auto" playsinline="" disablepictureinpicture="" class="hidden"></video>
    <canvas width="799" height="1421" class="absolute h-full w-full" data-state="closed"></canvas>
    <canvas width="799.5815575641135" height="1421.478324558424" class="pointer-events-none absolute h-full w-full lower-canvas" data-fabric="main" style="width: 306.506px; height: 544.9px;" dir="ltr"></canvas>
    <div class="absolute -top-[100%] z-20 h-[400%] w-10 rotate-45 overflow-hidden bg-white blur-3xl opacity-75" style="left: 150%;"></div>
  </div>
</div>