-3

please I have a phpmyadmin database where a list of video names are stored, I also have a file where these videos are stored, so I am outputting this videos to the front end with a function in php called MYSQLI_FETCH_ASSOC when these data are gotten from the server with the function, a JavaScript function I created will append it with a div tag. And I also have a function that obverse when the first video data is success, then the function sends a response to the server and the server bring another data from the database.

So my problem is how can I preview part of the video in the video tag. By default after the page finish loading, the video tag becomes black in color, until i click on it to play. So I want it to show a part of the video after the page have finish loading, just as Facebook, Twitter , Instagram.

The video tag

So how can I make the video to show part of the video data ???

Dharman
  • 30,962
  • 25
  • 85
  • 135
Emem Edem
  • 21
  • 1
  • 5

1 Answers1

1

You have to add the poster attribute to the video tag. See docs.

<video width="470" height="255" poster="placeholder.png" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    <object data="video.mp4" width="470" height="255">
    <embed src="video.swf" width="470" height="255">
    </object>
</video>

EDIT: How to get thumbnail from video
You can display your first video frame as thumbnail by adding preload="metadata" to your video tag and the second of the first frame #t=0.5 to your video source:

<video width="470" height="255" poster="placeholder.png" controls preload="metadata">
    <source src="video.mp4#t=0.5" type="video/mp4">        
</video>

Or... if the video is in the same domain you can use Popcorn.capture.js which will allow you to create posters from any frame of your video.

Or... you can use canvas to capture the thumbnail as this answer and this answer explain.

iamdlm
  • 1,885
  • 1
  • 11
  • 21
  • i dont need poster, i want the original video content to show, i have already try poster – Emem Edem Jan 19 '21 at 12:07
  • What do you mean by original video? What you see first in every social media is just a image from the video (poster/thumbnail) and only when you hover it or press play the actual video is loaded. [Example from Twitter](https://imgur.com/uHDBszc). – iamdlm Jan 19 '21 at 12:52
  • What you may be looking for is some kind of automation to get a thumbnail image from a video but that is an entirely different question. – iamdlm Jan 19 '21 at 12:53
  • So how can I get a thumbnail from a video ??? – Emem Edem Jan 19 '21 at 23:20
  • See if my edit to the answer helps. – iamdlm Jan 19 '21 at 23:36