1281022 - [intermittent] AbemaTV HTML5 video would not start automatically

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Alice0775 White]

Steps to reproduce:
1. Disable Flash Plugin if installed
2. Open https://abema.tv
3. Click 1st thumbnail to start news

Actual Results:
The video would not start
An error is shown in the Web Console.
too much recursion        89fac91d-4af3-4228-993e-88c7d3b8c22e:78




* Reloading(F5) will start the video...
* OR directly open the URL( https://abema.tv/now-on-air/abema-news ), the video works properly


Expected Results:
The video should start without reloading(F5) the page.

Comment 1

[Alice0775 White]

pls ignore followings:
> * Reloading(F5) will start the video...
> * OR directly open the URL( https://abema.tv/now-on-air/abema-news ), the video works properly

Comment 2

[Cosmin Muntean [:cmuntean], Ecosystem QA]

Firefox: 50.0a1, Build ID: 20160626030213
User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:50.0) Gecko/20100101 Firefox/50.0

I have tested this issue on the latest Firefox (47.0) release and latest Nightly (50.0a1) build, and I could reproduce it. The videos are accessible only in Japan so I have manually configured the Firefox connection settings using proxies from Japan in order to test this issue. 
I have played the first video from the page, but it didn't start, only after refreshing the page.
Sometimes the video is played without refreshing the page, but after a few seconds it stops and the "too much recursion" error is shown in web console.

Comment 3

[Anthony Jones (:ajones, :kentuckyfriedtakahe, :k17e)]

Brian - I'm guessing that this is an issue with the site Javascript. Is there someone in Mozilla Japan who could contact the site?

Comment 4

[Brian Birtles (:birtles, Feb 26~ parental leave)]

(In reply to Anthony Jones (:kentuckyfriedtakahe, :k17e) from comment #3)
> Brian - I'm guessing that this is an issue with the site Javascript. Is
> there someone in Mozilla Japan who could contact the site?

The page actually says that Firefox might not work.
(お使いのブラウザは推奨環境外のため、正しく動画が再生されない可能性があります。快適に視聴するために、最新版のGoogle Chromeまたは、Internet Explorer11をご利用ください。 -- The browser you're using is outside the system requirements so there's a change the video won't play correctly. For optimal viewing please use the latest Google Chrome or Internet Explorer 11)

I get a bunch of "SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data" errors as well. Not sure if they're related.

While I think dynamis could probably get in touch with them I don't think there's any point since they already seem to know their site is broken in Firefox. We should try to narrow down the cause and suggest a fix (assuming it's not a Gecko bug that their changes have uncovered).

Comment 5

[Brian Birtles (:birtles, Feb 26~ parental leave)]

(In reply to Brian Birtles (:birtles) from comment #4)
> The page actually says that Firefox might not work.
> (お使いのブラウザは推奨環境外のため、正しく動画が再生されない可能性があります。快適に視聴するために、最新版のGoogle
> Chromeまたは、Internet Explorer11をご利用ください。 -- The browser you're using is
> outside the system requirements so there's a change the video won't play
s/change/chance/

Comment 6

[Karl Dubost💡 :karlcow]

When I access the site there is already a broken icon.
When I click abema news with MacOS X. The video doesn't start indeed.
fwiw the same thing is happening with Opera Blink on MacoSX
And the same thing is happening with Chrome User Agent on MacOSX

I'm not sure there is anything to do there. It seems broken everywhere. 
Is there a browser where this is working?

Comment 7

[Brian Birtles (:birtles, Feb 26~ parental leave)]

It works for me in Chrome (but not with DevTools panel open) and it sort of works in Firefox.

Comment 8

[Karl Dubost💡 :karlcow]

Switching to needsdiagnosis
This requires an analysis of where and how the issue is happening. 
And suggest a fix in the code before attempting any contacts.

Comment 9

[Mike Taylor [:miketaylr]]

"AbemaTV is only accessible within Japan". A bit hard to do diagnosis without a VPN, I suppose.

Comment 10

[Karl Dubost💡 :karlcow]

Let's see again.
* based in Japan, 
* using Firefox Nightly 53.0a1 (2017-01-03) (64-bit) 
* on macOs Sierra 10.12.2
* __No flash installed at all__
* clean profile
* Fresh new window

1. Enter https://abema.tv/
2. The homepage has the first thumbnail with the video already playing without sound.
3. In the console: "ready to use player"

which comes from https://abema.tv/main.js?v=v1.18.0

```js
window.theoplayer = {
onReady: function () {
console.info('ready to use player'),
d = !0,
p.forEach(function (e) {
return e()
}),
p = null
},
configuration: {
frameAccurateSeekEnabled: !0
}
};
```

Then if I click the active thumbnail.
The video is starting with sound (full width of the airport)
https://abema.tv/now-on-air/abema-news
with instruction for the keyboard on top of the video.

One click on the video and the instructions disappear. The video continues to play.

For CSS the console is pitting out a lot of errors related to a width issue.
Error in parsing value for ‘width’.  Declaration dropped.


AH! when on https://abema.tv/now-on-air/abema-news and hitting reload I get the message about Chrome.

> お使いのブラウザは推奨環境外のため、正しく動画が再生されない可能性があります。快適に視聴するために、最新版のGoogle Chromeをご利用ください。

which seems to be the exact opposite of what people had as an issue.

The message comes from in https://abema.tv/main.js?v=v1.18.0

                        case "promptChrome":
                            i = o.default.createElement("p", {
                                className: u.default.text
                            }, "お使いのブラウザは推奨環境外のため、正しく動画が再生されない可能性があります。快適に視聴するために、", o.default.createElement(a.Link, {
                                className: u.default.link,
                                to: "https://www.google.co.jp/chrome/browser/desktop/",
                                target: "_blank"
                            }, "最新版のGoogle Chrome"), "をご利用ください。");
                            break;
                        case "promptChromeOrIE":


and is triggered by 

        function i() {
            var e = (0, u.default)(),
                t = a.default.hasFlashPlayerVersion("1"),
                n = "Mac OS" === e.os.name,
                r = "Windows" === e.os.name,
                i = "Chrome" === e.browser.name,
                o = "IE" === e.browser.name,
                s = "Safari" === e.browser.name,
                l = s && /^10\.9/.test(e.os.version),
                c = !t && l,
                f = null;
            return !n || i || s ? !r || i || o ? r && o && !t ? f = "promptFlash" : c && (f = "promptFlash") : f = "promptChromeOrIE" : f = "promptChrome", f
        }

Comment 11

[Alice0775 White]

Okay,
The site seemed to fix "too much recursion" error by themselves.

So, I think this bug should close.

Comment 12

[Mike Taylor [:miketaylr]]

(In reply to Alice0775 White from comment #11)
> Okay,
> The site seemed to fix "too much recursion" error by themselves.
> 
> So, I think this bug should close.

OK, thanks!