Web-bugs: www.formula1.com - video doesn't play

[bull500]

URL: http://www.formula1.com/content/fom-website/en/video/2016/5/Mercedes_mayhem__analysing_Hamilton_and_Rosberg's_Turn_4_clash.html
Browser / Version: Firefox Mobile 49.0
Operating System: Android 6.0
Problem type: Video doesn't play

Steps to Reproduce
1) Navigate to: http://www.formula1.com/content/fom-website/en/video/2016/5/Mercedes_mayhem__analysing_Hamilton_and_Rosberg's_Turn_4_clash.html
2) Play video

Expected Behavior:
Video should play

Actual Behavior:
Video is not encoded for your device

_From webcompat.com with ❤️_

[karlcow]

So first of all. I could watch the video on MacOSX faking the Firefox Android UA.
But indeed I can't when using Firefox Android device, so there is a subtle difference.

<div class="innerWrapper">
    <div class="oo_error" style="display:none">
        <div class="oo_error_image"></div>
        <div class="oo_error_message">
            <h1 class="oo_error_message_text"></h1></div>
    </div>
    <div class="plugins" style=""></div>
    <video class="video" preload="none" src="http://f1.pc.cdn.bitgravity.com/Jpb2dqMzE6eZ7u-rf6CtkkeVw-tGjqj_/DOcJ-FxaFrRg4gtDEwOjIwbTowODE7WK" style="left: 0px;"></video>
    <video class="midroll" preload="none" style="left: -100000px;"></video>
</div>

There is probably a dependency on the android platform.

[20] AAC is only supported in the MP4 container. To avoid patent issues, support for MPEG 4 and AAC is not built directly into Firefox Mobile (Android). Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4).

When the page is first initialized.

<section class="video-section">
    <div style="width: 100%; height: 203px;" data-videoid="Jpb2dqMzE6eZ7u-rf6CtkkeVw-tGjqj_" data-path="/content/fom-website/en/video/2016/5/Mercedes_mayhem__analysing_Hamilton_and_Rosberg%27s_Turn_4_clash/_jcr_content/ooyala_video" data-autoplay="false" class="video-player js-init">
        <div style="display: block;" class="video-preview">
            <a href="#" style="background-image: url(/content/dam/fom-website/ooyala-videos/2016/5/Jpb2dqMzE6eZ7u-rf6CtkkeVw-tGjqj_.img.jpg)"><span class="vertical"></span><span class="icon-play-large"><span>Play</span></span></a>
        </div>

    <!-- cut for clarity -->

</section>

we can notice the video is coming from ooyala. And ooyala is sending m3u8

http://player.ooyala.com/player/all/Jpb2dqMzE6eZ7u-rf6CtkkeVw-tGjqj_.m3u8?targetBitrate=2000&secure_ios_token=czV0MEo2d01rdHRxR0Y2N0F6RjJPNmR1M3pHTzRQaGw3cTl3ZHlBb3NlbWp0UWV4eUd4aFRNK2hHV010CkxOS213VU1ySzRNQWlXcUh1Qm5BcXdzajBBPT0K

