Download PDF

videoviewer-banner
Click to View Live Preview

Ensemble Video now has widgets that you can install for making your Ensemble content directly view-able from your web site. Widgets offer more flexibility than the plugin, but does require that you have the ability to write JavaScript.

What you’ll need:

  • The ability to write JavaScript in pages/articles
  • An internet connection
  • Ensemble web url and playlist/category IDs

The Code

Copy and Paste the following code between the HEAD tags in your web page:
* if you do not have access to the HEAD tag, then you can put these lines directly in the body.

These lines import the CSS and JS files that you will need to run this widget. Here we also call the plugin. There are many configuration options to choose from to make sure you get the content you want and display it how you like.

If you are using another JavaScript library that utilizes the $ for functions or variables, you can use the $.noConflict() statement as instructed by jQuery (http://api.jquery.com/jQuery.noConflict/). This is common when embedding widgets into a CMS or LMS that already utilize a JavaScript library other than jQuery.

<link href="//ensemblevideo.com/widgets/css/ensemble.widgets.css" rel="stylesheet" type="text/css" />
<!-- NOTE: If you already have jQuery installed omit this next line -->
<script type="text/javascript" src="//ensemblevideo.com/widgets/js/jquery.1.8.0.min.js"></script>
<!-- NOTE: If you already have jQuery.tmpl plugin installed omit this next line -->
<script type="text/javascript" src="//ensemblevideo.com/widgets/js/jquery.tmpl.min.js"></script><script type="text/javascript" src="//ensemblevideo.com/widgets/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="//ensemblevideo.com/widgets/js/jquery.ensemble.widgets.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#viewer').ensembleVideoViewer({
            'resultsCount' : 10,
            'playlistID' : '4M2akAsn2EGhYH9edW8YSA',
            'thumbnailWidth' :  '150', 
            'sliderNavigation' : false,
            'sortBy' : 'videoDate',
            'sortOrder': 'desc', 
            'appRoot' : '//cloud.ensemblevideo.com/ensemble/app',
            'videoDetailsPage' : null,
            'autoPlay': false
        });
    });
</script>

Copy and paste the following into the BODY tag where you want the video grid to appear.

<div id="viewer"></div>

Download

We do suggest you download the widget files and reference them locally on your web server. This will decrease load time and give you more control over the widgets. Click the link below to download the scripts, images, styles and examples.

Click to Download Widgets (160 KB)

Configuration Options

Config Option Type Default Description
appRoot string ‘http://cloud.ensemblevideo.com/ ensemble/app’ The HTTP path to your Ensemble Web Application. This points to our cloud server as a default. Just change it to point to your instance of Ensemble Video to start pulling your videos!
autoPlay boolean false When videos load, start playing them without having to click Play.
categoryID string null A categoryID from Ensemble Video that will limit results to one, specific category.
idPrefix string ‘viewer’ This is the prefix of the HTML ID attribute that gets generated for each thumbnail. Setting this can help avoid ID conflicts in the DOM; especially if you have more than one widget loading in the page.
playlistID string ’4M2akAsn2EGhYH9edW8YSA’ This points to our cloud server, and references the videos that we use for promotion and training. Feel free to leave this as is for testing, but be sure to change it to your playlist when going LIVE!
resultsCount integer 9 The total number of videos you want to return in the video grid.
sliderAnimation boolean false Animate the slider once on load from beginning to end.
sliderNavigation boolean false Show navigation dots below slider as extra paging/navigation.
sliderOrientation string null Displays the video slider in the designated position. Options: ‘top’,'bottom’,'left’ or ‘right’.
sortBy string ‘videoDate’ Sorts the output by any Ensemble Simple API parameter.
sortOrder string ‘desc’ Sorts the direction by standard commands. ‘asc’ or ‘desc’.
thumbnailWidth string ’150′ Width, in pixels, of each thumbnail in the grid. NOTE: if you change this, some CSS adjustments may be required.
videoDetailsLinkClass string ‘videoLink’ This controls the class of the video details link. It can be used for styling or customization of it’s action.
width string ’480′ The total width of the slider