1545703 - images.google.com - Some videos do not play or play erratically

Status: NEW

(Core :: Audio/Video: Playback, defect, P3)

Description

[Karl Dubost💡 :karlcow]

This is a bug report in the context of testing Google Image Search
with Firefox Android
with a Chrome UA string.
to study what are the gaps we may need to solve.

See https://webcompat.com/issues/29651 for details

To reproduce:

Settings:

Open Firefox Desktop
Set the browser in RDM (Responsive Design Mode)
Screen size 411x731
DPR: 2.6
User Agent: Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3769.0 Mobile Safari/537.36
Touch activated.
Then:

1. Navigate to https://www.google.com/search?q=adidas&tbm=isch&hl=en&tbs=itp:animated,rimg:CdOv39lFD06hIkDzno0eLeo5iEIQvwL56Y_1YT6ECbuXWwsmjxQ4j67FwW48dBE5JF-FAYhTxFjFLREIherFOgszXCoOj0C0TJABxKhIJ856NHi3qOYgRLHLiyAsyCD0qEglCEL8C-emP2BFGNAjyzUhOEyoSCU-hAm7l1sLJETpwOLO70lR8KhIJo8UOI-uxcFsR9GVdEZY1Ja8qEgmPHQROSRfhQBEw3VmmJuxJxioSCWIU8RYxS0RCETuyJiE-bnguKhIJIXqxToLM1woRBYCNwS0tSPkqEgmDo9AtEyQAcRG0d1-TyxvFDQ&hl=en&ved=2ahUKEwj3v-Lq4NnhAhUTrKQKHTtzBoAQ2p8EegQIARAD&biw=360&bih=560#imgrc=Wir8YPO1fxkr5M
2. Observe the first and 3rd image from “Related Images” section.

Expected Behavior:
Images are animated.

Actual Behavior:
Images are not animated.

This is hard to reproduce because we don't necessary get the same results depending on where we are but I might have been able to reproduce one difference. The image is animated but a bit erratic and faster in the transition.

<div class="GqKFGc" jsname="d2hrIe" jscontroller="jJA9vd" jsaction="rcuQ6b: npT2md;FikQUb: hF3emc;R3mad: ZCNXMe;" style="transform: scaleX(1.0018214936247722);">
  <video class="qeEPB" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRtlYLmjb6e_-g9nSf1TI7WO9Dp4af7TqOcGD2epb27RsDjCNPf" autoplay="" loop="" poster="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></video>
</div>

and all these images are in fact videos, not animated gif and when we link directly to one, it's working as expected. The loop attribute is set on each video with this script

    var UFa = function (a) {
      var b = _.vh('VIDEO', {
        className: 'qeEPB',
        src: a.ha,
        autoplay: 'true',
        muted: 'true',
        loop: 'true',
        playsInline: 'true',
        disableRemotePlayback: 'true'
      });
      RFa(a, b);
      w3(a, function () {
        a.W().R().appendChild(a.g)
      });
      w3(a, function () {
        return x3(a)
      })
    },

I wonder if this is a performance/timing issue in being able to control these videos at the same time.

Comment 1

[Daniel Holbert [:dholbert]]

(In reply to Karl Dubost💡 :karlcow from comment #0)

and all these images are in fact videos, not animated gif

The DOM for each of these "tiles" actually has both a static <img> and a <video> (with the img underneath) -- and for the tiles that look static, it seems that the problem is that the video never renders anything, so the static <img> is all you see.

For me, the images all have class=".rg_i", and if I add visibility:hidden to that class, then the 'frozen'-looking animations all disappear, because they weren't in fact animations -- they were just static images. The videos that are successfully playing are still there, and the empty tiles represent videos that are failing to render anything.

Comment 2

[Karl Dubost💡 :karlcow]

Ah thanks.
But I have also one video in my case, which is actually playing, but not playing like other videos. more like a flash glitch in between two states of the video. When I look at the video by itself, it behaves normally.
I'll try to do a screencast.

Comment 3

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 4

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.