{"_id":"568bf4d8e662f40d00eee864","category":{"_id":"564e5227c3553e0d003e53ba","project":"564de2dbfe07a81700b5c3a5","version":"564de2dbfe07a81700b5c3a8","__v":1,"pages":["568bf4d8e662f40d00eee864"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-11-19T22:50:15.978Z","from_sync":false,"order":3,"slug":"playerjs","title":"Player.js"},"parentDoc":null,"version":{"_id":"564de2dbfe07a81700b5c3a8","project":"564de2dbfe07a81700b5c3a5","__v":10,"createdAt":"2015-11-19T14:55:23.838Z","releaseDate":"2015-11-19T14:55:23.837Z","categories":["564de2ddfe07a81700b5c3a9","564df317826645210097a890","564df3217c8f372b00b934df","564e5227c3553e0d003e53ba","5666dac5d784a70d00397bcb","56cd08ddd98d851d00c0c3bd","56e9a50946bfd60e008840a7","5718e37bf8f7de1900683fad","58c3308dfedf070f0043b72c","58ce99c75457d02300560c0a"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"__v":17,"project":"564de2dbfe07a81700b5c3a5","user":"564de2b4fe07a81700b5c3a4","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-01-05T16:52:40.817Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"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    });","excerpt":"","slug":"playerjs","type":"basic","title":"Player.js"}

Documentation

API

JavaScript

Player.js

Tutorials

Video

Integrations

Player.js

Player.js allows developers to programmatically control Embedly embeds. You can tell a video to play, pause, seek and listen to events with JavaScript. It's pretty cool. Here's at quick example: [block:code] { "codes": [ { "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});", "language": "javascript" } ] } [/block] [block:callout] { "type": "success", "title": "Player.js Resources", "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)" } [/block] [block:api-header] { "type": "basic", "title": "Install" } [/block] You need to include Player.js on your site: bower install player.js Or include the script tag on your site directly. [block:code] { "codes": [ { "code": "<script type=\"text/javascript\" src=\"//cdn.embed.ly/player-0.0.11.min.js\"></script>", "language": "html" } ] } [/block] [block:api-header] { "type": "basic", "title": "Ready" } [/block] Because 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. [block:code] { "codes": [ { "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});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Demo" } [/block] Embeds 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. [block:embed] { "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>", "url": "https://jsfiddle.net/4rbre2Lz/?height=400&tabs=result,js,html,css,resources", "title": "Edit fiddle - JSFiddle", "favicon": "https://jsfiddle.net/favicon.png" } [/block] [block:api-header] { "type": "basic", "title": "Methods" } [/block] **``player.play()``**: void Play the media **``player.pause()``**: void Pause the media **``player.getPaused(callback)``**: boolean Determine if the media is paused player.getPaused(function(paused){ console.log('Paused: '+paused); }); **``player.mute()``**: void Mute the media **``player.unmute()``**: void Unmute the media **``player.getMuted(callback)``**: boolean Determine if the media is muted player.getMuted(function(muted){ console.log('Muted: '+muted); }); **``player.setVolume(volume)``**: void Set the volume. Value needs to be between 0-100 player.setVolume(50); **``player.getVolume(callback)``**: number Get the volume. Value will be between 0-100 player.getVolume(function(volume){ console.log('Volume: '+volume); }); **``player.getDuration(callback)``**: number Get the duration of the media is seconds player.getDuration(function(duration){ console.log('Duration: '+duration); }); **``player.setCurrentTime(seconds)``**: number Perform a seek to a particular time in seconds player.setVolume(10); **``player.getCurrentTime(callback)``**: number Get the current time in seconds of the video player.getCurrentTime(function(seconds){ console.log('Current Time: '+seconds); }); **``player.setLoop(bool)``**: boolean Tell the media to loop continuously player.setLoop(true); **``player.getLoop(callback)``**: number Return the loop attribute of the video player.getLoop(function(looped){ console.log('Looped: '+looped); }); [block:api-header] { "type": "basic", "title": "Events" } [/block] Events that can be listened to. **``ready``** fired 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. player.on('ready', function(){ // autoplay the video. player.play(); }); **``timeupdate``** Fires during playback player.on('timeupdate', function(data){ // autoplay the video. console.log('Duration: '+ data.duration); console.log('Current Time: '+ data.seconds); }); **``play``** Fires when the video starts to play player.on('play', function(){ console.log('played'); }); **``pause``** Fires when the video is paused player.on('pause', function(){ console.log('paused'); }); **``ended``** Fires when the video has ended player.on('ended', function(){ console.log('video ended'); }); **``error``** Fires when something goes wrong player.on('ended', function(){ alert('unable to play media') });