{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]},"settings":""},"next":{"description":"","pages":[]},"title":"Player.js","type":"basic","slug":"playerjs","excerpt":"","body":"Player.js allows developers to programmatically control Embedly embeds. You can tell a video to play, pause, seek and listen to events with JavaScript. \n\nIt's pretty cool. Here's at quick example:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"// Use jQuery to find all the embedly iframes on the page.\\n$('iframe.embedly-embed').each(function(){\\n // initialize the player.\\n\\tvar player = new playerjs.Player(this);\\n \\n // Wait for the player to be ready.\\n player.on('ready', function(){\\n \\n // Listen to the play event.\\n player.on('play', function(){\\n \\t// Tell Google analytics that a video was played.\\n window.ga('send', 'event', 'Video', 'Play');\\n });\\n \\n //autoplay the video.\\n player.play();\\n });\\n});\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\n\n[block:callout]\n{\n \"type\": \"success\",\n \"title\": \"Player.js Resources\",\n \"body\": \"Player.js is an open source specification that anyone can use. Here are some additional resources:\\n\\nSite: [playerjs.io](http://playerjs.io/)\\nCode: [github.com/embedly/player.js](https://github.com/embedly/player.js)\"\n}\n[/block]\n\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Install\"\n}\n[/block]\nYou need to include Player.js on your site:\n\n bower install player.js\n\nOr include the script tag on your site directly.\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"//cdn.embed.ly/player-0.0.11.min.js\\\"></script>\",\n \"language\": \"html\"\n }\n ]\n}\n[/block]\n\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Ready\"\n}\n[/block]\nBecause of the dance that we need to do between both iframes, you should always wait till the ready events fire before interacting with the player object. But good news, the player will internally queue messages until ready is called.\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"var iframe = document.querySelector('iframe.embedly-embed');\\n\\nvar player = new playerjs.Player(iframe);\\n\\nplayer.on(playerjs.Events.PLAY, function(\\n console.log('play');\\n));\\n\\nplayer.on('ready', function(){\\n\\t// Seek to 20 seconds in.\\n player.setCurrentTime(20);\\n});\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\n\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Demo\"\n}\n[/block]\nEmbeds are resource intensive to load, often times you want to just show a placeholder and autoplay the video when the video loads. Here's how you would do that with Player.js. Click play below.\n[block:embed]\n{\n \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2F4rbre2Lz%2F%3Fheight%3D400%26tabs%3Dresult%2Cjs%2Chtml%2Ccss%2Cresources&src=https%3A%2F%2Fjsfiddle.net%2F4rbre2Lz%2Fembedded%2Fresult%2Cjs%2Chtml%2Ccss%2Cresources%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\\\" width=\\\"600\\\" height=\\\"400\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n \"url\": \"https://jsfiddle.net/4rbre2Lz/?height=400&tabs=result,js,html,css,resources\",\n \"title\": \"Edit fiddle - JSFiddle\",\n \"favicon\": \"https://jsfiddle.net/favicon.png\"\n}\n[/block]\n\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Methods\"\n}\n[/block]\n**``player.play()``**: void\nPlay the media\n\n\n**``player.pause()``**: void\nPause the media\n\n\n**``player.getPaused(callback)``**: boolean\nDetermine if the media is paused\n\n player.getPaused(function(paused){\n console.log('Paused: '+paused);\n });\n\n\n\n**``player.mute()``**: void\nMute the media\n\n\n**``player.unmute()``**: void\nUnmute the media\n\n\n**``player.getMuted(callback)``**: boolean\nDetermine if the media is muted\n\n player.getMuted(function(muted){\n console.log('Muted: '+muted);\n });\n \n\n**``player.setVolume(volume)``**: void\nSet the volume. Value needs to be between 0-100\n\n player.setVolume(50);\n\n\n**``player.getVolume(callback)``**: number\nGet the volume. Value will be between 0-100\n\n player.getVolume(function(volume){\n console.log('Volume: '+volume);\n });\n\n\n**``player.getDuration(callback)``**: number\nGet the duration of the media is seconds\n\n player.getDuration(function(duration){\n console.log('Duration: '+duration);\n });\n\n\n**``player.setCurrentTime(seconds)``**: number\nPerform a seek to a particular time in seconds\n\n player.setVolume(10);\n\n\n**``player.getCurrentTime(callback)``**: number\nGet the current time in seconds of the video\n\n player.getCurrentTime(function(seconds){\n console.log('Current Time: '+seconds);\n });\n\n\n**``player.setLoop(bool)``**: boolean\nTell the media to loop continuously\n\n player.setLoop(true);\n\n\n**``player.getLoop(callback)``**: number\nReturn the loop attribute of the video\n\n player.getLoop(function(looped){\n console.log('Looped: '+looped);\n });\n\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Events\"\n}\n[/block]\nEvents that can be listened to.\n\n**``ready``**\nfired when the media is ready to receive commands. This is fired regardless of listening to the event. ``ready`` sets the stage for the rest of the interactions with the iframe.\n \n player.on('ready', function(){\n // autoplay the video.\n player.play();\n });\n\n\n**``timeupdate``**\nFires during playback\n\n player.on('timeupdate', function(data){\n // autoplay the video.\n console.log('Duration: '+ data.duration);\n console.log('Current Time: '+ data.seconds);\n });\n \n\n**``play``**\nFires when the video starts to play\n\n player.on('play', function(){\n console.log('played');\n });\n\n\n**``pause``**\nFires when the video is paused\n\n player.on('pause', function(){\n console.log('paused');\n });\n\n\n**``ended``**\nFires when the video has ended\n\n player.on('ended', function(){\n console.log('video ended');\n });\n\n\n**``error``**\nFires when something goes wrong\n\n player.on('ended', function(){\n alert('unable to play media')\n });","updates":[],"order":0,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"568bf4d8e662f40d00eee864","category":{"sync":{"isSync":false,"url":""},"pages":["568bf4d8e662f40d00eee864"],"title":"Player.js","slug":"playerjs","order":3,"from_sync":false,"reference":false,"_id":"564e5227c3553e0d003e53ba","project":"564de2dbfe07a81700b5c3a5","version":"564de2dbfe07a81700b5c3a8","__v":1,"createdAt":"2015-11-19T22:50:15.978Z"},"createdAt":"2016-01-05T16:52:40.817Z","parentDoc":null,"version":{"version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["564de2ddfe07a81700b5c3a9","564df317826645210097a890","564df3217c8f372b00b934df","564e5227c3553e0d003e53ba","5666dac5d784a70d00397bcb","56cd08ddd98d851d00c0c3bd","56e9a50946bfd60e008840a7","5718e37bf8f7de1900683fad","58c3308dfedf070f0043b72c","58ce99c75457d02300560c0a"],"_id":"564de2dbfe07a81700b5c3a8","project":"564de2dbfe07a81700b5c3a5","__v":10,"createdAt":"2015-11-19T14:55:23.838Z","releaseDate":"2015-11-19T14:55:23.837Z"},"__v":17,"githubsync":"","project":"564de2dbfe07a81700b5c3a5","user":"564de2b4fe07a81700b5c3a4"}