Add a static picture to a video Options

[Lee Batchelor]

Hi all,

I want to add a picture to a video before the user clicks the Play button. At the moment, the video is displayed as a black screen, as per the attached picture. I have the picture but I don't know how to add it. Is it as simple as using the <img> tag? Thanks.

[pandy]

Can the poster attribute be what you look for?
https://developer.mozilla.org/en-US/docs/We...L/Element/video

I don't do video so I'm not sure how this works. They say "A URL for an image to be shown while the video is downloading". I don't know if this means the user needs to click play and then the thumb shows until the video is ready or if the thumb shows before any user action.

If it's the first option you may need some JavaScript trickery to do what you want. But as said, I don't do video so don't take my word for it.

[Lee Batchelor]

Thanks for that, Pandy. Does the <video> tag just display the static pic and then disappear when the actual video starts playing and then re-appear when the video is done?

Here's the code I'm already using. Sadly, it only displays the black player screen when the page is accessed.

<p class="mp4name"><b>Shakey Ground</b>
<p><video width="400" height="300" controls><source src="shakey.mp4" type="video/mp4">
</video>

This post has been edited by Lee Batchelor: Feb 19 2023, 04:20 PM

[pandy]

I don't know. The description isn't totally clear. Try it and see what happens. And then tell me.

[Lee Batchelor]

Okay, figured it out, Pandy. Here's the finished code:

<p><video width="400" height="300" controls poster="shakeypic.png"><source src="shakey.mp4" type="video/mp4">
</video>

With the addition of the poster attribute, a static picture fills the black screen until the user presses Play. This was pointed out in that very helpful link you sent earlier. I checked out the use of the poster attribute on the W3C schools website.

Thanks again for the help!

[pandy]

Great! I wasn't at all sure it would work that way.

[Jason Knight]

Some questions:

What makes the video title a grammatical paragraph? Aka what "p" means? Shouldn't that be the proper depth heading?

What makes the video title a proper name or entity such as in a legal document, aka what "b" means

What makes a video a grammatical paragraph?

Those three questions all stem from one of the most basic rules of using HTML. If you choose ANY your your tags based on their default appearance instead of their meaning, you're using all the wrong tags for all the wrong reasons.

Also:

Why aren't you closing those paragraphs that are the wrong tags? This isn't 1997.

Is your sample video Delbert McClinton? If so, awesome! I absolutely adore the '88 performance at Austin City Limits.

This post has been edited by Jason Knight: Feb 22 2023, 06:56 AM

[Christian J]

What makes the video title a grammatical paragraph? Aka what "p" means? Shouldn't that be the proper depth heading?

Agreed, at least provided that the video is meant to have a proper title?

a proper name or entity such as in a legal document, aka what "b" means

Where is that from? Currently https://html.spec.whatwg.org/multipage/text...l#the-b-element says:

"The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede."

What makes a video a grammatical paragraph?

The VIDEO element is listed as "phrasing content", and as such can belong inside a P:

https://html.spec.whatwg.org/multipage/medi...e-video-element
https://html.spec.whatwg.org/multipage/dom....asing-content-2

The end of the VIDEO section even shows an example:

CODE

<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>

Alas there's no title markup for the video.

Also:

Why aren't you closing those paragraphs that are the wrong tags? This isn't 1997.

The P end tag is still optional in HTML5: https://html.spec.whatwg.org/multipage/grou...l#the-p-element --that said, I personally like to always use end tags in order to minimize any future HTML nesting confusion.