JavaScript - Video Thumbnails and Control

From NoskeWiki
Jump to navigation Jump to search
Demonstration of interface

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