{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","settings":"","params":[],"results":{"codes":[]}},"next":{"description":"","pages":[]},"title":"Player","type":"basic","slug":"player","excerpt":"","body":"Embedly's `platform.js` ships with a lightweight version of [Player.js](doc:playerjs) to make it easy to interact with Cards and Embedly Iframes. Instead of having to include multiple libraries and this makes it simple to interact with the media.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Make sure `platform.js` is installed!\",\n  \"body\": \"Intergrations require platform.js to be installed on the page, you can learn how to install it [here](doc:playerjs)\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Quick Start\"\n}\n[/block]\nIt's a rather simple integration. It looks like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"embedly('player', function(player){\\n  console.log(player.url) // URL of the media that we are operating on.\\n\\n  // When the user pauses a video, perform an action.\\n  player.on('pause', function(){\\n    //display modal.\\n  });\\n\\n  // Autoplay all the videos that support Player.js\\n  player.play()\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe player callback is only called if the Card or iframe supports player.js and is ready to accept calls. if supports the following methods\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Demo\"\n}\n[/block]\nHere's a quick demo of using the player method to control both a Card and a Media Iframe.\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Ffexnhqbd%2F%3Fheight%3D800%26tabs%3Dresult%2Cjs%2Chtml%2Ccss%2Cresources&src=https%3A%2F%2Fjsfiddle.net%2Ffexnhqbd%2Fembedded%2Fresult%2Cjs%2Chtml%2Ccss%2Cresources%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\\\" width=\\\"600\\\" height=\\\"800\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://jsfiddle.net/fexnhqbd/?height=800&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[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Events\"\n}\n[/block]\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":2,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"56f17465dbe4cc1700a66a7a","__v":1,"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"},"user":"564de2b4fe07a81700b5c3a4","project":"564de2dbfe07a81700b5c3a5","category":{"sync":{"isSync":false,"url":""},"pages":["564e0de843817f17002a5ecc","564e0e5ea910003500a0ca38","564e19e3bc4e172d00b9534e","56f168612a85600e00ea3dcb","56f17465dbe4cc1700a66a7a"],"title":"JavaScript","slug":"javascript","order":2,"from_sync":false,"reference":false,"_id":"564df317826645210097a890","project":"564de2dbfe07a81700b5c3a5","__v":5,"createdAt":"2015-11-19T16:04:39.832Z","version":"564de2dbfe07a81700b5c3a8"},"createdAt":"2016-03-22T16:35:49.837Z","githubsync":""}

Documentation

API

JavaScript

Player.js

Tutorials

Video

Integrations

Player

Embedly's `platform.js` ships with a lightweight version of [Player.js](doc:playerjs) to make it easy to interact with Cards and Embedly Iframes. Instead of having to include multiple libraries and this makes it simple to interact with the media. [block:callout] { "type": "info", "title": "Make sure `platform.js` is installed!", "body": "Intergrations require platform.js to be installed on the page, you can learn how to install it [here](doc:playerjs)" } [/block] [block:api-header] { "type": "basic", "title": "Quick Start" } [/block] It's a rather simple integration. It looks like this: [block:code] { "codes": [ { "code": "embedly('player', function(player){\n console.log(player.url) // URL of the media that we are operating on.\n\n // When the user pauses a video, perform an action.\n player.on('pause', function(){\n //display modal.\n });\n\n // Autoplay all the videos that support Player.js\n player.play()\n});", "language": "javascript" } ] } [/block] The player callback is only called if the Card or iframe supports player.js and is ready to accept calls. if supports the following methods [block:api-header] { "type": "basic", "title": "Demo" } [/block] Here's a quick demo of using the player method to control both a Card and a Media Iframe. [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Ffexnhqbd%2F%3Fheight%3D800%26tabs%3Dresult%2Cjs%2Chtml%2Ccss%2Cresources&src=https%3A%2F%2Fjsfiddle.net%2Ffexnhqbd%2Fembedded%2Fresult%2Cjs%2Chtml%2Ccss%2Cresources%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\" width=\"600\" height=\"800\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://jsfiddle.net/fexnhqbd/?height=800&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] **``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') });