Rock Media Short Code Thumbnail Bug

[Jchinlcbc]

Description

Device: Mac OS Safari, IOS any Browser
It appears that the media player doesn't show the thumbnail poster, but instead shows the first frame of the video.

MacOS Sonoma 14.3.1

Iphone 13 IOS 17.2.1

To fix this issue, add .plyr__video-wrapper{ overflow:initial; } to the styling of your page

This bug doesn't appear on an android 1Plus 3 running OxygenOs 9.0.6 as seen below.

Actual Behavior

On Page load

The thumbnail loads. For a quick second, you can see the desired thumbnail. Then the video player loads. Since the z-index of the video is higher than the thumbnail it gets over written.

When viewing the Media player, on the above operating systems, the first frame of the video seems to be displaying instead of the thumbnail poster. After the video is finished playing, it also doesn't display the thumbnail.

Expected Behavior

When viewing the core video player short code, the thumbnail displays instead of the first frame.

Steps to Reproduce

Setting up

1.) Under CMS configuration enter Media Accounts
2.) Create a New Media Account
3.) Create a Folder
4.) Create a Media Element
5.) On the Media Element create an HTML content block using page zone in SectionA
6.) add the following code to the block, this will give you the GUID of the video{% mediaelement where:'Id == {{ PageParameter.MediaElementId }}' %} {{ mediaelement | Property:'Guid' }} {% endmediaelement %} Copy that GUID for later
7.) On the external Page and block that accepts HTML and add the following code {[ mediaplayer media:'COPIED GUID' thumbnail:'ANY IMAGE' autoresumeindays:'14' combineplaystatisticsindays:'14' width:'100%' ]} {[ endmediaplayer ]}
8.) Save

seeing the bug

• Go to the page with the block you just created in any of the browsers/devices listed in the above section.
• Scroll down to the video player.
• Note that the first frame of the video is displayed instead of the thumbnail video

Issue Confirmation

• Perform a search on the Github Issues to see if your bug or enhancement is already reported.
• Try to reproduce the problem on a fresh install or on the demo site.

Rock Version

16.2

Client Culture Setting

en-US

[jasonhendee]

@Jchinlcbc, thanks for reporting this issue. Rock v16.4 will include a fix, and our testing shows that video thumbnails are now displayed in MacOS Safari, as well as iOS Safari and Chrome.

In order to provide the best streaming experience possible, Rock uses a 3rd party media player library under the hood. It turns out the issue was within this library's styling of the video and poster (thumbnail) elements. While we don't generally like to patch issues related to external libraries, we felt that this was one we needed to address directly, as the fix is pretty low risk and the issue has been reported but remains unaddressed in that library's repository.