Hls.js: Google Chrome poster image disappears

[m-emelchenkov]

Hi all. I carefully learned topic here: https://github.com/video-dev/hls.js/issues/1609, and created a code based on @tchakabam advices. Unfortunately, nothing changes, the poster flashes for a second, then disappeared. Moreover, if I understand right, startLoad(0) is now by default in trunk version of the sources? Anyway, it don't work for me, what could be wrong? Google Chrome 71 on macOS.

    <video src="…"
        poster="…"
        controls>
    </video>

    // HLS is not supported by browser
    // Attach support library
    for (var videoArr = document.getElementsByTagName("video"), x = videoArr.length; x--;) {
        var hls = new Hls({autoStartLoad: false});
        // var hls = new Hls();
        var mediaAttached = {
            hls: hls,
            video: videoArr[x].src,
            cb: function() {
                this.hls.loadSource(this.video);
                // TODO: fix thumbnail -- it is hidden
            }
        };
        hls.attachMedia(videoArr[x]);
        hls.on(Hls.Events.MEDIA_ATTACHED, mediaAttached.cb.bind(mediaAttached));
        var manifestParsed = {
            hls: hls,
            cb: function(event, data) {
                this.hls.startLoad(0);
            }
        };
        hls.on(Hls.Events.MANIFEST_PARSED, manifestParsed.cb.bind(manifestParsed));
    }

What version of Hls.js are you using?

Latest trunk and latest stable.

What browser and OS are you using?

Google Chrome 71 macOS High Sierra.

[ashmoop]

I am also having this issue. Poster shows up for a second, and then after Hls scripts get initialized, the poster thumbnail image is removed from the video and only the first frame of the video is showing instead.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mark-beeby]

This has just started occurring after the Chrome 77 update on Windows / Linux. Did you guys find a fix here?

EDIT: Does appear to be a Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1007988

[mreinstein]

Also running into this problem

[Jezwin]

Any workarounds!

[m-emelchenkov]

Any workarounds!

As a topicstarter, I'll try to reply.

The only workaround I found for my own website is to use an <img> tag, and replace it by <video> tag by mouse click. You need to write some amount of custom JavaScript code and do testing on different devices, though.

It is especially useful if you have multiple videos on the page. Because each <video> tag starts preloading video (how it is done is decided by user's browser). You waste traffic, your user waste traffic too, it's a lose-lose situation.

You can look it in action here: https://www.Emelchenkov.pro/Проекты/Красная_книга_аппаратуры

[Jezwin]

Hey I did tried out a different thing. I set the preload to metadata, removed the attribute src from video tag and appended a source tag inside with src="video_source" and it worked.

Observations:
An src attribute was present with video tag when not on Dev mode. On dev mode, there was no src and the video tag contained an inner source tag with src attribute.

[jackguoAtJogg]

For me it only happens when I use HLS video format, after I load the hls video and attached it the poster image would disappeared. However, I do have a work around which is similar the above response.

Load the hls but attach the media only when use clicks the play button. For this you have to attach a event listener for play remember to add a property to only attach once otherwise you would load the video again and again whenever you hit the play button.

[dylanjha]

Latest from Chrome:

Status: WontFix (was: Assigned)
This seems like it's WAI? We only show poster until the first frame of the video is available. If you want the poster you must set preload=metadata instead

It seems like Chrome will not fix this. Is there an API with to control the preload behavior when using HLS.js?

[itsjamie]

There isn't really a preload API for hls.js to my knowledge. Once you invoke startLoad, you're asking media to be buffered.

A preload API for hls.js might look like downloading the manifests but not starting media download, or in the case of VOD, not appending to the MediaSource.

[dylanjha]

Looks like this will be fixed in M85 https://bugs.chromium.org/p/chromium/issues/detail?id=1007988#c20

🤞

[dylanjha]

Indeed, fixed for me in M85! 🎉