player
player copied to clipboard
add onError in Poster img tag
I have React project with <Poster onError={} /> this render <img> tag but without onError. I want if poster src not exist to not shown broken image icon. This is my code:
<MediaPlayer
viewType={isAudioType() ? 'audio' : 'video'}
autoPlay={autoPlay.current}
loop={loop.current === 'loopOne'}
className="player"
title={extractFileName(filePath)}
src={filePath}
crossOrigin
playsInline
onEnded={onEnded}
ref={player}
>
<MediaProvider>
<Poster
className="vds-poster"
src={
getThumbFileLocationForFile(filePath)
}
onError={(i: SyntheticEvent<EventTarget>) => {
const target = i.target as HTMLImageElement;
target.style.display = 'none'
}}
alt={filePath}
/>
</MediaProvider>
{/* Layouts */}
<DefaultAudioLayout icons={defaultLayoutIcons} />
<DefaultVideoLayout
icons={defaultLayoutIcons}
// thumbnails="https://files.vidstack.io/sprite-fight/thumbnails.vtt"
/>
</MediaPlayer>
You can repeat this issue here: https://github.com/vidstack/examples/blob/main/player/react/default-layout/src/player.tsx#L88