CODEWITHSUNDEEP
htmlvideo
Shan Biswas
Shan Biswas

Reputation: 429

dynamic image background of html5 video

I am using video tag of HTML5. But before playing the video it shows the very first second of the video as the image; however, that image is solid black for my case; so I would like to know if I can have the default image (before hitting the play button) from somewhere of the middle of the video without using a static poster for all videos. I like to have images which will be a part of that video, I mean dynamic image as a background. Any suggestions will help me a lot..!!

Upvotes: 0

Views: 400

Answers (2)

Lakshya
Lakshya

Reputation: 506

You can Use this poster tag

<video width="320" height="240" poster="/images/w3html5.gif" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   Your browser does not support the video tag.
</video>

To create your own image output :) Well Keep it Up hope i Answered you As you Want. All the Best. :)

Upvotes: 0

Rubysmith
Rubysmith

Reputation: 1175

You need to generate thumbnails for your videos and use the thumbnail images using the poster attribute of the HTML5 video Tag.

<video width="320" height="240" poster="/images/w3html5.gif" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

You can use ffmpeg to generate thumbnails at any timeline from your videos.

Upvotes: 1

Related Questions