There's sniffing in the OOyala video player

            }(), e.supportedVideoTypes = function() {
                if (!e.tweaks["html5-force-mp4"]) {
                    if (!e.isWinPhone) {
                        if (window.navigator.userAgent.match(/SonyCEBrowser/)) return {
                            m3u8: !0
                        };
                        if (!e.isAndroid) {
                            if (e.isSmartTV) return {
                                mp4: !0
                            };
                            if (e.isChromecast) return {
                                smooth: !0,
                                m3u8: !0,
                                mp4: !0
                            };
                            var t = document.createElement("video");
                            return typeof t.canPlayType != "function" ? {} : {
                                m3u8: (!!t.canPlayType("application/vnd.apple.mpegurl") || !!t.canPlayType("application/x-mpegURL")) && !e.isRimDevice && (!e.isMacOs || e.isMacOsLionOrLater),
                                mp4: !!t.canPlayType("video/mp4"),
                                webm: !!t.canPlayType("video/webm")
                            }
                        }
                        return e.tweaks["android-enable-hls"] && e.isAndroid4Plus ? {
                            m3u8: !0,
                            mp4: !0
                        } : {
                            mp4: !0
                        }
                    }
                    return {
                        mp4: !0
                    }
                }
                return {
                    mp4: !0
                }

[karlcow]

I'm pretty sure we had something about ooyala already somewhere.
Ah! this comment https://bugzilla.mozilla.org/show_bug.cgi?id=941351#c27

Maybe I'll leave to @hallvors to see if something could be done in Ooyala player.

[karlcow]

Or maybe @hallvors has already worked on that and I missed it.
Anyway. NeedsDiagnosis and THANKS @bull500

[hallvors]

Note this line:

      return e.tweaks["android-enable-hls"] && e.isAndroid4Plus ? {

If android-enable-hls is enabled, this is a known issue with Ooyala. First found on The Verge - see #2480. @bull500 - could you check if you find another mention of android-enable-hls anywhere in the source code? If it gets set to true in the code that initialises the Ooyala player we know what the problem is..

[bull500]

@hallvors im quite hopeless at reading and understanding this
But yeah i found multiple entries with "android-enable-hls" on "view-source:http://player.ooyala.com/v3/90c1c7c50a2a4ffda5ebbfbe9bc11ff6?platform=html5-fallback&tweaks=android-enable-hls"

Don't even know if this is right
I found it via the developer tools under a script tag.

[hallvors]

@bull500 thanks for looking :+1: It's actually there in the URL itself: tweaks=android-enable-hls switches the Ooyala script into "assume anything running on Android supports HLS" mode. So yes, consider it confirmed that it is the same issue.

[hallvors]

This is a somewhat tricky issue to do outreach for. I'm not sure myself what the best advice is. For sites, it's "don't use android-enable-hls" (but then, what about those Android browsers that presumably work better when this is enabled?). We can contact Ooyala and suggest they detect Firefox's lack of HLS-support better (are we already reaching out to them?).

[bull500]

@hallvors cant they just cycle through video format support?
Like check if device can play webM else check if it can play mp4 etc.
These two come as standard i believe on most android devices.

[hallvors]

@bull500 yes, that is the Correct and Best approach. I don't know the full details, but the fact we're seeing these hacks in various libraries leads me to assume that they were added as workarounds for certain browsers that have bugs causing them to not report supported formats correctly :( I'm basically guessing but it's a pretty confident guess.

[karlcow]

    OO.playerParams = {
      'analytics_server': 'http://player.ooyala.com',
      'analytics_ssl_server': 'https://player.ooyala.com',
      'api_server': 'http://player.ooyala.com',
      'api_ssl_server': 'https://player.ooyala.com',
      'attributes': {
      },
      'auth_server': 'http://player.ooyala.com/sas',
      'auth_ssl_server': 'https://player.ooyala.com/sas',
      'backlot_api_server': 'cdn-api.ooyala.com',
      'branding': {
        'accent_color': 16759552,
        'text_color': 16777215
      },
      'canary': false,
      'core_version': 3,
      'debug': false,
      'environment': 'production',
      'flash_performance': false,
      'hastur_qos_percentage': 0,
      'module_params': {
        'base': {
        },
        'modules': {
        }
      },
      'pcode': 'tudTgyOkO_Oa2kec6fNFnApvZ8ig',
      'platform': 'html5-fallback',
      'playerBrandingId': '90c1c7c50a2a4ffda5ebbfbe9bc11ff6',
      'request_url': 'http://player.ooyala.com/v3/90c1c7c50a2a4ffda5ebbfbe9bc11ff6?platform=html5-fallback&tweaks=android-enable-hls',
      'tweaks': 'android-enable-hls',
      'use_asp_flash_route': false,
      'v3_version': 'eb0c571b5a6a22c9eec7b480c8ab44594d34d397',
      'v3_version_source': 'default',
      'vast_proxy_url': 'http://player.ooyala.com/adinsertion/vast_proxy'
    };

Maybe we can help ooyala to have a better detection.

@hallvord, @miketaylr I don't remember we ever tried to contact them.
Or I have forgotten.

[karlcow]

@hallvors I meant

[karlcow]

@ooyala is on Github.

And probably someone like @mityaha could help contacting the right person.

[mityaha]

Ooyala v3 player doesn't support HLS and Ooyala doesn't support Android Firefox, you may want to look at v4 player http://goo.gl/fuIB5Z http://support.ooyala.com/developers/documentation/concepts/pbv4_about.html

[miketaylr]

Ooyala v3 player doesn't support HLS and Ooyala doesn't support Android Firefox, you may want to look at v4 player http://goo.gl/fuIB5Z http://support.ooyala.com/developers/documentation/concepts/pbv4_about.html

Thanks @mityaha. I see the test page at http://goo.gl/fuIB5Z works nicely in Firefox for Android.

@karlcow I suppose the strategy can be to ask people to upgrade to the v4 player then.

[karlcow]

Thanks everyone. Back on trying to find someone at formula1 Web site and/or the Web agency which made it.

[karlcow]

For data queries or technical assistance, email [email protected]
— http://www.formula1.com/content/fom-website/en/toolbar/contacts.html

[karlcow]

Email sent to [email protected]

[karlcow]

This has evolved a bit in a strange way. I'm putting it back in needsdiagnosis.

1. Load the page
2. Tap the play button
3. the audio starts, but not the video
4. Then something is crashing
5. Reload the page, there is an opacity on it (overlay on top)
6. We can't do any actions in the viewport.

[karlcow]

this is working now.