Electroteque Media

Video Snapshot Image Resizing

Multiple image sizes with Video Snapshot

This example demonstrates resizing multiple images including thumbnails with the high quality image resizer.

To enable resizing configure the dimensions config with multiple width sizes.

    <div class="flex w-full h-auto my-auto">
          <div id="resizing" class="is-snapshot"></div>
  </div>

  <script type="text/javascript">

  	var player = jwplayer("resizing").setup({
    "aspectratio": "16:9",
    "playbackRateControls": true,
    "plugins": {
        "../../js/snapshot-8.0.0.js": {
            "dimensions": [
                {
                    "width": 600
                },
                {
                    "thumbnail": true,
                    "width": 180
                }
            ],
            "quality": 0.9,
            "serverurl": "https://api.electroteque.org/save",
            "tokenurl": "https://api.electroteque.org/token"
        }
    },
    "snapshotnames": [
        "test2.jpg",
        "test2-thumb.jpg"
    ],
    "sources": [
        {
            "file": "https://videos.electroteque.org/bitrate/elephants_dream_2000k.webm",
            "type": "webm"
        },
        {
            "file": "https://videos.electroteque.org/bitrate/elephants_dream_2000k.mp4",
            "type": "mp4"
        }
    ],
    "width": "100%"
});

player.on("capturecomplete", function(data) {
console.log("Capture Complete", data);
});

  </script>