{"_id":"59fb30931a8c8d002837cecc","category":{"_id":"59fb30931a8c8d002837cec2","version":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-04T12:01:11.730Z","from_sync":false,"order":1,"slug":"basics","title":"Basics"},"user":"55e6dc8a2d0d3021000daf6e","project":"55e6dcb32d0d3021000daf70","parentDoc":null,"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"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-04T12:03:37.279Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Shortcut method\"\n}\n[/block]\nafterglow provides (until now) one shortcut method for quick api access.\n[block:api-header]\n{\n  \"type\": \"fn\",\n  \"title\": \"afterglow.play('playerid')\"\n}\n[/block]\nWhenever you want a player to start playing, you can use this shortcut method. Just provide the proper playerid.\n\nThis method is able to handle lightbox players and make them open up if needed.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"afterglow.play('myvideo');\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Player api\"\n}\n[/block]\nYou might want to control the player via Javascript after it has been initialized. afterglow provides an API which is easy to learn and use.\n\nMost of the functions are showcased in the player api example.\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Lightboxes are not players\",\n  \"body\": \"Please be aware that lightbox players are not initialized before the lightbox is opened. So it is not possible to access their players before launching the lightbox. All of the following api methods will only work when the player has been initialized properly.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"fn\",\n  \"title\": \"afterglow.getPlayer('playerid')\"\n}\n[/block]\nBefore using the player, you will always have to get it from afterglow. Let's imagine you had a video with the id 'myvideo'. It gets initialized on launch and is available like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"afterglow.getPlayer('myvideo');\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nYou could store this in a variable or use it like this for further actions:\n[block:api-header]\n{\n  \"type\": \"fn\",\n  \"title\": \"play()\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Start video playback\\nafterglow.getPlayer('myvideo').play();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis method will start video playback if the video is currently paused. \n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Not supported on mobile devices\",\n  \"body\": \"On mobile devices, this method will (probably) not work. They try to prevent automatic playback actions in order to save their user's bandwidth. Depending on things like time since the initiation or current network status (wifi or not), it might work.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"fn\",\n  \"title\": \"pause()\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Pause video playback\\nafterglow.getPlayer('myvideo').pause();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis method will pause video playback if the video is currently playing.\n[block:api-header]\n{\n  \"type\": \"fn\",\n  \"title\": \"paused()\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Check wether or not the video is currently playing\\nvar isPaused = afterglow.getPlayer('myvideo').paused();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"fn\",\n  \"title\": \"requestFullscreen()\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Try to enter fullscreen playback\\nafterglow.getPlayer('myvideo').requestFullscreen();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis method will try to enter fullscreen mode. This will work depending on the users preferences.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Use SSL for your videos\",\n  \"body\": \"Several major browsers will stop allowing fullscreen for videos that are not served via HTTPS.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"fn\",\n  \"title\": \"exitFullscreen()\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Exit fullscreen playback\\nafterglow.getPlayer('myvideo').exitFullscreen();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis method will exit fullscreen playback mode.\n[block:api-header]\n{\n  \"type\": \"fn\",\n  \"title\": \"isFullscreen()\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Check for fullscreen\\nvar isCurrentlyFullscreen = afterglow.getPlayer('myvideo').isFullscreen();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis method returns *true* or *false*, depending on wether or not the player is currently in fullscreen mode.\n[block:api-header]\n{\n  \"type\": \"fn\",\n  \"title\": \"volume( float )\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Set the volume to .5\\nafterglow.getPlayer('myvideo').volume(.5);\\n\\n// Get the current volume level\\nvar currentVolume = afterglow.getPlayer('myvideo').volume();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis method will set the volume to a given float value (0 is muted, 1 is max volume). If you don't pass a value, it will return the current volume level.\n[block:api-header]\n{\n  \"type\": \"fn\",\n  \"title\": \"duration()\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Get the duration of the currently loaded video\\nvar duration = afterglow.getPlayer('myvideo').duration();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis method will give you the duration of the currently loaded video in seconds (float).\n[block:api-header]\n{\n  \"type\": \"fn\",\n  \"title\": \"currentTime( float )\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Set the current playback position to 11 seconds\\nafterglow.getPlayer('myvideo').currentTime(11);\\n\\n// Get the current playback time\\nvar currentPlaybackTime = afterglow.getPlayer('myvideo').currentTime();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis method will set the current playback time to a given time in seconds, provided as float value. If you don't provide a value, it will return the current playback time in seconds (float).\n[block:api-header]\n{\n  \"type\": \"fn\",\n  \"title\": \"remainingTime()\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Get the remaining time\\nvar remainingSeconds = afterglow.getPlayer('myvideo').remainingTime(); \",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis method returns the remaining time to the end of the current video in seconds (float).\n[block:api-header]\n{\n  \"type\": \"fn\",\n  \"title\": \"ended()\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Check if the video playback is finished\\nvar ended = afterglow.getPlayer('myvideo').ended();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis method will return boolean *true* if the video playback is finished or *false* if it isn't.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"There are even more functions\",\n  \"body\": \"As the `getPlayer()` method returns the raw video.js object which is created by afterglow, there are some other functions available. You can get an overview at [their API documentation](https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md). \\n\\nWe covered the most important functions here but the other ones (well, most of them) will work as well.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Events\"\n}\n[/block]\nAs result of the development process, there is now an event system that will allow you to bind anything you want to certain events. These are not part of video.js, so events won't be bound using the `getPlayer()` method. See [the events documentation](doc:events)  to learn more about events.","excerpt":"This page tells you how to access a player element via afterglow's Javascript API.","slug":"api","type":"basic","title":"Javascript API"}

Javascript API

This page tells you how to access a player element via afterglow's Javascript API.

[block:api-header] { "type": "basic", "title": "Shortcut method" } [/block] afterglow provides (until now) one shortcut method for quick api access. [block:api-header] { "type": "fn", "title": "afterglow.play('playerid')" } [/block] Whenever you want a player to start playing, you can use this shortcut method. Just provide the proper playerid. This method is able to handle lightbox players and make them open up if needed. [block:code] { "codes": [ { "code": "afterglow.play('myvideo');", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Player api" } [/block] You might want to control the player via Javascript after it has been initialized. afterglow provides an API which is easy to learn and use. Most of the functions are showcased in the player api example. [block:callout] { "type": "danger", "title": "Lightboxes are not players", "body": "Please be aware that lightbox players are not initialized before the lightbox is opened. So it is not possible to access their players before launching the lightbox. All of the following api methods will only work when the player has been initialized properly." } [/block] [block:api-header] { "type": "fn", "title": "afterglow.getPlayer('playerid')" } [/block] Before using the player, you will always have to get it from afterglow. Let's imagine you had a video with the id 'myvideo'. It gets initialized on launch and is available like this: [block:code] { "codes": [ { "code": "afterglow.getPlayer('myvideo');", "language": "javascript" } ] } [/block] You could store this in a variable or use it like this for further actions: [block:api-header] { "type": "fn", "title": "play()" } [/block] [block:code] { "codes": [ { "code": "// Start video playback\nafterglow.getPlayer('myvideo').play();", "language": "javascript" } ] } [/block] This method will start video playback if the video is currently paused. [block:callout] { "type": "danger", "title": "Not supported on mobile devices", "body": "On mobile devices, this method will (probably) not work. They try to prevent automatic playback actions in order to save their user's bandwidth. Depending on things like time since the initiation or current network status (wifi or not), it might work." } [/block] [block:api-header] { "type": "fn", "title": "pause()" } [/block] [block:code] { "codes": [ { "code": "// Pause video playback\nafterglow.getPlayer('myvideo').pause();", "language": "javascript" } ] } [/block] This method will pause video playback if the video is currently playing. [block:api-header] { "type": "fn", "title": "paused()" } [/block] [block:code] { "codes": [ { "code": "// Check wether or not the video is currently playing\nvar isPaused = afterglow.getPlayer('myvideo').paused();", "language": "javascript" } ] } [/block] [block:api-header] { "type": "fn", "title": "requestFullscreen()" } [/block] [block:code] { "codes": [ { "code": "// Try to enter fullscreen playback\nafterglow.getPlayer('myvideo').requestFullscreen();", "language": "javascript" } ] } [/block] This method will try to enter fullscreen mode. This will work depending on the users preferences. [block:callout] { "type": "warning", "title": "Use SSL for your videos", "body": "Several major browsers will stop allowing fullscreen for videos that are not served via HTTPS." } [/block] [block:api-header] { "type": "fn", "title": "exitFullscreen()" } [/block] [block:code] { "codes": [ { "code": "// Exit fullscreen playback\nafterglow.getPlayer('myvideo').exitFullscreen();", "language": "javascript" } ] } [/block] This method will exit fullscreen playback mode. [block:api-header] { "type": "fn", "title": "isFullscreen()" } [/block] [block:code] { "codes": [ { "code": "// Check for fullscreen\nvar isCurrentlyFullscreen = afterglow.getPlayer('myvideo').isFullscreen();", "language": "javascript" } ] } [/block] This method returns *true* or *false*, depending on wether or not the player is currently in fullscreen mode. [block:api-header] { "type": "fn", "title": "volume( float )" } [/block] [block:code] { "codes": [ { "code": "// Set the volume to .5\nafterglow.getPlayer('myvideo').volume(.5);\n\n// Get the current volume level\nvar currentVolume = afterglow.getPlayer('myvideo').volume();", "language": "javascript" } ] } [/block] This method will set the volume to a given float value (0 is muted, 1 is max volume). If you don't pass a value, it will return the current volume level. [block:api-header] { "type": "fn", "title": "duration()" } [/block] [block:code] { "codes": [ { "code": "// Get the duration of the currently loaded video\nvar duration = afterglow.getPlayer('myvideo').duration();", "language": "javascript" } ] } [/block] This method will give you the duration of the currently loaded video in seconds (float). [block:api-header] { "type": "fn", "title": "currentTime( float )" } [/block] [block:code] { "codes": [ { "code": "// Set the current playback position to 11 seconds\nafterglow.getPlayer('myvideo').currentTime(11);\n\n// Get the current playback time\nvar currentPlaybackTime = afterglow.getPlayer('myvideo').currentTime();", "language": "javascript" } ] } [/block] This method will set the current playback time to a given time in seconds, provided as float value. If you don't provide a value, it will return the current playback time in seconds (float). [block:api-header] { "type": "fn", "title": "remainingTime()" } [/block] [block:code] { "codes": [ { "code": "// Get the remaining time\nvar remainingSeconds = afterglow.getPlayer('myvideo').remainingTime(); ", "language": "javascript" } ] } [/block] This method returns the remaining time to the end of the current video in seconds (float). [block:api-header] { "type": "fn", "title": "ended()" } [/block] [block:code] { "codes": [ { "code": "// Check if the video playback is finished\nvar ended = afterglow.getPlayer('myvideo').ended();", "language": "javascript" } ] } [/block] This method will return boolean *true* if the video playback is finished or *false* if it isn't. [block:callout] { "type": "info", "title": "There are even more functions", "body": "As the `getPlayer()` method returns the raw video.js object which is created by afterglow, there are some other functions available. You can get an overview at [their API documentation](https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md). \n\nWe covered the most important functions here but the other ones (well, most of them) will work as well." } [/block] [block:api-header] { "title": "Events" } [/block] As result of the development process, there is now an event system that will allow you to bind anything you want to certain events. These are not part of video.js, so events won't be bound using the `getPlayer()` method. See [the events documentation](doc:events) to learn more about events.