g1.globo.com - video doesn't play

[webcompat-bot]

URL: http://g1.globo.com/videos/t/g1-em-1-minuto/v/g1-em-1-minuto-temer-pede-a-ministros-inventario-para-apontar-problemas-da-gestao-dilma/5022676/
Browser / Version: Firefox Mobile 49.0
Operating System: Android 4.4.4
Problem type: Video doesn't play

Steps to Reproduce

1. Navigate to: http://g1.globo.com/videos/t/g1-em-1-minuto/v/g1-em-1-minuto-temer-pede-a-ministros-inventario-para-apontar-problemas-da-gestao-dilma/5022676/
2. …video not work

Expected Behavior: video work

Actual Behavior: video not supported

Please contact Brazilian globo developers

From webcompat.com with ❤️

[karlcow]

On Gecko Firefox Desktop, this is the markup received:

<div data-id-playback="" style="height: 100%;" id="c14">
    <video data-html5-video="" src="https://s.glbimg.com/vi/p3/black.mp4" preload="metadata">
        <source src="https://s.glbimg.com/vi/p3/black.mp4" type="video/mp4">
        <style class="clappr-style">
        [data-html5-video] {
            position: absolute;
            height: 100%;
            width: 100%;
            display: block
        }
        </style>
    </video>
</div>

On Gecko Firefox Android Mobile

<div class="player-error" data-player-error="" style="background-image: url(&quot;https://s02.video.glbimg.com/x240/5022676.jpg&quot;);">
    <div class="wp3-error-background-overlay" data-poster-error=""></div>
    <div data-player-error="" class="content">
        <span data-player-error="" class="icon default-error"></span>
        <p data-player-error="" class="player-error title">Não foi possível exibir o vídeo.</p>
        <p data-player-error="" class="player-error description hide">Ocorreu um problema ao tentar carregar o vídeo. <a data-player-error="" href="" onclick="window.location.reload(); return false;">Atualize</a> a sua página para tentar novamente.</p>
    </div>
    <style class="clappr-style">

    // cutting style

    </style>
</div>

So this purely based on User Agent Sniffing and nothing else.

The video is triggered by http://s.videos.globo.com/p2/j/api.min.js

We can find:

i.isHtml5VideoSupported = function () {
return !i.isIE() && !i.isDesktopFirefox() && i.canPlayType('mp4')
},

They have a library of patterns:

f.IPHONE_PATTERN = /iPhone/i,
f.IPOD_PATTERN = /iPod/i,
f.IPAD_PATTERN = /iPad/i,
f.ANDROID_PATTERN = /Android/i,
f.DEVICE_PATTERN = /Android|iPhone|iPad|iPod|Windows Phone/i,
f.WINDOWS_PHONE_PATTERN = /MSIE.*Phone|IEMobile/i,
f.GOOGLEBOT_PATTERN = /Googlebot/i,
f.GOOGLE_WEB_PREVIEW_PATTERN = /Google Web Preview/i,

Then

i.isMobile = function () {
return i.isAndroid() || i.isIPhone() || i.isIPad() || i.isWindowsPhone()
},

and

i.isAndroid = function () {
return f.ANDROID_PATTERN.test(i.getUserAgent())
},

and

i.isFirefox = function () {
return i.getUserAgent().match(/Firefox/)
},
i.isDesktopFirefox = function () {
return i.isFirefox() && !i.isAndroid()
},

So we should be good on this side:

Maybe later on, the console displays:

12:38:30.096 HTTP “Content-Type” of “application/vnd.apple.mpegurl” is not supported. Load of media resource https://vodstreaming03.video.globo.com/r90_720/v0/0f/f7/ff/5022676_ff91a7da99579d12cd40373405387cdc5c2f03d1/5022676-manifest.ism/5022676.m3u8?h=050214633700285497295774146337362854168903141YXZEVG_s70sT1Gbhu4RKLg&k=html5 failed.5022676
12:38:30.113 [error][player encountered an error:] undefinedplayer.min.js:9:17337
12:38:30.189 Invalid URI. Load of media resource  failed.

