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>
