1414792 - cannot play video on bilibili.com

Status: RESOLVED WORKSFORME

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

Description

[Lu Wei]

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:52.0) Gecko/20100101 Firefox/52.0
Build ID: 20170921064520

Steps to reproduce:

open http://www.bilibili.com/video/av4255707


Actual results:

the player box (the jittering TV icon)  can not succeed in loading, while android browser can play it.


Expected results:

it should play without problem

Comment 1

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

The video stream is media source.

Comment 2

[John Lin [:jhlin][:jolin]]

I got 'unknown protocol' error when loading the mobile page (http://m.bilibili.com/video/av4255707.html):

  about:neterror?e=unknownProtocolFound&u=bilibili://video/...

Chrome, while played the video just fine, gave similar error(?) log:

  chromium: [INFO:CONSOLE(0)] "Navigation is unreachable: bilibili://video/...

Eric, have you met problem like this before? Is it something web site can help to fix?

Comment 3

[Eric Tsai (no more review request accepted)]

I don't see this before, but if you install bilibili app on android, it will open the app.

Comment 4

[John Lin [:jhlin][:jolin]]

(In reply to Eric Tsai from comment #3)
> I don't see this before, but if you install bilibili app on android, it will
> open the app.

Guess that's what the 'bilibili://' is for.

It seems Chrome recovers from the no protocol handler/app missing situation but FF cannot. Move this to General for it is not audio/video related.

James, do you by any chance know who might help on this?

Comment 5

[James Willcox (:snorp) ([e-mail]) (he/him)]

Dylan can see what's going on there? We've had several problems related to this type of thing recently.

Comment 6

[Dylan Roeh (:droeh) (he/him)]

This isn't a problem with our URI handling; it redirects us to a bilibili: URI, and we show an about:neterror page because we don't have any handlers for that. If we do have a handler it works correctly (launches the app).

This seems more like a webcompat issue as far as I can tell; on Chrome it doesn't have any problems because it doesn't redirect in the first place.

Comment 7

[Lu Wei]

So it's a problem with error handling. The web page has an error, and the handling of errors could be more flexible. Give an "Ignore" option?

Comment 8

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

[triage] webcompat issue - non-critical.

Comment 9

[Mike Taylor [:miketaylr]]

Karl, could you investigate the HTTP redirect chain here, in Fennec and Chrome Mobile?

This site is massively popular in China.

Comment 10

[Karl Dubost💡 :karlcow]

So let's see The http DANCE

http://www.bilibili.com/video/av4255707

301 to https://www.bilibili.com/video/av4255707

which leads to a 200 OK.

```http
HTTP/1.1 200 OK
Date: Thu, 31 May 2018 23:37:16 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
gear: 1
Cache-Control: no-cache, must-revalidate, max-age=0, no-store
vikingrMCCache: videoplay-index-av4255707-videoplay-page-av4255707-TopHeader-video
Vary: Origin,Accept-Encoding
Content-Encoding: gzip
X-Cache: MISS from tx-bj3-webcdn-01.hdslb.com
```

but the site rebonds to another domain:
https://m.bilibili.com/video/av4255707.html


```http
HTTP/1.1 200 OK
Date: Thu, 31 May 2018 23:37:17 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
X-Powered-By: Express
Set-Cookie: purl_token=bilibili_1527809837; Max-Age=900; Domain=.bilibili.com; Path=/; Expires=Thu, 31 May 2018 23:52:17 GMT; HttpOnly
ETag: W/"3be9-HJcrVEoFuKi0WLW0FjAqbUzuvOk"
Vary: Accept-Encoding
Content-Encoding: gzip
Expires: Thu, 31 May 2018 23:37:16 GMT
Cache-Control: no-cache
X-Cache: BYPASS from tx-sh2-webcdn-01.hdslb.com
```

That means this 200 OK was triggered by a client side instruction.
It's not HTML.

Let's see the JavaScript and search for a `window.location`.

```js
(function() {
    var ua = window.navigator.userAgent,
      agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPod"],
      isPC = true;
    for (var i = 0, len = agents.length; i < len; i++) {
      if (ua.indexOf(agents[i]) > 0) {
        isPC = false;
        break
      }
    }
    if (!isPC) {
      var href = window.location.origin.replace("www", "m") + "/video/" + window.location.href.match(/av([0-9]+)/g)[
        0] + ".html" + window.location.search;
      window.location.href = href
    }
  })();
```

ok. So far so good.
Let's continue.
The logs show that we are redirected to 

bilibili://video/4255707?h5awaken=cHZpZD02NDNCRjczOC1FOEM4LTRCMzctQkZFNy1BM0JBNDIzNjMwRkQxNDYwM2luZm9jXzQyNTU3MDdfMTUyNzgwOTgzODMwMCZ1YT1Nb3ppbGxhJTJGNS4wJTIwKEFuZHJvaWQlMjA3LjAuMCUzQiUyME1vYmlsZSUzQiUyMHJ2JTNBNjIuMCklMjBHZWNrbyUyRjYyLjAlMjBGaXJlZm94JTJGNjIuMCZpc0F1dG9PcGVuPXRydWUmYnNvdXJjZT11bmRlZmluZWQ%3D


and 
```
NS_ERROR_UNKNOWN_PROTOCOL:  video-670541190.js:1
    o/</< https://s1.hdslb.com/bfs/static/mult/video-670541190.js:1:1694
```

https://s1.hdslb.com/bfs/static/mult/video-670541190.js

In that script, there are 3 instances of `bilibili://video/nnnnnnn?h5awaken` where n is an integer

```js
        function o(e) {
            var t = e.avid,
                r = e.type;
            return new h.default(function(e) {
                var n = ["seo", "Tencent_yyb", "wechat", "iqiyi_video_app", "bdbox", "qq", "weibo"].indexOf(window.bsource) >= 0,
                    i = f.getCookie("buvid3"),
                    a = encodeURIComponent(btoa("pvid=" + i + "_" + t + "_" + (new Date).getTime() + "&ua=" + encodeURIComponent(window.navigator.userAgent) + "&isAutoOpen=true&bsource=" + window.bsource));
                if (!n) switch (r) {
                    case "video":
                        window.reportMsgObj && window.reportObserver && (window.reportMsgObj.click = "video" + t + "AutoOpen", window.reportObserver.forceCommit()), setTimeout(function() {
                            location.href = "bilibili://video/" + t + "?h5awaken=" + a, e()
                        }, 500);
                        break;
                    default:
                        setTimeout(function() {
                            location.href = "bilibili://rank/rank", e()
                        }, 500)
                }
            })
        }

        function s(e) {
            var t = e.type,
                r = e.id,
                n = e.extra,
                i = void 0 === n ? "" : n;
            switch (t) {
                case "video":
                    return "bilibili://video/" + r + "?h5awaken=" + a(r);
                case "tag":
                    return "bilibili://tag/" + r;
                case "index":
                    return "bilibili://rank/rank";
                case "audio":
                    return "bilibili://music/detail/" + r + i;
                case "audioMenu":
                    return "bilibili://music/menu/detail/" + r + i;
                case "space":
                    return "bilibili://space/" + r;
                default:
                    return "bilibili://rank/rank"
            }
        }


            function o(e) {
                e = e || {};
                var t = e,
                    r = t.id,
                    n = t.type;
                if (!(["seo", "Tencent_yyb", "wechat", "iqiyi_video_app", "bdbox", "qq", "weibo"].indexOf(window.bsource) >= 0)) switch (n) {
                    case "video":
                        window.reportMsgObj && window.reportObserver && (window.reportMsgObj.click = "video" + r + "AutoOpen", window.reportObserver.forceCommit());
                        var i = p.getCookie("buvid3"),
                            a = encodeURIComponent(btoa("pvid=" + i + "_" + r + "_" + (new Date).getTime() + "&ua=" + encodeURIComponent(window.navigator.userAgent) + "&isAutoOpen=true&bsource=" + window.bsource));
                        location.href = "bilibili://video/" + r + "?h5awaken=" + a;
                        break;
                    case "article":
                        window.reportMsgObj && window.reportObserver && (window.reportMsgObj.click = "article" + r + "AutoOpen", window.reportObserver.forceCommit()), location.href = "bilibili://article/" + r;
                        break;
                    default:
                        location.href = "bilibili://rank/rank"
                }
            }
```


What's happening using Firefox with a chrome Mobile user agent.
The beginning is the same, we reach 
https://m.bilibili.com/video/av4255707.html

The site starts loading and then we are redirected to 
bilibili://video/4255707?h5awaken=cHZpZD02NDNCRjczOC1FOEM4LTRCMzctQkZFNy1BM0JBNDIzNjMwRkQxNDYwM2luZm9jXzQyNTU3MDdfMTUyNzgxMTc0MDU0MiZ1YT1Nb3ppbGxhJTJGNS4wJTIwKExpbnV4JTNCJTIwQW5kcm9pZCUyMDQuNC40JTNCJTIwZW4tdXMlM0IlMjBOZXh1cyUyMDUlMjBCdWlsZCUyRkpPUDQwRCklMjBBcHBsZVdlYktpdCUyRjUzNy4zNiUyMChLSFRNTCUyQyUyMGxpa2UlMjBHZWNrbyklMjBDaHJvbWUlMkY0Mi4wLjIzMDcuMiUyME1vYmlsZSUyMFNhZmFyaSUyRjUzNy4zNiZpc0F1dG9PcGVuPXRydWUmYnNvdXJjZT11bmRlZmluZWQ%3D

and the same broken page. So no influence wrt the userAgent string.

Let's now check on Chrome what is happening:

```http
HTTP/1.1 200 OK
Date: Fri, 01 Jun 2018 00:11:27 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
X-Powered-By: Express
Set-Cookie: purl_token=bilibili_1527811887; Max-Age=900; Domain=.bilibili.com; Path=/; Expires=Fri, 01 Jun 2018 00:26:27 GMT; HttpOnly
ETag: W/"3be9-HJcrVEoFuKi0WLW0FjAqbUzuvOk"
Vary: Accept-Encoding
Content-Encoding: gzip
Expires: Fri, 01 Jun 2018 00:11:26 GMT
Cache-Control: no-cache
X-Cache: BYPASS from tx-cd2-webcdn-02.hdslb.com
```

In the network log, there is also a request to 
bilibili://video/4255707?h5awaken=cHZpZD1udWxsXzQyNTU3MDdfMTUyNzgxMTg4ODcyMSZ1YT1Nb3ppbGxhJTJGNS4wJTIwKExpbnV4JTNCJTIwQW5kcm9pZCUyMDUuMCUzQiUyMFNNLUc5MDBQJTIwQnVpbGQlMkZMUlgyMVQpJTIwQXBwbGVXZWJLaXQlMkY1MzcuMzYlMjAoS0hUTUwlMkMlMjBsaWtlJTIwR2Vja28pJTIwQ2hyb21lJTJGNjkuMC4zNDQ2LjAlMjBNb2JpbGUlMjBTYWZhcmklMkY1MzcuMzYmaXNBdXRvT3Blbj10cnVlJmJzb3VyY2U9dW5kZWZpbmVk

but the request never gets finished. It stays in a stalled state. 

If I type in the console in chrome 

```js
window.location.href = 'bilibili://video/4255707?h5awaken=cHZpZD02NDNCRjczOC1FOEM4LTRCMzctQkZFNy1BM0JBNDIzNjMwRkQxNDYwM2luZm9jXzQyNTU3MDdfMTUyNzgxMTg1NzA3OCZ1YT1Nb3ppbGxhJTJGNS4wJTIwKExpbnV4JTNCJTIwQW5kcm9pZCUyMDQuNC40JTNCJTIwZW4tdXMlM0IlMjBOZXh1cyUyMDUlMjBCdWlsZCUyRkpPUDQwRCklMjBBcHBsZVdlYktpdCUyRjUzNy4zNiUyMChLSFRNTCUyQyUyMGxpa2UlMjBHZWNrbyklMjBDaHJvbWUlMkY0Mi4wLjIzMDcuMiUyME1vYmlsZSUyMFNhZmFyaSUyRjUzNy4zNiZpc0F1dG9PcGVuPXRydWUmYnNvdXJjZT11bmRlZmluZWQ%3D'
```

It doesn't change the contest of the page (which was on the mobile site), it ignores it.


If I do the same in Firefox, it triggers an attempt at navigation, which results into a

```
[Exception... "The URI scheme corresponds to an unknown protocol handler"  nsresult: "0x804b0012 (NS_ERROR_UNKNOWN_PROTOCOL)"  location: "JS frame :: debugger eval code :: <TOP_LEVEL> :: line 1"  data: no]
```


Maybe it's just the way Firefox and chrome handle these is different.



Side comment there are using FastClick which is likely to create issues on Firefox Android.
https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
See https://miketaylr.com/posts/2017/10/fast-click-more-like-thing-of-the-past-click.html

Another issue with their certificate which will be ignored soon. Symantec Distrust one.

Comment 11

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 12

[Karl Dubost💡 :karlcow]

This is working for me.