From the course: Learning Web Audio and Video
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Use a poster image
- [Instructor] A poster image allows us to display a static image while the video loads or before the user clicks to play. This is defined via a poster attribute. If you do not define a poster attribute, the first available frame of the video is displayed. So, before we actually modify this code, let's have a look in the browser to see how it's being displayed right now. Alright, we just have a black frame in Chrome, which isn't very user friendly. Let's fix that in Visual Studio Code. Before we actually refer to a poster attribute, we're going to need to add the actual PNG file that I've created as a still. Looking inside exercise files within the media folder, you'll find still.png. This is a simple, still image composite that I created in Adobe Photoshop and exported as a PNG image. Drag and drop this directly into the media folder in your project. Now, Visual Studio Code can display image data and it's showing us this right here in a new tab, but we don't really need to see it, so…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.