video preview image (preview in data.json video source section) doesn't work with HLS vidéo

[markham89]

Describe the bug

create preview image and set url in data.json (video source section)
it's doesn't appear
(preview in metadata section works well)

To Reproduce

Steps to reproduce the behavior:
create preview image and set url in data.json (video source section)
it's doesn't appear
(preview in metadata section works well)

Workaround (if any)

Environment Information

• OS: all
• Browser chrome, brave , firefox
• Browser Version latest
• Paella version 6.4.2

Additional context

Add any other context about the problem here.

If applicable, add screenshots to help explain your problem.

Thank you for contributing!

[karendolan]

[EDIT] Its is not a hls.js lib issue.
Per video-dev/hls.js#2622, the call of This._hls.loadSource(source.src); removes the poster.

[karendolan]

@markham89 is your audio track part of your video file or in a separate audio file?

[markham89]

audio part of my video file.
(HLS video file)

[robwalch]

hls.js does not explicitly set or remove the poster image attribute from the audio or video element it uses to play media. hls.js does set the element's src and attach source buffers to buffer the HLS stream you want it to play. If that removes or hides the poster that you've set on the element, that is the browsers' doing.

I would recommend you display the poster in an image element or using CSS background on another element if you want finer control over when the poster image is displayed.

For more information about the poster attribute and when a poster frame should be displayed, see https://html.spec.whatwg.org/multipage/media.html#poster-frame

[ferserc1]

As @robwalch says, it's better to use a separate poster image, and more in the case of Paella Player, since depending on the type of video and the canvas used, the HTML element that loads the video doesn't necessarily have to be a <video> element. For example, if you use a video360 canvas, the element used to render the video is a <canvas> element using webgl.

But in addition to this reason, the use of poster frame in each individual stream is deprecated from version 6.2, as it does not support the use of lazyLoad. When using lazyLoad the video container is not loaded until the user clicks the player, and therefore there is no possibility to place the video streams separately, nor their poster frames.

The correct place to set a poster image is in the video manifest header, which will place a full-size image in the entire video container:

{
	"metadata": {
		"duration": 909.13,
		"title": "The video title",
		"preview": "video_container_poster_frame.jpg"
	},