In http://s.videos.globo.com/p3/stable/player.min.js there are multiple layers of sniffing and not exactly the same.

            n.isSafari = /safari/i.test(navigator.userAgent) && -1 === navigator.userAgent.indexOf("Chrome"), 
            n.isChrome = /chrome/i.test(navigator.userAgent), 
            n.isFirefox = /firefox/i.test(navigator.userAgent), 
            n.isLegacyIE = !!window.ActiveXObject, n.isIE = n.isLegacyIE || /trident.*rv:1\d/i.test(navigator.userAgent), 
            n.isIE11 = /trident.*rv:11/i.test(navigator.userAgent), 
            n.isChromecast = n.isChrome && /CrKey/i.test(navigator.userAgent), 
            n.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone|IEMobile|Opera Mini/i.test(navigator.userAgent), 
            n.isiOS = /iPad|iPhone|iPod/i.test(navigator.userAgent), 
            n.isAndroid = /Android/i.test(navigator.userAgent), 
            n.isWindowsPhone = /Windows Phone/i.test(navigator.userAgent), 
            n.isWin8App = /MSAppHost/i.test(navigator.userAgent), 
            n.isWiiU = /WiiU/i.test(navigator.userAgent), 
            n.isPS4 = /PlayStation 4/i.test(navigator.userAgent), 
            n.hasLocalstorage = r(), 
            n.hasFlash = i(), 
            n.name = a.name, 
            n.version = a.version, 
            t["default"] = n, e.exports = t["default"]
        },

and

            t["default"] = S, S.canPlay = function(e, t) {
                var n = e.split("?")[0].match(/.*\.(.*)$/) || [];
                return m["default"].hasFlash && (n.length > 1 && "m3u8" === n[1] || "application/x-mpegURL" === t || "application/vnd.apple.mpegurl" === t)

also

                }, t.prototype.typeFor = function(e) {
                    var t = e.split("?")[0].match(/.*\.(.*)$/) || [],
                        n = t.length > 1 && "m3u8" === t[1];
                    return n ? "application/vnd.apple.mpegurl" : "video/mp4"

I didn't dive yet where exactly the split is.

ping @hallvord

[karlcow]

And probably duplicate of #2164

[hallvors]

The HTML5 VIDEO element was designed to reference several video files and let the browser select the one it's able to play. This JavaScript works very hard to avoid making use of this built-in functionality:

p._getResource = function(a) {
        var b = {};
        if (i.isIPhone() || i.isIPad() || i.isAndroid() || i.isWindowsPhone() || !i.hasFlashInstalled() && i.isHtml5VideoSupported()) {
            i.isAndroid() && (b = p._findResource(a, "android"));
            if (i.isWindowsPhone()) {
                b = p._findResource(a, "windows_phone"), b.url || (b = p._findResource(a, "flash"));
                if (/\.m3u8|\.f4m/.test(b.url)) return {}
            }
            b.url || (b = p._findResource(a, "html5"))
        } else b = p._findResource(a, "flash");
        return b
    }

[hallvors]

The data looks like this - targeting resources to a list of specific "players" (this is just an extract, there's lots more metadata):

 { "duration":64482,
"players":["desktop","desktop_limited"],
"height":480,
"url":"https://voddownload01.video.globo.com/v0/0f/f7/ff/5022676_ff91a7da99579d12cd40373405387cdc5c2f03d1/5022676-web480.mp4"}

[adamopenweb]

@globocom is on Github. I wonder if @ggarnier can help us find a contact for these video issues?

[towerz]

@adamopenweb I just analyzed the information people have added here. Actually, the problem is related to Firefox on Android not supporting HLS (https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Live_streaming_web_audio_and_video#Streaming_File_Format_Support), unlike other browsers running on Android 4+.

Thanks to all who helped investigating this issue. We are already working on a fix to avoid loading unsupported URLs on Firefox for Android. I'll keep you posted as soon as we have a fix online.

[towerz]

We deployed a fix for this issue earlier today. It should work correctly now.

Thanks again for reporting.

[hallvors]

Great, confirmed fixed. Thanks @towerz !!