{"_id":"59fb352d44286f003a5ab6d2","project":"55e6dcb32d0d3021000daf70","version":{"_id":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","__v":2,"createdAt":"2017-11-02T14:49:55.750Z","releaseDate":"2017-11-02T14:49:55.750Z","categories":["59fb30931a8c8d002837cec1","59fb30931a8c8d002837cec2","59fb30931a8c8d002837cec3","59fb30931a8c8d002837cec4","59fb30931a8c8d002837cec5","59fb3502e786cb001c45ec9d"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1"},"category":{"_id":"59fb3502e786cb001c45ec9d","project":"55e6dcb32d0d3021000daf70","version":"59fb30931a8c8d002837cec0","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-11-02T15:08:50.478Z","from_sync":false,"order":9999,"slug":"recipes","title":"Recipes"},"user":"55e6dc8a2d0d3021000daf6e","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-11-02T15:09:33.993Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":999,"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).","excerpt":"","slug":"remember-playback-position-of-a-lightbox-player-when-closed","type":"basic","title":"Remember playback position of a lightbox player when closed"}

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).