How to adjust thumbnail on HTML5 video?

Question

Is there a way to set a thumbnail on HTML5 video? I want to see some photos before the game. My code is as follows:

<video width="470" height="255" 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> 

Thank!

Answer 1

Add poster="placeholder.png" to the video tag.

 <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> 

It works?

Answer 2

Display the video of the first frame as a thumbnail:

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

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

Answer 3

If you want the first frame of the video to be miniature, you can use

 Add #t=0.1 to your video source, like below <video width="320" height="240" controls> <source src="video.mp4#t=0.1" type="video/mp4"> </video> 

NOTE. make sure your video type (ex: mp4, ogg, webm, etc.)

Answer 4

I found the solution that I got from your example and other examples, and did the following:

 <video id="video1" width="470" height="264" poster="video_poster.jpg" onclick="playPause()"> <source src="video.mp4" width="470" height="264" type="video/mp4" > <source src="video.webm" type="video/webm" > <source src="video.ogv" type="video/ogg" > <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="470" height="264" > <param name="movie" value="video.swf" > <param name="quality" value="high"> <param name="wmode" value="opaque"> <param name="swfversion" value="11.0.0.0"> <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. --> <param name="expressinstall" value="../../Scripts/expressInstall.swf"> <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="video.swf" width="500" height="500"> <!--<![endif]--> <param name="quality" value="high"> <param name="wmode" value="opaque"> <param name="swfversion" value="11.0.0.0"> <param name="expressinstall" value="../../Scripts/expressInstall.swf"> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> Unfortunately Your browser is old and does not support full video experience. </object> </video> <script> var myVideo=document.getElementById("video1"); var att=document.createAttribute("poster"); if (myVideo.error) { switch (myVideo.error.code) { case MEDIA_ERR_NETWORK:alert("Network error - please try again later.");break; case MEDIA_ERR_DECODE:alert("Video is broken.."); break; case MEDIA_ERR_SRC_NOT_SUPPORTED:alert("Sorry, your browser can't play this video."); break; } } else { function playPause() { if (myVideo.paused) { myVideo.play(); att.value=""; myVideo.setAttributeNode(att); } else myVideo.pause(); } } </script> 

Fantastic work. Thank!

Answer 5

It seems that an additional image is shown here.

You can try using this

 <img src="/images/image_of_video.png" alt="image" /> /* 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.. }) 

Answer 6

 <?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); } ?> //jscode <script type="text/javascript"> var videos = <?= json_encode($videos); ?>; 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 && xmlhttp.status == 200) { } } xmlhttp.open("POST", location.href, true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send('name=' + encodeURIComponent(filename) + '&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; } } </script> //Html <div> <video id="video" src="1499752288.mp4" autoplay="true" onerror="failed(event)" controls="controls" preload="none"></video> </div> 

Answer 7

 <video width="400" controls="controls" preload="metadata"> <source src="https://www.youtube.com/watch?v=Ulp1Kimblg0"> </video> 

Answer 8

1) add the below jquery:

 $thumbnail.on('click', function(e){ e.preventDefault(); src = src+'&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) change the iframe tag as follows:

 <iframe width="1280" height="720" src="https://www.youtube.com/embed/nfQHF87vY0s?autoplay=1" frameborder="0" allowfullscreen></iframe> 

Note: Copy and paste the YouTube video ID after embedding / in iframe src.