Reg
February 18, 2021, 2:33pm
1
I’m very confused…
I have 6 videos on a site and have assigned poster images to them. When visiting the page (live), the correct images appear, but after 3 seconds some of them change to stills from their respective video. One video in particular does this every time, but the others do it randomly (though it’s always more than one on every refresh).
This problem is only happening on Safari, not Firefox or Chrome.
Any ideas what could be causing this?
(I’m running 4.1)
I’m curious what brics you might be using?
Also, I heard this could be browser related. Try multiple browsers and see what the results are.
Here’s a thread from a couple years ago discussing issues in Chrome at the time.
opened 10:10PM - 14 Feb 19 UTC
closed 06:51PM - 24 Jun 19 UTC
Stale
Hi all. I carefully learned topic here: https://github.com/video-dev/hls.js/issu… es/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.
Reg
February 18, 2021, 3:09pm
3
Hi, Whittfield, thanks for your answer.
I simply added a 3 column row and placed the Blocs’ Video Bric in each one. The Bric offers the opportunity to assign a poster image.
The problem only happens in Safari (Firefox and Chrome are fine).
PS. I was watching the video for your Media Query Bric an hour or so ago. Man, you have one cool voice/ accent!
1 Like
I believe Safari the poster image is only supported when there’s no video. So the work around is preload=“none” to the video element. not preloading the video means it will have to be clicked to load.
If you need to use the preload feature you’ll need custom code to get any further I think.
1 Like
Reg
February 18, 2021, 3:41pm
5
Thanks for taking the time to answer. I appreciate it.
Pealco
February 19, 2021, 12:09am
6
in each video, in custom atribute you add name: preload; value: none
Interestingly, Safari on the iPhone shows the poster correctly. How do you think to integrate into the video?
2 Likes