The document discusses integrating Vimeo video capabilities into Adobe Experience Manager (AEM). It provides an overview of Vimeo and how it differs from YouTube. The integration involves creating a Vimeo app, configuring authentication to retrieve an access token, customizing the AEM content finder to search Vimeo, and developing a Vimeo component to display videos within AEM. The demo shows this integration in action. Areas for further improvement include fully managing videos from within AEM rather than relying on the external Vimeo interface.

1. www.tothenew.com
vimeo INTEGRATION
(By Manisha Bano)

2. www.tothenew.com
Objective
“Provide a superior authoring experience for AEM content authors while
working with Video sharing apps like vimeo.”

3. www.tothenew.com
● What is Vimeo
● Difference between youtube and vimeo
● How vimeo works
● How vimeo integrates with AEM
● Demo
Agenda

4. www.tothenew.com
What is Vimeo?
● Vimeo is video + me
● Vimeo is a video sharing platform that was launched in November 2004 by a
group of filmmakers who wanted to share their creative work and personal
moments from their lives
● It differs from other web video sharing sites because of its “artsy”
distinctiveness, that's why it is very much known specifically for creative
artistry

5. www.tothenew.com

6. www.tothenew.com
● Audience Size
○ 1 Billion Vs 170 Million
● Advertising
○ True View Vs None
● Community
○ Everyone Vs Professional
● Video Player Customization
○ A little Vs A lot
● Price
○ Zero Vs Various
● Privacy Option
○ Little Vs Many
● Video SEO
○ More Vs Less

7. www.tothenew.com
● Domain
○ Network is designed to keep people on site Vs Can use own domain
● Quality Content
○ Popular Vs Great
● Customer service or support
○ Very less Vs Supports
● Comments
○ The trailer park of the Internet Vs Friendlier comments

8. www.tothenew.com
HOW
Works

9. www.tothenew.com
Register App in
developer console
Uses
Access TokenEndpoints
Fetch Data
➔ Videos
➔ Channels
➔ Followers
➔ Likes, etc
Authentication
process
H
I
T
s

10. www.tothenew.com
Application Client Application Client Application Client
Asks for Authentication
Asks for Authentication

11. www.tothenew.com
V
I
M
E
O
A
E
M

12. www.tothenew.com
Steps of Integration
● Create an app in developer console of vimeo
● Create Configuration page
● Authorize your app and get the access token
● Use this access token to hit any of the endpoint and get the related data.
● Create a customize contentfinder tab
● Create a vimeo component

13. www.tothenew.com
Steps of Integration
● Create an app in developer console of vimeo
● Create Configuration page
● Authorize your app and get the access token
● Use this access token to hit any of the endpoint and get the related data.
● Create a customize contentfinder tab
● Create a vimeo component

14. www.tothenew.com

15. www.tothenew.com
Steps of Integration
● Create an app in developer console of vimeo
● Create Configuration page
● Authorize your app and get the access token
● Use this access token to hit any of the endpoint and get the related data.
● Create a customize contentfinder tab
● Create a vimeo component

16. www.tothenew.com
Go to miscadmin
Create a new page
This page will look
like
Add your own configuration from
here or from miscadmin

17. www.tothenew.com
Steps of Integration
● Create an app in developer console of vimeo
● Create Configuration page
● Authorize your app and get the access token
● Use this access token to hit any of the endpoint and get the related data.
● Create a customize contentfinder tab
● Create a vimeo component

18. www.tothenew.com
Click here to get the Authorization Grant

19. www.tothenew.com
This Config Page
● Stores info from the dialog
○ Client Id and Secret etc
● Authenticate App
○ logic to authenticate against vimeo using oAuth 2
○ get Access Token
● Create Polling Agent
○ Under The jcr:content node of config page
○ Polls the importer service to get the
● has Dam path where all metadata has stored
These Should be same

20. www.tothenew.com
Steps of Integration
● Create an app in developer console of vimeo
● Create Configuration page
● Authorize your app and get the access token
● Use this access token to hit any of the endpoint and get the related data.
● Create a customize contentfinder tab
● Create a vimeo component

21. www.tothenew.com
Steps of Integration
● Create an app in developer console of vimeo
● Create Configuration page
● Authorize your app and get the access token
● Use this access token to hit any of the endpoint and get the related data.
● Create a customize contentfinder tab
● Create a vimeo component

22. www.tothenew.com
Contentfinder needs two things
A JSON A js File

23. www.tothenew.com
Steps of Integration
● Create an app in developer console of vimeo
● Create Configuration page
● Authorize your app and get the access token
● Use this access token to hit any of the endpoint and get the related data.
● Create a customize contentfinder tab
● Create a component which will be dropped from the contentfinder

24. www.tothenew.com
Demo

25. www.tothenew.com
Objective
“Provide a superior authoring experience for AEM content authors while
working with Video sharing apps like vimeo.”
Further Improvement
● End to end video management from within AEM.
○ Current implementation relies on vimeo for video management
e.g. uploading, deletion, metadata update etc.
○ Current implementation could be extended to provide for a
console that allows author to manage videos without ever
leaving AEM interface.
● Exploiting Vimeo's feature of hosting videos from custom domain
(non vimeo)

26. www.tothenew.com