player icon indicating copy to clipboard operation
player copied to clipboard

add onError in Poster img tag

Open sytolk opened this issue 1 year ago • 0 comments

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

sytolk avatar Dec 03 '24 15:12 sytolk