Skip to content

Integration manual

Jump to bottom Edit New page
Szaby Grünwald edited this page Feb 26, 2013 · 4 revisions

To get started binding the player into your HTML code, do the following:

Insert the javascript dependencies, the source code of the lime player and any optional plugins you'd like to use into the <head> tag:

    <script src="lib/jquery/jquery-1.7.1.js"></script>
    <script src="lib/underscoreJS/underscore.min.js"></script>
    <script type="text/javascript" src="lib/backboneJS/backbone.js"></script>
    <script type="text/javascript" src="lib/rdfquery/latest/jquery.rdfquery.debug.js"></script>
    <script type="text/javascript" src="lib/vie/vie-2.0.0.debug.js"></script>

	<!-- The lime player -->
	<script type="text/javascript" src="lib/utils.js"></script>
    <script src="lib/lime.js"></script>

    <!-- Lime player plugins -->
    <script src="lib/plugins/geonamesmapplugin.js"></script>
    <script src="lib/plugins/dbpediainfoplugin.js"></script>

Insert the Javascript and CSS of the video player (default: VideoJS)

    <!-- VideoJS player -->
    <script src="lib/videojs/video.js"></script>
    <link href="css/video-js.css" rel="stylesheet" />

Insert the default CSS of your video player and the lime player:

	<link rel="stylesheet" href='css/hoverbox.css' type="text/css" media="screen, projection" />
	<!--[if lte IE 7]><link rel="stylesheet" href='css/ie_fixes.css' type="text/css" media="screen, projection" /><![endif]-->
    <link href="css/screen.css" rel="stylesheet">

In the <body> tag insert the containers with an id for the video and for the annotation widgets.

    <div id="widget-container-1" class="widget-container vertical">&nbsp;</div>
    <div id="mainwrapper" align="center"></div>
    <div id="widget-container-2" class="widget-container vertical"> &nbsp;</div>

Initialize the video locators in the following structure. This will be used to create the video element.

    var locators = [
        {"source":"https://s3-eu-west-1.amazonaws.com/yoo.120/connectme/6306_519_20120508125738_ogg.ogv","type":"video/ogv"},
        {"source":"https://s3-eu-west-1.amazonaws.com/yoo.120/connectme/6306_519_20120508125738_standard.mp4","type":"video/mp4"},
        {"source":"https://s3-eu-west-1.amazonaws.com/yoo.120/connectme/6306_519_20120508125738_webm.webm","type":"video/webm"}
    ];

Load/initialize the annotations. The annotations follow the following format:

    var annotations = [
        {
            "annotation": { "type": "uri", "value": "http:\/\/connectme.at\/annotation\/577e5d16435dfc2a0d24223926477f82" },
            "resource": { "type": "uri", "value": "http:\/\/dbpedia.org\/resource\/Flachau" },
            "relation": { "type": "uri", "value": "http:\/\/connectme.at\/ontology#explicitlyMentions" },
            "fragment": { "type": "uri", "value": "https:\/\/s3-eu-west-1.amazonaws.com\/yoo.120\/connectme\/6306_519_20120508125738_standard.mp4#xywh=percent:38,52,23,23&t=2,5" },
            "type": { "type": "uri", "value": "http:\/\/www.openannotation.org/ns\/Annotation" }
        },
        {
            "annotation": { "type": "uri", "value": "http:\/\/connectme.at\/annotation\/08298406cb500fd6790f0a69a2ac5a70" },
            "resource": { "type": "uri", "value": "http:\/\/dbpedia.org\/resource\/Inline_hockey" },
            "relation": { "type": "uri", "value": "http:\/\/connectme.at\/ontology#explicitlyShows" },
            "fragment": { "type": "uri", "value": "https:\/\/s3-eu-west-1.amazonaws.com\/yoo.120\/connectme\/6306_519_20120508125738_standard.mp4#t=37,39" },
            "type": { "type": "uri", "value": "http:\/\/www.openannotation.org/ns\/Annotation" }
        },
        {
            "annotation": { "type": "uri", "value": "http:\/\/connectme.at\/annotation\/3f30b2f0f8511fe86e19ba4a6e7c3a60" },
            "resource": { "type": "uri", "value": "http:\/\/dbpedia.org\/resource\/Snowshoe" },
            "relation": { "type": "uri", "value": "http:\/\/connectme.at\/ontology#explicitlyShows" },
            "fragment": { "type": "uri", "value": "https:\/\/s3-eu-west-1.amazonaws.com\/yoo.120\/connectme\/6306_519_20120508125738_standard.mp4#t=114,118" },
            "type": { "type": "uri", "value": "http:\/\/www.openannotation.org/ns\/Annotation" }
        },
        {
            "annotation": { "type": "uri", "value": "http:\/\/connectme.at\/annotation\/3f30b2f0f8511fe86e19ba4a6e7c3a60" },
            "resource": { "type": "uri", "value": "http:\/\/www.seiterhuette.at\/" },
            "relation": { "type": "uri", "value": "http:\/\/connectme.at\/ontology#explicitlyShows" },
            "fragment": { "type": "uri", "value": "https:\/\/s3-eu-west-1.amazonaws.com\/yoo.120\/connectme\/6306_519_20120508125738_standard.mp4#t=114,118" },
            "type": { "type": "uri", "value": "http:\/\/www.openannotation.org/ns\/openannotation\/extensions\/Bookmark" },
            "prefLabel": { type: "literal", value: "Seiter Hutte" }
        }
     ];
     annotations = _(annotations).map(function(ann){
         return new Annotation(ann);
     });

