JavaScript - Video Thumbnails and Control
Jump to navigation
Jump to search
About
NOTE: This page is a daughter page of: JavaScript
The video HTML element has several properties such as autoplay
, muted
, playbackRate
and more that you can play with. But what if you wanted to show a thumbnail of the video at a particular frame? I'm sure there are processor intensive ways to extract an image at a position within the video, but a nice hack is to add #t=2.0,2.1
to the end of the video url src and it will render between those frames. Play with the properties a little more and you effectively have a thumbnail. Here's code to achieve that:
Video Thumbnails and Control Example
<!doctype html>
<html lang="en">
<head>
<title>Video Preview Thumbnails</title>
<style>
.video-big {
width: 400px;
height: 400px;
}
</style>
<style>
.video-snippet {
width: 200px;
height: 200px;
pointer-events: none;
}
</style>
</head>
<body>
<video id="vid-all" controls="" autoplay="" muted="" name="media" class="video-big">
<source src="https://lh3.googleusercontent.com/EjBGelayfu5-lQhSxMkqlMPRuk2Gxxrm_ca7OlDFVQRzB5kAy4Wj_nLpVLljlBUXu94AcrHYKgI=m18" type="video/mp4">
</video>
<br>
<hr>
<br>
<video id="vid0" autoplay playsinline muted name="media" class="video-snippet">
<source src="https://lh3.googleusercontent.com/EjBGelayfu5-lQhSxMkqlMPRuk2Gxxrm_ca7OlDFVQRzB5kAy4Wj_nLpVLljlBUXu94AcrHYKgI=m18#t=0,0.2" type="video/mp4">
</video>
<video id="vid1" autoplay playsinline muted name="media" class="video-snippet">
<source src="https://lh3.googleusercontent.com/EjBGelayfu5-lQhSxMkqlMPRuk2Gxxrm_ca7OlDFVQRzB5kAy4Wj_nLpVLljlBUXu94AcrHYKgI=m18#t=2,2.2" type="video/mp4">
</video>
<video id="vid2" autoplay playsinline muted name="media" class="video-snippet">
<source src="https://lh3.googleusercontent.com/EjBGelayfu5-lQhSxMkqlMPRuk2Gxxrm_ca7OlDFVQRzB5kAy4Wj_nLpVLljlBUXu94AcrHYKgI=m18#t=4,4.2" type="video/mp4">
</video>
<video id="vid3" autoplay playsinline muted name="media" class="video-snippet">
<source src="https://lh3.googleusercontent.com/EjBGelayfu5-lQhSxMkqlMPRuk2Gxxrm_ca7OlDFVQRzB5kAy4Wj_nLpVLljlBUXu94AcrHYKgI=m18#t=6,6.2" type="video/mp4">
</video>
<script>
var vid = document.getElementById("vid-all");
vid.playbackRate = 5.0;
</script>
</body>
</html>
See Also
- JavaScript - other JavaScript examples.