1323684 - Video plays only sound, no video on Firefox mobile Nightly

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: Audio/Video, defect, P1)

Description

[Eric Tsai (no more review request accepted)]

Steps to reproduce:

1. http://kissanime.io/Anime/naruto-shippuuden-dub/watch.html?episode_id=79833
2. Scroll down to video
3. Click play button

Expected result: video plays with both visual and audio
Actual result: only audio, no visual

Comment 1

[Blake Wu [:bwu][:blakewu]]

I can repro this bug on my latest nightly and Firefox 50 with Android 7.1.1 and Chrome can work well on my Pixel XL.
James, 
Can you help check it?

Comment 2

[James Cheng[:JamesCheng]]

I can repro it on the release version of Fennec, so it seems not a regression.

I will start to investigate for more detailed information.

Comment 3

[James Cheng[:JamesCheng]]

If you change the orientation into landscape mode. You can see the video rendered but in the wrong position.

The video is rendered out of the viewport, so we cannot see the video and thought only sound.

I think it is something related to the layout issue, maybe some misused of CSS properties or something not compatible with mobile.

I would recommend to find layout team involving.

Hi Eric, 

Could you please ni or loop Fennec layout related people to see if they have any thought?

Thanks

Comment 4

[Blake Wu [:bwu][:blakewu]]

Astley, 
Can you shed some light on this?

Comment 5

[Astley Chen (inactive)]

Attachment: tranform-mis-translate.jpg

Is it an reproducible on every android devices ?

Using Responsive Design Mode to simulate particular device mode to reproduce, I've found that it's not an 100% reproducible issue but only appeared when I changed simulation device to 'Nokia Lumia 520' which resolution is 320x533.
Whenever this issue appeared, from snapshot, you can see that the <video> element was styled with a transform property and value is 'translate(-321px, -181px) scale(0.46, 0.46)'. I think it's the main problem that caused the layout wrong.
It's still not clear to me how this property is applied in which particular condition.

Comment 6

[Eric Tsai (no more review request accepted)]

For me it can be reproduces on android 6 devices, nexus 5 and sony Z3. android 5.1.1 device Z3C.

Comment 7

[Astley Chen (inactive)]

Using Google Chrome device simulation with same configuration(Nokia Lumia 520), I can reproduce the same problem. Video was not appeared but only audio.

Interesting, if android Chrome works fine, I'll take a look using my Z3C to debug further.

Comment 8

[Astley Chen (inactive)]

Leave ni?

Comment 9

[Eric Tsai (no more review request accepted)]

Chrome mobile on Z3c works good, video in correct position.

Comment 10

[Astley Chen (inactive)]

Yep, easily reproducible on my Z3C.
Same as findings in comment 5, video element was styled with below inline styles: 
transform: translate(-641px, -361px) scale(0.27, 0.27);
width: 1280px;
height: 720px;
left: 50%;
top: 50%;
margin: 0px;

If we removed these properties, video element will be laid out correctly.
It's pretty clear to me how to continue the investigation.

Before looking further the scripts of website, does Fennec have any particular optimization to video control ? Especially layout specific ?

Comment 11

[Astley Chen (inactive)]

From WebIDE, inline styles were added to video element at formatted jwplayer.js:2172, transform prop is added at line 2170.
jwplayer will test the expression (var s = m || j || b || E) in if statement and turns out the only difference between Fennec and Chrome is variable j, which result comes from j = t.isAndroidNative() at jwplayer.js:2231.
On Fennec, var j is true. This is why additional props were added to video element.

Looking further into the method isAndroidNative, it will parse UA string to determine whether UA is running on Android or not.
The expected result should be true for all mobile browsers running on Android, however, Chrome for Android is mistakenly parsed and return false. This is why Chrome for Android works but Fennec didn't.

By replacing Fennec UA string with Chrome's, Fennec could lay out video element correctly as well.

As a result, the issue needs either site developer or jwplayer owner to figure out why the layout applied to video element is wrong. Why Chrome is excluded from the test, is it intentional ? why ?

Comment 12

[Kevin Brosnan [Ex-Mozilla]]

Do we have any JWplayer contacts? See comments 10 & 11

Comment 13

[Astley Chen (inactive)]

Update more test results here.
OK - Chrome for Android and Dolphin browser work fine.
NG - Firefox, native android browser, and UC browser have same issue.

Looks like it's not Firefox specific issue.

Comment 14

[Mike Taylor [:miketaylr]]

Thanks for the diagnosis (Comment #11) Astley! Let's close this issue and pursue outreach in https://webcompat.com/issues/3971.

(Going to awkwardly close as INVALID, because there's no "GO LOOK OVER THERE --->" resolution).

Comment 15

[Marco Castelluccio [:marco]]

I'm marking this as fixed as https://webcompat.com/issues/3971 was fixed, to avoid confusion.