As part of HANA Cloud Portal great deliveries, we launched this month the Video Widget. Now when you create site, or edit an existing one, you can also play videos on your site.
Functional Overview
Authors use the Video Player widget to publish video content using a numbers of different video players.
The Video Player widget enables you to upload video content taken from Kaltura, YouTube and Vimeo for regular viewing by end users. You can add the content to the widget by entering the video link, or by pasting the embed HTML code directly into the widget.
Supported formats:
The video player supports 3 types of video platform:
- Kaltura -Kaltura and SAP have teamed to bring Kaltura’s video solutions to SAP’s HANA Cloud Portal customers. Kaltura is a member of the SAP HANA Cloud Applications Partner program and has integrated its video solution with the SAP HANA Cloud Portal to enhance the value of the portal experience with the seamless addition of video and rich media content. (http://corp.kaltura.com/). Their products allow publishers and content owners to publish, manage, monetize and analyze their video and other rich-media content. The main components of Kaltura's online video platform are based on open-source software, enabling any site to add advanced video and rich-media capabilities.
- Youtube – Famous Google Video platform on which users can upload, view and share videos.
- Vimeo – U.S.-based video-sharing website on which users can upload, share and view videos.
How to add video to the site?
1. In the side-panel menu, open the Content Catalog which include all the available widgets.
2. Locate the Video Player widget, and add it to the page by double click or by drag and drop.
3. In the Video Link field, enter either the video URL or the embed HTML
4. Click Confirm. The video is played in the widget.
Once your video is loaded, you can change it by clicking Edit from the <icon> (Widget options) menu, and entering a different video link in the Edit dialog box.
Technical Overview
The Video Player was developed as openSocial Widget.
The widget points to specXML, which has the following structure:
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="video">
<Locale messages="../../translations/video.xml"/>
<Require feature="opensocial-0.9"/>
<Require feature="views"/>
<Require feature="core.prefs"/>
<Require feature="gadgetprefs"/>
<Require feature="opensocial-jquery"/>
<Require feature="sap-menu"/>
<Require feature="sap-translate"/>
</ModulePrefs>
<Content type="html" view="authoring, consumption, mobile, preview, default">
<![CDATA[
<link rel="stylesheet" type="text/css" href="../../content/video/video.css" media="all"/>
<script type="text/javascript" src="../../content/video/video-consumption.js"></script>
<div id="container">
<div class="player"></div>
<div class="prefs"></div>
</div>
]]>
</Content>
<Content type="html" view="authoring">
<![CDATA[
<script type="text/javascript" src="../../content/video/video-consumption.js"></script>
<script type="text/javascript" src="../../content/video/video-authoring.js"></script>
]]>
</Content>
</Module>
Some technical remarks -
- video-authoring.js is a js file that contains the logic of the authoring mode.
- video-consumption.js is a js file that contains the logic of the consumption mode.
- The widget data is saved in gadgetPrefs. Same implementation like existing URL widget.
- The validation of the input is client side validation. The original input will be seen when the user clicks on "edit", but eventually, the embed url will be extracted out of the user's input, per each player. We have implemented function extractEmbedURL(videoInput) gets videoInput as a string and returns the embed URL only as you can see in the table below.
- The widget is translated.
Your next step should be to open your trial account and try it by yourself :wink:
Inbal Sabag
- SAP Managed Tags:
1 Comment
