www.uslawshield.com - "Play" button is broken

[webcompat-bot]

URL: https://www.uslawshield.com/my-gun-was-just-stolen-3-mistakes-to-avoid-national/

Browser / Version: Firefox Mobile 64.0
Operating System: Android 8.0.0
Tested Another Browser: Yes

Problem type: Video or audio doesn't play
Description: Video on page doesn't load. just white space on page
Steps to Reproduce:
Disabled all add-ons. Still won't load.

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, but I'm not able to reproduce the issue. For me the video plays, regardless if Tracking Protection is enabled or not.

Tested with:
Browser / Version: Firefox Nightly 64.0a1 (2018-09-20)
Operating System: Google Pixel (Android 9) - 1080 x 1920 pixels (~441 ppi pixel density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

@reporter, could you try clearing cache/data/cookies, disable Ad-blocker (if available), or use a clean profile (about:profiles), and check again?

Still what I see as a "Compatibility" issue there is the "Play" button which seems to be broken on Firefox , and in order to play the video, tap on the video player screen should be made.

Affected area:

<video preload="" title="My Gun Was Just Stolen: 3 Mistakes to Avoid from U.S. LawShield" playsinline="" src="blob:https://player.vimeo.com/fd41ba8a-717a-4043-bdc3-39e6a917ca0c"></video>

Moving to Needsdiagnosis for further investigation.

[karlcow]

It looks like a double initialization on the button. It plays one second, then reset to the beginning, only at the first tap. The video is coming from vimeo. If we tap first on video, then the play/pause button is working well even when putting the marker back at the start.

The video is inserted through an iframe.

<iframe src="https://player.vimeo.com/video/290914082" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ratio="0.5625" data-width="640" data-height="360" style="display: block; margin: 0px; width: 330px; height: 185.625px;" frameborder="0"></iframe>

In the console at first load, we get a InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.

On RDM the issue with the first tap doesn't happen.

The same issue is happening on the device if we access directly https://player.vimeo.com/video/290914082

So this has nothing with the site itself, but with the video player code. Something related to the state of the play at first play.

Let's move this to contactready.

What we know:

1. a tap on the video area starts the video
2. a tap on the button at first load starts and stop the video right away.
3. Any subsequent tap on the button are not working.
4. Once tap elsewhere on the video area and move the cursor back to the start of the video. The play button has no issue.

[adamopenweb]

@karlcow does this seem to be the same issue as #18024?

[adamopenweb]

Scratch that it's different.

OK so I can reproduce the issue in FF Android Nightly when accessing:
https://player.vimeo.com/video/290914082
but not in Beta or Release. The video plays on first tap of play.

[adamopenweb]

Thanks to @wisniewskit, we've discovered this is most likely related to block autoplay.

[adamopenweb]

Ping @alastor0325.

[alastor0325]

Filed bug1505880.

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1505880