www.ceskatelevize.cz - video or audio doesn't play

[webcompat-bot]

URL: http://www.ceskatelevize.cz/ivysilani/11599761360-v-pasti/217381481400009

Browser / Version: Firefox Mobile (Tablet) 60.0 Operating System: Android 6.0.1 Tested Another Browser: Yes

Problem type: Video or audio doesn't play Description: video nor ads load Steps to Reproduce:

From webcompat.com with ❤️

[softvision-oana-arbuzov]

I was able to reproduce the issues. On Firefox the video doesn't play with VPN active or without. Also reproducible for other videos. Note: In Chrome for the video to play, VPN should be active pointing to "Czech Republic", otherwise a message will be displayed ("We are sorry, this content is not available at your territory due to limited copyright").

Console:

ERROR    Streamin protocol mismatch
playlistItem.js:384:6
perf_trace {"name": "e2e", "parent": "PageEvents.BIGPIPE_ONLOAD"}
8tgsht98nEB.js:198:2789

E/GeckoConsole: [JavaScript Error: "Handler function threw an exception: [Exception... "Component returned failure code: 0x80520012 (NS_ERROR_FILE_NOT_FOUND) [nsIIOService.newChannelFromURI2]"  nsresult: "0x80520012 (NS_ERROR_FILE_NOT_FOUND)"  location: "JS frame :: resource://gre/modules/NetUtil.jsm :: NetUtil_newChannel :: line 361"  data: no]
                                               Stack: NetUtil_newChannel@resource://gre/modules/NetUtil.jsm:361:16
                                               this.requireRawId@resource://devtools/shared/loader-plugin-raw.jsm:27:16
                                               requireHook@resource://devtools/shared/Loader.jsm:68:18
                                               require@resource://devtools/shared/base-loader.js:439:14
                                               Require/require.context/<@resource://devtools/shared/base-loader.js:548:14
                                               getProperties@resource://devtools/shared/base-loader.js -> resource://devtools/shared/l10n.js:82:46
                                               getStr@resource://devtools/shared/base-loader.js -> resource://devtools/shared/l10n.js:106:22
                                               parseSecurityInfo@resource://devtools/shared/base-loader.js -> resource://devtools/shared/webconsole/network-helper.js:629:29
                                               NetworkResponseListener.prototype._getSecu

Tested with: Browser / Version: Firefox Nightly Mobile 60.0a1 (2018-02-15) Operating System: Google Pixel (Android 8.1.0) - Resolution 1080 x 1920 pixels (~441 ppi pixel density), Samsung Galaxy S7 Edge (Android 7.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

Moving to Needsdiagnosis for further investigation.

[karlcow]

If we fake the UA we get at least the poster image before the video. Not with the Firefox Android UA.

On chrome the format seems to be .m4s for ads using the shaka player. https://shaka-player-demo.appspot.com/docs/api/tutorial-welcome.html

https://github.com/google/shaka-player/

A list of issues with Firefox https://github.com/google/shaka-player/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+firefox

I see that @cpeterso discussed with them in the past.

[cpeterso]

If this looks like a Shaka Player issue with Firefox for Android, then @cpearce or @jyavenard can help. I'm not sure who is responsible for media playback on Android these days. The Shaka Player developers are responsive if we provide details about a bug and fix, but they are probably not going to debug on Firefox for Android, even with STR.

What happens if you fake a Firefox Android UA on desktop Firefox? Perhaps Firefox for Android is running into codec problems. That NS_ERROR_FILE_NOT_FOUND error is interesting, if related. I'm not able to test personally because I don't have Czech Republic VPN access.

[karlcow]

We get now a page not found message. Let's find another page https://www.ceskatelevize.cz/ivysilani/10995220806-most/216512120010003

On firefox desktop + rdm + firefox tablet UA. I get a ERROR Streamin protocol mismatch playlistItem.js:384:6

which is not accessible

HTTP/1.1 404 Not Found
Access-Control-Allow-Headers: origin, x-requested-with, content-type
Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 345
Content-Type: text/html
Date: Thu, 24 Jan 2019 03:01:05 GMT
Server: nginx

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>404 - Not Found</title>
 </head>
 <body>
  <h1>404 - Not Found</h1>
 </body>
</html>

I get the same behavior at the beginning in chrome but eventually the video is starting. (with a regional blocking message)

If I fake the UA to be nexus 7 on Firefox desktop + RDM I get the right behavior. So there is user agent sniffing involved.

The message comes from

  PlaylistItem.prototype.loadAndPlay = function(
    streamingProtocol,
    streamId,
    startTime
  ) {
    logger.info("Loading streamId", streamId);
    player_mgr.showLoadingScreen();
    $(player_mgr.video)
      .find("track")
      .remove();
    this.remainingProgressEvents = [];
    this.nonProgressEvents = {};
    var subtitleLoaders = [];
    this.subtitleLoaders = subtitleLoaders;
    if (this.isVast) {
      var url = this.vastUrl;
      var curItem = this;
      ajaxHelper.ajax(url, {
        xhrFields: { withCredentials: true },
        success: function(data) {},
        error: function(err) {
          logger.warn("Error loading vast response from ", url, "; skipping");
          player_mgr.playNextItem();
        }
      });
    } else {
      this.startSubtitleLoaders();
      var streamUrl = this.getStreamUrl(streamId);
      if (streamingProtocol == playerShell.playerType) {
        logger.info("loading stream " + streamId);
        var fallbackStreamId = this.getFallbackStreamId(streamId);
        var thisItem = this;
        var loadErrorHandler =
          fallbackStreamId == undefined
            ? undefined
            : function() {
                logger.warn(
                  "Error loading stream",
                  streamId,
                  "falling back to",
                  fallbackStreamId
                );
                playerShell.playStream(
                  thisItem.getStreamUrl(fallbackStreamId),
                  startTime
                );
              };
        playerShell.playStream(
          this.getStreamUrl(streamId),
          startTime,
          loadErrorHandler
        );
      } else logger.error("Streamin protocol mismatch");
    }
  };

[wisniewskit]

After comparing stack traces in two RDM tabs for an hour or two (one spoofing as Chrome, one as Fennec), I managed to eventually figure out that the site is setting up Shaka player with different streamingProtocol values, depending on the useragent string. It's actually a server-side sniff. This script does an AJAX request using this function:

var getPlaylistUrl = function(playlist, requestSource, type, addCommercials) {
    if (playlist.length && requestSource && type) {
        $.ajax({
            type: "POST",
            timeout: 4000,
            url: baseUrl + '/ajax/get-client-playlist/' + wwwServerGet,
            data: {
                playlist : playlist,
                requestUrl : window.location.pathname,
                requestSource : requestSource,
                streamQuality : getUrlVars()['kvalita'],
                addCommercials : addCommercials,
                type : type
            },
            success: function(returnMessage) {
                // zpet dostanu json s url a adCodes
                var obj = $.parseJSON(returnMessage);

                if (obj.url.indexOf('error_') != -1) {
                    errorHandler(obj.url, playlist, requestSource, type);
                }
                else {
                    if (type == 'flash') {
                        flashvars.playlistURL = obj.url.replace(/&/g, '%26');
                    } else {
                        settings.playlistURL = obj.url;
                        settings.audioControlHidden = obj.audioControlHidden;
                        settings.editMode = obj.editMode;
                        settings.mobilePlayer = obj.mobilePlayer;
                        settings.streamingProtocol = obj.streamingProtocol;
                        settings.useNativeVideoPlayer = obj.useNativeVideoPlayer;
                    }

                    insertPlayer();
                }
            },

The response from the get-client-playlist request varies what it returns for streamingProtocol depending on the User-Agent it sees in the request headers, returning DASH for Chrome, HLS for iOS, or FLASH for Fennec. Of course, Fennec has no Flash, so playback simply breaks.

But if I spoof just the requests to that specific endpoint (https://www.ceskatelevize.cz/ivysilani/ajax/get-client-playlist/) so it thinks we're Chrome, it tells Shaka to use DASH, and things seem to work fine (at least, I got the ads to play, and then got a "sorry, this video is unavailable in your region" screen). Of course we could also spoof as Mobile Safari to get HLS, if that provides the better experience on Android.

Or of course, we can contact the site to improve their server-side sniffing at that endpoint, so it serves HLS or DASH to Firefox browsers on Android.

[ksy36]

Created https://bugzilla.mozilla.org/show_bug.cgi?id=1574564

[ksy36]

Mike reached out on Linkedin

[softvision-oana-arbuzov]

The issue is still reproducible on my side. Since the URL is outdated I've check with a different video and it is not playing. URL: https://www.ceskatelevize.cz/ivysilani/12384531855-velikansky-medved/21938460647/

Tested with: Browser / Version: Firefox Nightly 68.0a1 (2019-08-26) Operating System: Samsung Galaxy Tab S3 (Android 8) - 1536 x 2048 pixels, 4:3 ratio (~264 ppi pixel density) VPN active pointing to Czech Republic

[softvision-sergiulogigan]

For some reason, the UA Override in place, no longer fixes the issue. I am still getting an infinite spinner on Firefox Fenix, Beta and Release Mobile.

@karlcow can we revisit this and maybe tweak the override?

[ksy36]

I'll revisit the intervention in https://bugzilla.mozilla.org/show_bug.cgi?id=1702009

[ksy36]

The original link no longer contains a video, so I've tested a couple links in the recent Firefox on Android Nightly and release and the videos load for me:

https://www.ceskatelevize.cz/ivysilani/12606228599-hitlerjugend/220382567150001-nacisticka-detska-armada/ https://www.ceskatelevize.cz/porady/10393496397-udalosti-za-okamzik-a-pocasi/221411000440105/ https://edu.ceskatelevize.cz/video/2700-pristani-curiosity-na-marsu https://ct24.ceskatelevize.cz/domaci/3297045-komuniste-pozaduji-jednani-s-ano-podle-filipa-hrozi-konec-vladni-tolerance

If I disable the intervention, the video no longer works and the original problem is present. @softvision-oana-arbuzov could you please check one of the videos to see if the intervention working for you?

[softvision-oana-arbuzov]

@ksy36 this is strange, I still can't play the videos. I've checked also with ETP - Strict/Standard and disabled and with a clean profile.

Console:

Tested with: Browser / Version: Firefox Nightly 210414 (🦎 89.0a1-20210412092813), Firefox Release 87.0.0-rc.1 (🦎 87.0-20210315170302) Operating System: Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density) VPN pointing to Czech Republic.

@softvision-raul-bucata does it work for you?

[softvision-raul-bucata]

@softvision-oana-arbuzov I was able to reproduce the issue in the same manner, regardless of the status of ETP:

Tested with: Browser / Version: Firefox Nightly 91.0a1 (201581421)-🦎91.0a1-20210603094827🦎) Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density)

Notes:

1. Reproducible regardless of the status of ETP
2. Reproducible on the latest build of Firefox Nightly
3. VPN set to the Czech Republic

[softvision-oana-arbuzov]

@ksy36 any news on this? We can't still play videos with or without UA Override on any of the above links: https://www.ceskatelevize.cz/porady/10393496397-udalosti-za-okamzik-a-pocasi/221411000440105/ https://edu.ceskatelevize.cz/video/2700-pristani-curiosity-na-marsu https://ct24.ceskatelevize.cz/domaci/3297045-komuniste-pozaduji-jednani-s-ano-podle-filipa-hrozi-konec-vladni-tolerance

Console:

Tested with: Browser / Version: Firefox Nightly 104.0a1 (🦎 104.0a1-20220705095904) Operating System: Google Pixel 5 (Android 12) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density), Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

[inv_27/2022]

[ksy36]

It doesn't load for me now as well, filed https://bugzilla.mozilla.org/show_bug.cgi?id=1778500.

[sv-calin]

The video can be played regardless of the interventions status. Task: https://bugzilla.mozilla.org/show_bug.cgi?id=1888397

Environment: Operating system: OnePlus 6 A6000 (Android 11) Firefox version: Nightly 126.0a1-20240327214448

Based on the above, the interventions can be removed.

[inv_13/2024]

[wisniewskit]

This should be fixed now.