Presentation from OpenCms Days 2014. This session covers how we at componio accomplished turning OpenCms 9 into a video tube and which pitfalls we fell into but you should avoid. You will learn how different software products such as OpenCms, JWplayer and ownCloud make for a nice video delivery platform. Moreover we will touch OpenCms features such as the subscription engine, the content relationship engine and customized detail pages together with an extension to Metamesh's RFS-Driver. All these ingredients form the foundation for individually crafted but automatically aggregated video tubes. The final result is not as powerful as the well-known video portals but nonetheless a very good offering for OpenCms-centric installations.

2. OpenCms: A video tube?
Fabian Huschka
componio GmbH
componio@componio.net
http://www.componio.net

3. Video what?
01

4. Video what?

5. Video what?

6. Video what?

7. Video what?
Stockholms tunnelbana?
What happened to “video tube”?

8. Video what?

9. Video what?
Hej, I am a video clip

10. Video what?
I am loving to ride it.
But mind the gap!
Hej, I am a video clip

11. Video what?
Me too! Love the funny
conversations every morning!
I am loving it.
But mind the gap!
Hej, I am a video clip

12. Video what?

13. Video what?

14. Video what?

15. Video what?
Name: OpenCms
Operated: Alkacon GmbH
Name: SkinnDriva
Operated: componio GmbH

16. Video what?
Name: OpenCms
Operated: Alkacon GmbH
Name: SkinnDriva
Operated: componio GmbH

17. Video what?
Name: OpenCms
Operated: Alkacon GmbH
Name: SkinnDriva
Operated: componio GmbH
Intersection

18. Translate
Does this lead anywhere?

19. Video what?
Sure, it even computes
• Line = Video channel
• Train = Video
• Train Passengers = Subscribers
• Conversations = Video likes, comments, ...
• Intersections = Cross post/Content sharing

20. Video what?
OpenCms: Top down approach
• Store video data in the VFS of OpenCms
• Use HTML5 video tag to render videos
• OpenCms CRE to handle subscriptions
• Use rating, comment and social equity container
element (CEL) to enrich UX

21. OpenCms and videos
02

22. OpenCms and videos
A typical video

23. OpenCms and videos
A typical video
• Monkaa is a blue furred, pink faced monkey who
consumes a crystallized meteorite, making Monkaa
invincibly strong and too hot to handle. Exploring his
superpower Monkaa zooms into an unexplored
universe.
• Size: ~152 MB
• Download:
https://cloud.blender.org/open-movie/monkaa/

24. OpenCms and videos
Heap anyone?
1200
1000
800
600
400
200
0
Initial Installation Upload Publish Restart Publish Copy Publish Overwrite Publish
Actions
Max Heap
MB

25. OpenCms and videos
Heap anyone?
Initial Installation Upload Publish Restart Publish Copy Publish Overwrite Publish
1200
1000
800
600
400
200
0
-200
Actions
Upload Delta DB RAM Max Heap
MB

26. OpenCms and videos
Heap anyone?
Initial Installation Upload Publish Restart Publish Copy Publish Overwrite Publish
1200
1000
800
600
400
200
0
-200
Actions
Upload Delta DB RAM Max Heap
MB

27. OpenCms and videos
Heap anyone?
Initial Installation Upload Publish Restart Publish Copy Publish Overwrite Publish
1200
1000
800
600
400
200
0
-200
Actions
Upload Delta DB RAM Max Heap
MB
java.lang.OutOfMemoryError: Java heap space

28. OpenCms and videos
Solution
• Store videos externally
– e.g. RFS, we have chosen ownCloud
• Introduce a proxy element in OpenCms
– simple structured content CEL
• Integrate external storage with special driver
– e.g. metamesh's RFS driver

29. HTML5 and video codecs
03

30. Better:
HTML5 video codec quirks
03

31. HTML5 and video codecs
From the w3c wiki
• The HTML5 specification does not require a video
codec to be supported by all user agents. Thus, one
need to provide alternate sources to ensure proper user
experience in the existing user agents. Using
Ogg/Theora/Vorbis and MP4/H.264/AAC seems to
cover most of the cases out there (if not all). However,
Ogg/Theora/Vorbis is being replaced in favor of WebM
nowadays.

32. HTML5 and video codecs
Solution
• Use a versatile and standard conform video player
– JWPlayer in our case
– Ensures proper HTML code generation
– Hides complexity while offering editor freedom (e.g.
aspect ratio, volume, controls)
• Encode videos with FLV, H.264 and VP8
• Make a wish that the video war is soon over –
the browser war has been bloody enough

33. Channels / Subscriptions
04

34. Channels / Subscriptions
CRE FTW!
• OpenCms subscription API (from 8.5.x)
• Associate individual CMS resources with OpenCms
users
• Two major use cases:
– Personalization
● Users can subscribe their favourite content
● Subscription status can be shown wherever appropriate
– Notifications
● Notify users of fresh/updated content

35. Channels / Subscriptions
Channels
• OpenCms categories allow for arbitrary
taxonomies
• A set of categories defines a channel
• Subscription engine allows to subscribe and
unsubscribe resources
• CRE allows to find resources for specific
categories

36. Channels / Subscriptions
Solution
• Dedicated CEL to list available channels
• Video (proxy element) gets associated with a channel
via categories
– Can be easily a member of many channels
– Harmonizes with Subscription API (resources need to
be served by the VFS vs. RFS)
• Channel subscriptions are stored as “Additional User
Information”

37. Channels / Subscriptions
Solution
• Enhanced subscription engine to speed up channel
look-up
– OBS: The subscription API does not offer an efficient
way to accomplish this
– OBS: Need to extra check if resources are deleted or
expired
– makes heavy use of SOLR
– Custom SQL queries an POJOs to speed up lookup
of user channel subscriptions

38. Putting it all together
05

39. Putting it all together
Channel overview

40. Putting it all together
Channel Content

41. In a nutshell
OpenCms + extra Spice =
a video tube with potential

42. References
Appendix
• Photo copyright
– Empty Subway Tunnel, © alex_black – Fotolia.com
– Train leaving Radhuset metro station in Stockholm,
© Leonid Andronov - Fotolia.com
• Theme engine
– SkinnDriva, http://www.skinndriva.com
• Video player
– JWPlayer, http://www.jwplayer.com/