How to set the thumbnail image on HTML5 video

Question

Is there a way to set thumbnail image on HTML5 video  I want to see some pictures before play  My code looks like this    lt video width  470  height  255  controls gt       lt source src  video mp4  type  video mp4  gt       lt source src  video ogg  type  video ogg  gt       lt source src  video webm  type  video webm  gt       lt object data  video mp4  width  470  height  255  gt       lt embed src  video swf  width  470  height  255  gt       lt  object gt   lt  video gt    Thanks

User · Answer

Display Your Video First Frame as Thumbnail:

Add preload="metadata" to your video tag and the second of the first frame #t=0.5 to your video source:

_x000D_

<video width="400" controls="controls" preload="metadata">_x000D_
  <source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">_x000D_
</video>

_x000D_

User · Answer

1  add the below jquery    thumbnail on  click   function e    e preventDefault     src   src   amp autoplay 1      src  the original URL for embedding    videoContainer empty   append   iframe clone   attr   src   src          iframe  the original iframe for embedding         note  in the first src  shown  add the original youtube link   2  edit the iframe tag as    lt iframe width  1280  height  720  src  https   www youtube com embed nfQHF87vY0s autoplay 1  frameborder  0  allowfullscreen gt  lt  iframe gt    note  copy paste the youtube video id after the embed  in the iframe src

User · Answer

x000D   x000D   lt video width  400  controls  controls  preload  metadata  gt  x000D     lt source src  https   www youtube com watch v Ulp1Kimblg0  gt  x000D   lt  video gt  x000D   x000D   x000D

User · Answer

That seems to be an extra image being shown there    You can try using this   lt img src   images image of video png  alt  image    gt     write your code for the video here      Now using jQuery play the video and hide the image as     img   click function          this  hide         use the parameters to play the video now

User · Answer

lt  php  thumbs dir    E  xampp htdocs uploads thumbs     videos   array    if  isset   POST  name        if   preg match   data         base64           POST  data     matches       die  error         data    matches 2     data   str replace            data     data   base64 decode  data     file    text jpg     dataname   file put contents  thumbs dir    file   data       gt    jscode  lt script type  text javascript  gt   var videos    lt    json encode  videos     gt    var video   document getElementById  video     video addEventListener  canplay   function           this currentTime   this duration   2      false    var seek   true   video addEventListener  seeked   function          if  seek             getThumb              false     function getThumb          seek   false       var filename   video src       var w   video videoWidth   video videoWidth   scaleFactor       var h   video videoHeight   video videoHeight   scaleFactor       var canvas   document createElement  canvas         canvas width   w       canvas height   h       var ctx   canvas getContext  2d         ctx drawImage video  0  0  w  h        var data   canvas toDataURL  image jpg         var xmlhttp   new XMLHttpRequest       xmlhttp onreadystatechange   function               if  xmlhttp readyState    4  amp  amp  xmlhttp status    200                           xmlhttp open  POST   location href  true        xmlhttp setRequestHeader  Content-type    application x-www-form-urlencoded         xmlhttp send  name     encodeURIComponent filename      amp data     data        function failed e            video playback failed - show a message saying why      switch  e target error code             case e target error MEDIA ERR ABORTED               console log  You aborted the video playback                  break           case e target error MEDIA ERR NETWORK               console log  A network error caused the video download to fail part-way                  break           case e target error MEDIA ERR DECODE               console log  The video playback was aborted due to a corruption problem or because the video used features your browser did not support                   break            case e target error MEDIA ERR SRC NOT SUPPORTED                console log  The video could not be loaded  either because the server or network failed or because the format is not supported                   break            default                console log  An unknown error occurred                   break                 lt  script gt    Html  lt div gt       lt video   id  video  src  1499752288 mp4  autoplay  true   onerror  failed event   controls  controls  preload  none  gt  lt  video gt   lt  div gt

User · Answer

Add poster  placeholder png  to the video tag    lt video width  470  height  255  poster  placeholder png  controls gt       lt source src  video mp4  type  video mp4  gt       lt source src  video ogg  type  video ogg  gt       lt source src  video webm  type  video webm  gt       lt object data  video mp4  width  470  height  255  gt       lt embed src  video swf  width  470  height  255  gt       lt  object gt   lt  video gt    Does that work

User · Answer

If you want a video first frame as a thumbnail  than you can use   Add  t 0 1 to your video source  like below   lt video width  320  height  240  controls gt     lt source src  video mp4 t 0 1  type  video mp4  gt   lt  video gt    NOTE  make sure about your video type ex  mp4  ogg  webm etc

[html] How to set the thumbnail image on HTML5 video?

Display Your Video First Frame as Thumbnail:

Examples related to html

Examples related to html5-video

Examples related to preloading