Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to add alt attribute for the poster of the video?

Tags:

html

video

Can I add an alt info for the image used as the poster in HTML5?

 <video controls poster="/images/w3html5.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
like image 496
Ege Avatar asked Sep 14 '15 14:09

Ege


People also ask

Can you add an alt tag to a video?

Alt text can be read by screen readers, and helps people who are blind or who have low vision understand what images and other objects are in a document. You can add alt text to objects, such as pictures, clip art, charts, tables, shapes, SmartArt, embedded objects, and audio or video objects.

How do I add alt attributes?

Simply add an alt attribute to the <img> tag in the HTML code. If you're using a modern CMS, it should be possible to add alt text without having to dig into the HTML code. For example, in WordPress, there's a field for alt text when adding an image to a page or post: Things are similar in other CMS'.

How do you alt text a poster?

To add alt text, simply include alt=”” attribute within the image tag.


1 Answers

Just because it is an image does not imply that it will behave like an <img> tag. In fact in this case it is not even a tag, and there would be no way to do that.

Nesting <img> inside <video> would not have the desired effect, since the browser will interpret it only if it doesn't know about <video> tag at all (i.e. an old browser), and this is not the demographic you are shooting for.

What are you attempting to do here?

If you are adding alt to achieve some sort of search engine optimisation, then you should only do so in the event that search engine will actually recognise it as legitimate text to index and identify with the image in question. In this case it may very well be a good idea to add an <img> inside your <video> as so:

<video poster='image.png'>
  <source .../>
  <img src='image.png' alt='Image showing a cute cat' />
  Unfortunately your browser is too old.
</video>

If, on the other hand, you are attempting to do this to enable screen-reader to understand what is displayed there; then you are in much more trouble, since they are usually smarter than most search engines, and will often read text under the cursor. The approach above will not work, since <img> will not be displayed at all. I don't know enough about screen readers to help you further.

like image 153
v010dya Avatar answered Sep 23 '22 02:09

v010dya