Remark 1: usually one would render the locators and annotations on the backend into the markup or use an ajax function like getAnnotationsForVideoOrLocator() in src/cmf.coffee for loading annotations dynamically.

Remark 2: See the two kinds of annotations 'oac:Annotation' and 'oacx:Bookmark', where a Bookmark's resource is a webpage, not a linked dataentity. A bookmark can have a preferred label.

Create the options object and initialize the player:

    var options = {
        video: locators,
        annotations: annotations,
        containerDiv:"mainwrapper",
        videoPlayerSize:{"width":640, "height":360},
        vPlayer:"VideoJS",
        // annotFrameworkURL:"http://connectme.salzburgresearch.at/CMF/",
        annotFrameworkURL: cmfurl,
        // plugins:[TestPlugin, LDPlugin, AnnotationOverlays],
        fullscreenLayout:{"AnnotationNorth":50, "AnnotationWest":300, "AnnotationSouth":50, "AnnotationEast":300},
        widgetContainers:[
            {element:jQuery('#widget-container-1'), orientation:'horizontal'},
            {element:jQuery('#widget-container-2'), orientation:'horizontal'}
        ],
        annotationsVisible:true,
        preferredLanguage: lang
    };

    window.LimePlayer = new LIMEPlayer(options);

Lime player options:

  • containerDiv: The id of the container DOM. Default: "mainwrapper"
  • videoPlayerSize: Dimensions for the player. Default: {"width": 640, "height": 360}
  • preferredLanguage: The preferred user language. Default: "en"
  • annotations: Array of Annotation instances. Default: []
  • plugins: Hash of plugins to be used, with their configuration. Default: { TestPlugin: {} }
  • activeWidgetTypes: The array of widget types to be shown. Default: null means, everything is shown. [] (empty array) means nothing is shown. ['TestWidget'] would mean, only widgets with the type 'TestWidget' are rendered, any other won't.
  • widgetVisibility: Set the way the player shows widgets. The widgetVisibility options are: 'scrolling-list', 'active-only', 'delayed-hide'.
      • Default: 'scrolling-list': The player shows the full list of widgets for the entire video. It highlights the active ones and scrolls to them during playback.
    • 'active-only': The player renders/shows the active widgets and hides them when the annotation becomes inactive
    • 'delayed-hide': The player renders/shows the active widgets, Marks them as inactive when the annotation becomes inactive and hides them hidingDelay milliseconds later.
  • hidingDelay: Hiding delay in milliseconds for widgetVisibility: 'delayed-hide'. Defaut: 2000
  • widgetContainers: Array of widget containers with their options. Default: [{element: jQuery('#widget-container-1'), options: null}]

For a complete list see the documented source code in lime.coffee.

Default Plugins:

When loading the Lime player, there are plugins that are loaded per default:

  • AnnotationOverlays - Renders spacial annotations over the video element
  • LDPlugin - Collects linked data to the annotations before the video starts to play, for being used by other plugins.
Add a custom footer
Add a custom sidebar
Clone this wiki locally