1469200 - Twitch 'replay' button does not work in embedded clips

Status: RESOLVED WORKSFORME

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

Description

[nucrap]

If you watch any embedded clip from twitch, there is a 'replay' button if you watch until the end.
For some time now, pressing the 'replay' button has no effect in Firefox. I've tried it in Chrome and it works perfectly.

Here's an example clip to test it out: https://www.reddit.com/r/GlobalOffensive/comments/8rq5v5/sixer_sick_wallbangs/

Can you guys reproduce this?

Comment 1

[Kanchan Kumari QA]

I could reproduce this issue on 

User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0

User Agent 	Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0

I tried this on Chrome too and replay button works fine there.

Comment 2

[Mike Conley (:mconley) (:⚙️)]

I think this is a web compat bug. I'm able to reproduce easily:

STR:

1. Open up the embedded view of the Twitch video on the Reddit page by clicking on the play button near the post title.
2. Once the video expands out, and is embedded on the page, click Play. 
3. Move the playhead to the end of the video so that the video ends, and the play button becomes the "Replay" button
4. Click on the "Replay" button

ER:

The video should replay from the start.

AR:

Nothing happens.

Tested on Firefox 62.0a1 (20180621100048) on Windows 10. This works as expected in Chrome.

Putting into Web Compatibility for now because I'm hoping our wizards there can help us figure out where things are breaking down here.

Comment 3

[Mike Taylor [:miketaylr]]

Tom, can you take a look please?

simpler STR (w/o reddit js showing up in devtools)
1. go to https://miketaylr.com/bzla/embed-twitch.html
2. let the video play once
3. click on replay button

it don't works.

Comment 4

[Thomas Wisniewski [:twisniewski]]

They are actually calling play on the video in this function:

>key: 'play',
>value: function () {
>  var e = this;
>  return this._srcReady.then(function () {
>    return new Promise(function (t) {
>      if (e._video.readyState >= 3)
>        t(e._video.play());
>      else {
>        var n = function n() {
>          e._video.removeEventListener(o.c, n),
>          t(e._video.play())
>        };
>        e._video.addEventListener(o.c, n)
>      }
>    })
>  }).catch (function (t) {
>    'NotAllowedError' === t.name && (e._video.dispatchEvent(new CustomEvent(o.m)), e._video.dispatchEvent(new CustomEvent(o.k)))
>  })
>}

But in Firefox, the promise play returns never resolves or rejects. But if I reduce this function to not use the inner promises, the replay button "works":

>key: 'play',
>value: function () {
>  var e = this;
>  return e._video.play();
>}

So this is probably because our code to track whether play was called in a user-initiated event doesn't work with promises. I'm not sure if there's another bug on-file to fix this.

What do you think, Mike?

Comment 5

[Mike Taylor [:miketaylr]]

Sounds like a good guess. Can you file a bug? (not sure where it would best live... somewhere in Core I guess)

Comment 6

[Thomas Wisniewski [:twisniewski]]

Done, make bug 1473985.

Comment 7

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 8

[Edgar Chen [:edgar]]

I found that clicking the "replay" button doesn't call video.play() at all.
I think there could be another issue involed here.

(In reply to Thomas Wisniewski [:twisniewski] from comment #4)

They are actually calling play on the video in this function:

key: 'play',
value: function () {
var e = this;
return this._srcReady.then(function () {
return new Promise(function (t) {
if (e._video.readyState >= 3)
t(e._video.play());
else {
......

They are calling play() if video.readyState >= 3. Checking the video.readyState via the javascript console on Firefox and Chrome. video.readyState is 2 in Firefox and 4 in Chrome. Could you help to try modifying the condition to if (e._video.readyState >= 2 ...?
If the video is still not played due to the user-initiated event doesn't work with promises, we should see some error message on javascript console.

Comment 9

[Edgar Chen [:edgar]]

Alastor, do you have any idea on readyState behaviour mentioned in comment #8? Thanks.

Comment 10

[Thomas Wisniewski [:twisniewski]]

I just confirmed that changing that if statement to video.readyState >= 2 does make it work, Edgar. (you can use an addon like Developer in the Middle or Tinker Tester Developer Spy to more easily override network requests and redirect them to a local server, btw).

Comment 11

[Edgar Chen [:edgar]]

(In reply to Thomas Wisniewski [:twisniewski] from comment #10)

(you can use an addon like Developer in the Middle or Tinker Tester Developer Spy to more easily override network requests and redirect them to a local server, btw).

Nice to learn this. Thanks

Comment 12

[Alastor Wu [:alwu]]

Sorry for my late response. According to the spec [1], when media reaches to the end, the readyState should be HAVE_CURRENT_DATA (2), not HAVE_ENOUGH_DATA (4). So our implementation is correct, we should ask Twitter to modify their code, in order to allow to replay embedded video.

[1] https://html.spec.whatwg.org/multipage/media.html#dom-media-have_current_data

---

Hi, Adam,
Could you help us contact Twittwer and report this issue to them?
Thank you.

Comment 13

[Adam Stevenson [:adamopenweb]]

Nikhil, is this something that you could help with?

Comment 14

[Nikhil Purushe]

Hi Adam thanks for the bug report, I've created an internal issue to track this. We'll keep this issue updated.

Comment 16

[Karl Dubost💡 :karlcow]

This is working for me now.