Poster attribute of <video> tag does not work in chrome

[reimeri]

Describe the bug

The poster attribute of <video> tags does not seem to work in Chrome. It is still working fine in Firefox.

No errors are written to the console. Chrome does not even fetch the image.

Your Example Website or App

https://github.com/reimeri/solidjs-video-bug

Steps to Reproduce the Bug or Issue

function App() {
  return (
    <>
      <video
        src="/some_video.mp4"
        poster="/image.webp"
        loop
        muted
      />
    </>
  );
}

export default App;

Expected behavior

Poster image shown before the playback of the video is started

Screenshots or Videos

No response

Platform

• OS: [Linux]
• Browser: [Chrome]
• Version: [135.0.7049.95]

Additional context

No response

[titoBouzout]

Weird issue. Looks like chrome needs the full URL. The following seems to work because it changes the URL from poster="/image.webp" to poster="http://localhost:3000/image.webp"

import { onMount } from "solid-js";

// ...

<video
        ref={(node) =>
          onMount(() => {
            node.poster = node.poster;
          })
        }
        poster="/image.webp"
        src="/some_video.mp4"
      ></video>

If I use it like follows it also works <video poster="http://localhost:3000/image.webp" src="/some_video.mp4"></video> maybe worth adding an issue into chrome bug list https://issues.chromium.org/issues