1178479 - youtube - video quality / resolution on Firefox OS

Status: RESOLVED WORKSFORME

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

Description

[[:josephine]]

I find the video a bit blurry and not crisp in comparison to playing the same video on iphone, but this is probably a hardware issue.

Comment 1

[Andre Klapper]

(In reply to jtanumijaya from comment #0)
> I find the video a bit blurry

Which video exactly? Any testcase?

Comment 2

[[:josephine]]

Just any vevo music video. I can see the different between what I see in iOS and the FxOS phone.

Also, I was using the youtube app for both.

Comment 3

[Doug Sherk (:drs) (inactive)]

Probably the lack of EME on FxOS.

Comment 4

[Mike Taylor [:miketaylr]]

Is it only noticeable for Vevo music videos? Other Youtube vids are OK? (Sorry, don't have access to my foxfood device today).

Comment 5

[Bobby Chien]

Please help attach youtube link if possible. So that we can follow up this.

Comment 6

[[:josephine]]

As requested, https://www.youtube.com/watch?v=QcIy9NiNbmo or non vevo site: https://www.youtube.com/watch?v=U6DHEkpd4Aw

I played both side by side (with iphone and sony) and I can see the difference very clearly. Iphone video quality is very crisp.

On another point, which I may have to create a new bug for: when watching the video and I changed my phone to landscape view, it doesn't automatically set to full screen until I click on the icon. And when I clicked on the icon, it prompted me if I want to allow this. I think these 2 steps: 1. to click on set to full screen and 2. to allow full screen are not necessary. If we could remove these steps, I think it would make is more friendly to use.

Comment 7

[Hema Koka [:hema]]

Not a fxos video app issue...moving to tech evangelism to triage and follow up on youtube issue

Comment 8

[Karl Dubost💡 :karlcow]

josephine, we need a bit more details

About this video and your device.
https://www.youtube.com/watch?v=QcIy9NiNbmo

What is the iPhone model you played with?
What is the firefox os device you have used? (screen resolution)

What is the User Agent string?
http://echo.opera.com/ will give you the information. 

Thanks!

Comment 9

[[:josephine]]

(In reply to Karl Dubost :karlcow from comment #8)
> josephine, we need a bit more details
> 
> About this video and your device.
> https://www.youtube.com/watch?v=QcIy9NiNbmo
> 
> What is the iPhone model you played with?
> What is the firefox os device you have used? (screen resolution)
> 
Iphone 6 and Sony Z3C.
I'm not sure about the screen resolution on Z3C. I opened the YouTube app. Does that help?

> What is the User Agent string?
> http://echo.opera.com/ will give you the information. 

From iphone 6:
Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) FxiOS/1.2 Mobile/13B143 Safari/601.1.46

Comment 10

[Karl Dubost💡 :karlcow]

josephine,

> I'm not sure about the screen resolution on Z3C. I opened the YouTube app. Does that help?

You used a youtube app on Firefox OS?
Not the Web site.

It's probably the case that YouTube is sending different version of the same video to different devices. 


On Firefox OS, the relevant page is:
https://m.youtube.com/watch?v=QcIy9NiNbmo

We get this markup first.

<div style="top: 46px; height: 180px; width: 360px;" class="_mcd" id="player">
    <div id="koya_child_30" class="koya-komponent-binding">
        <div class="_mnp" id="koya_elem_30_0">
            <div data-version="undefined" tabindex="-1" class="_mdd el-detailpage _mcib _meib _mdib _mccc _mgjb cued-mode">
                <div class="_miib">
                    <video controls="true" class="_mpub _mhib" style="width: 360px; height: 180px; left: 0px; top: -180px; transform: none;"></video>
                    <div style="width: 320px; height: 180px; left: 20px; top: 0px;" class="_mjib"></div>
                    <canvas class="_mnib _mpjb _mrjb" aria-hidden="true" style="display: none; transform: scale(0.5);" height="60" width="60"></canvas>
                    <div style="background-image: url(&quot;https://i.ytimg.com/vi/QcIy9NiNbmo/hqdefault.jpg&quot;);" class="_muac _mzhb">
                        <div style="transform: scale(0.5);" tabindex="5500" aria-label="Play" role="button" class="_mmxb _mpjb _mqjb _mpxb"></div>
                    </div>
                </div>
                <div class="_mbcc"></div>
                <div aria-hidden="true" style="display: none;" class="_mxvb"></div>
            </div>
        </div>
    </div>
</div>


Once the video starts we get 

<div style="top: 46px; height: 180px; width: 360px;" class="_mcd" id="player">
    <div id="koya_child_30" class="koya-komponent-binding">
        <div class="_mnp" id="koya_elem_30_0">
            <div data-version="undefined" tabindex="-1" class="_mdd el-detailpage _mcib _meib _mdib _mgjb playing-mode">
                <div class="_miib">
                    <video src="mediasource:https://m.youtube.com/e9c928a6-1178-984c-8992-fe0996d144b8" controls="true" class="_mpub _mhib" style="width: 360px; height: 180px; left: 0px; top: 0px; transform: none;"></video>
                    <div style="width: 320px; height: 180px; left: 20px; top: 0px;" class="_mjib"></div>
                    <canvas aria-hidden="true" class="_mnib _mpjb _mrjb" style="display: none; transform: scale(0.5);" height="60" width="60"></canvas>
                    <div style="background-image: url(&quot;https://i.ytimg.com/vi/QcIy9NiNbmo/hqdefault.jpg&quot;);" class="_muac _mzhb">
                        <div style="transform: scale(0.5);" tabindex="5500" aria-label="Play" role="button" class="_mmxb _mpjb _mqjb _mpxb"></div>
                    </div>
                </div>
                <div class="_mbcc"></div>
                <div aria-hidden="true" style="display: none;" class="_mxvb"></div>
            </div>
        </div>
    </div>
</div>

note the mediasource

                    <video src="mediasource:https://m.youtube.com/e9c928a6-1178-984c-8992-fe0996d144b8" controls="true" class="_mpub _mhib" style="width: 360px; height: 180px; left: 0px; top: 0px; transform: none;"></video>


When we access with an iphone, the media format is different. If it can't open the Youtube app on the iphone it will send something which is probably m3u8.


Here by faking iphone UA on Gecko (but will not trigger the exact same results).

<video src="https://r6---sn-uxjoxu-ioql.googlevideo.com/videoplayback?upn=YNlinkTvdaE&amp;itag=18&amp;mime=video%2Fmp4&amp;dur=244.924&amp;fexp=9408710%2C9413468%2C9415866%2C9417683%2C9418401%2C9420452%2C9421002%2C9421084%2C9421502%2C9422596%2C9422618%2C9422947%2C9423957%2C9424084%2C9424964&amp;sver=3&amp;ipbits=0&amp;requiressl=yes&amp;sparams=dur%2Cid%2Cinitcwndbps%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cupn%2Cusequic%2Cexpire&amp;expire=1449042278&amp;lmt=1432153196555981&amp;key=yt6&amp;initcwndbps=2043750&amp;id=o-ALwELJGMyz_08_B9hMd9fsMDj5lPXkHsMqVvv_7A7AK9&amp;ms=au&amp;mt=1449020569&amp;mv=m&amp;pl=16&amp;usequic=no&amp;ratebypass=yes&amp;ip=42.145.210.69&amp;source=youtube&amp;mm=31&amp;mn=sn-uxjoxu-ioql&amp;cpn=MICji4dFSq3-iIpk&amp;signature=A986CBBE817E405A0BC4E9D1AA5E64F069E70B52.12CADB14C1385D296153D49FBB19D96EC83933DC&amp;ptk=vevo&amp;oid=yZJtHRi2SvzOOKZfbA-GRA&amp;ptchn=ANLZYMidaCbLQFWXBC95Jg&amp;pltype=content&amp;c=MWEB&amp;cver=html5" title="Taylor Swift - Bad Blood ft. Kendrick Lamar" x-webkit-airplay="allow" controls="true" class="_mpub _mhib" style="width: 320px; height: 180px; left: 20px; top: 0px; transform: none;"></video>


Not sure we can do anything here. Maybe Hallvord has an idea up his sleeves.

Comment 11

[Hallvord R. M. Steen [:hallvors]]

I looked at one of these videos (just loading the link, no app) on the Sony foxfooding phone and an iPhone 4S, and didn't notice any striking quality difference. No suggestions either.

Comment 12

[Karl Dubost💡 :karlcow]

Yes and Josephine seems to have used the Youtube app (on iphone?), and not the browser for comparing. I would close this as worksforme or INVALID.