Video play button on overlay images

Question

I recently came across a big play button on an overlay image for a video. Pressing the play button displays the player, but does not start (play) the video. The user needed to press play on the video player to start the video. When I questioned this I received the following reply:

The way the player works is that the player with the big orange play button (cover player) appears when browser displays the video. The purpose is to enable content producers to create a custom background thumbnail and to comply with the way most browsers handle videos. Once the play button is activated, the actual player appears.'

In my opinion it is potentially confusing. I'd appreciate feedback on what others think and is this double play button technique a recognised standard as I cannot find any references online promoting this method.

Answer 1

We assume a lot of things when designing a user experience. The video player being used is not mentioned but I would test the page in two variants and compare the page load times to see what really is working for your webpage using https://www.webpagetest.org/

1. Embed video player directly without the fake image appearance and test the page load speed
2. Test your implementation of fake image-video player and compare with the above. You also need to consider accessibility by screen readers so that the image is not just appearing as an image, instead a button that informs screen readers that it is a play button not just an image with some alt text.

If the difference in page load speeds is not considerable, then I would go with embedded video player as that would also enable right accessibility controls for user as long as the video player is accessible.

Either way, if you must go with the fake-video player, I agree with @straya that once fake play button is pressed, you can auto-play the video as the player loads since user already has provided their consent to play the video.

Answer 2

If not for the fact one must press play twice (with perhaps a bit of wait in between presses as the actual player control strip renders), then there wouldn't be a significant detriment to usability. The benefits of this approach are:

• custom background thumbnails can be supplied out-of-band from the video, i.e. the background thumbnail does not have to be sourced from the video.
• Rendering performance: browsers can render and scroll many images much easier than many videos (even if they are not playing). The website only has to load a single player once a "fake play button" is pressed.

Why not simply auto-play the video once the player is loaded after the User presses the 'fake play button'? Those extra clicks and perception that one must click the play button as many times as necessary until the video is playing may be important for the site's true goals. E.g. This pattern does play well with the types of websites that aggressively advertise and perhaps try to mislead with intermittent advertisements that also contain a "fake play button".