{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"settings":"","params":[]},"next":{"description":"","pages":[]},"title":"Remember playback position of a lightbox player when closed","type":"basic","slug":"remember-playback-position-of-a-lightbox-player-when-closed","excerpt":"","body":"Remembering the playback position of a video when the lightbox closes is quite simple using afterglow's event system.\n\nLet's assume you have this very basic lightbox player setup:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html>\\n  <head>\\n    <title>afterglow player</title>\\n    <script src=\\\"//cdn.jsdelivr.net/npm/afterglowplayer:::at:::1.x\\\"></script>\\n  </head>\\n  <body>\\n    <a class=\\\"afterglow\\\" href=\\\"#myvideo\\\">Launch lightbox</a>\\n    <video id=\\\"myvideo\\\" width=\\\"960\\\" height=\\\"540\\\">\\n    \\t<source type=\\\"video/mp4\\\" src=\\\"/path/to/myvideo.mp4\\\" />\\n    </video>\\n  </body>\\n<html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nAll you have to do to make the playback position sort of permanent when the lightbox closes, is this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var lastposition = 0;\\n\\nafterglow.on('myvideo', \\\"before-lightbox-close\\\", function(event) {\\n  // Store the playback time\\n  lastposition = event.player.currentTime();\\n});\\n\\nafterglow.on('myvideo', \\\"ready\\\", function(event) {\\n  // Load the playback time\\n  event.player.currentTime(lastposition);\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThat's it. If you wan't to play around with this, take a look at [this pen](https://codepen.io/moay/pen/vWLNMe).","updates":[],"order":999,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"59fb352d44286f003a5ab6d2","project":"55e6dcb32d0d3021000daf70","version":{"version":"1.1","version_clean":"1.1.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["59fb30931a8c8d002837cec1","59fb30931a8c8d002837cec2","59fb30931a8c8d002837cec3","59fb30931a8c8d002837cec4","59fb30931a8c8d002837cec5","59fb3502e786cb001c45ec9d"],"_id":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","createdAt":"2017-11-02T14:49:55.750Z","releaseDate":"2017-11-02T14:49:55.750Z","__v":2},"category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Recipes","slug":"recipes","order":9999,"from_sync":false,"reference":false,"_id":"59fb3502e786cb001c45ec9d","project":"55e6dcb32d0d3021000daf70","version":"59fb30931a8c8d002837cec0","createdAt":"2017-11-02T15:08:50.478Z","__v":0},"user":"55e6dc8a2d0d3021000daf6e","createdAt":"2017-11-02T15:09:33.993Z","githubsync":"","__v":0}

Documentation

Basics

Parameters

Examples

Advanced stuff

Recipes

Remember playback position of a lightbox player when closed

Remembering the playback position of a video when the lightbox closes is quite simple using afterglow's event system. Let's assume you have this very basic lightbox player setup: [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html>\n <head>\n <title>afterglow player</title>\n <script src=\"//cdn.jsdelivr.net/npm/afterglowplayer@1.x\"></script>\n </head>\n <body>\n <a class=\"afterglow\" href=\"#myvideo\">Launch lightbox</a>\n <video id=\"myvideo\" width=\"960\" height=\"540\">\n \t<source type=\"video/mp4\" src=\"/path/to/myvideo.mp4\" />\n </video>\n </body>\n<html>", "language": "html" } ] } [/block] All you have to do to make the playback position sort of permanent when the lightbox closes, is this: [block:code] { "codes": [ { "code": "var lastposition = 0;\n\nafterglow.on('myvideo', \"before-lightbox-close\", function(event) {\n // Store the playback time\n lastposition = event.player.currentTime();\n});\n\nafterglow.on('myvideo', \"ready\", function(event) {\n // Load the playback time\n event.player.currentTime(lastposition);\n});", "language": "javascript" } ] } [/block] That's it. If you wan't to play around with this, take a look at [this pen](https://codepen.io/moay/pen/vWLNMe).