A key feature of Ensemble Video is the ability to customize our HTML Plug-in. Many times users have specific wants and needs when they are embedding multiple videos in web page. For example, a user may want to create a video showcase web page with new videos, category navigation, a search and a featured video. In this entry, I’ll demonstrate a number of ways to customize our HTML Plug-in. SEN
Once a user has uploaded media using Ensemble Video, he or she typically wants to publish the video content to a private or public web destination. Usually this means publishing video to a public web page to support marketing goals, a secure internal portal to improve collaboration or a secure learning management system to enhance learning. To do this, the user needs to copy the HTML Plug-in code from Ensemble Video and paste it into the appropriate web page or system.
Normally users are satisfied with the default publishing options. Ensemble Video users like the HTML Plug-in layout because the vertical listing of videos and built-in search works well in Blackboard, SharePoint, Moodle and web pages. Here is an example of the standard HTML Plug-in. Additionally, users can easily embed a single video in a web page using the Ensemble Video embed code.
As the number of videos you are publishing increases, users often want to customize the look and feel of your video web pages. You can easily customize the HTML Plug-in layout in Ensemble video.
Here are a few things you can do:
- Video Showcase: Create a video showcase site with new videos, category navigation, a search and a featured video.
- Video List: Display the video entries for one web publishing destination category.
- Video Category Block: Embed a video category block on a page with complimentary graphics, texts and other content.
- Single Video on Page: Embed one video on a page with complimentary text, images and other content.
- Remove Information: Remove unwanted information like the embed code, statistics and more.
You can also view the “How-to Customize the HTML Plug-in” video.
Step 1: Login and Go to Web Publishing
The first step is to login to Ensemble Video and navigate to the Web Publishing tab and locate the appropriate web-publishing destination.
Step 2: Copy the HTML Plug-in Code
Once you have located the appropriate web destination, click on the “Install” link to retrieve the HTML Plug-in code. Copy the code from the text field and navigate to the web page or system that you will be embedding video.
Step 3: Install the Plugin Code
You can now paste the HTML Plug-in code into any web page, learning management system, blog or platform. Preview your videos to make sure that your effort was successful. Need help
Step 4: Customize the HTML Plug-in
Now that we know you’re the HTML Plug-in is working, we are ready to customize the look and feel. You will find a detailed explanation on our wiki, but the examples below will get you started.
Note: You can add the red and/or green colored code to achieve the desired result.
Original Plugin Code
Here is a live demonstration of this plug-in code.
------------------- original plug-in code example below -------------------
<div id="ensembleContentContainer_qZmD64A9Kk2kO8XZl-3CLA" class="ensembleContentContainer"><script type="text/javascript" src="http://demo.ensemblevideo.com/app/plugin/plugin.aspx?destinationID=qZmD64A9Kk2kO8XZl-3CLA"></script></div>
------------------- end original plug-in example code -------------------
Video Showcase with Categories
Create a video showcase site with new videos, category navigation, a search and a featured video. Here is a live demonstration of this plug-in code.
------------------- modified plug-in code example below -------------------
<div id="ensembleContentContainer_qZmD64A9Kk2kO8XZl-3CLA" class="ensembleContentContainer"><script type="text/javascript" src="http://demo.ensemblevideo.com/app/plugin/plugin.aspx?destinationID=qZmD64A9Kk2kO8XZl-3CLA&displayShowcase=true&displayCategoryList=true"></script></div>
------------------- modified plug-in example code -------------------
Multiple Videos on Page
Display the video entries for one web publishing destination category. Here is a live demonstration of this plug-in code.
------------------- modified plug-in code example below -------------------
<div id="ensembleContentContainer_qZmD64A9Kk2kO8XZl-3CLA" class="ensembleContentContainer"><script type="text/javascript" src="http://demo.ensemblevideo.com/app/plugin/plugin.aspx?destinationID=qZmD64A9Kk2kO8XZl-3CLA&categoryName=How-To"></script></div>
------------------- end modified plug-in example code -------------------
Video Category Block
Embed a video category block on a page with complimentary graphics, texts and other content. Here is a live demonstration of this plug-in code.
------------------- modified plug-in code example below -------------------
<div id="ensembleContentContainer_qZmD64A9Kk2kO8XZl-3CLA" class="ensembleContentContainer"><script type="text/javascript" src="http://demo.ensemblevideo.com/app/plugin/plugin.aspx?destinationID=qZmD64A9Kk2kO8XZl-3CLA&displayCategoryList=true&categoryOrientation=vertical"></script></div>
------------------- end modified plug-in example code -------------------
Single Video on Page
Embed one video on a page with complimentary text, images and other content. Here is a live demonstration of this plug-in code. To learn more about embedding a video in a page check out this blog entry.
------------------- modified plug-in code example below -------------------
<div id="ensembleEmbeddedContent_afzNAw4Qn0iWLsbsoe8Agg" class="ensembleEmbeddedContent" style="width: 320px; height: 270px;">
<script type="text/javascript" src="http://demo.ensemblevideo.com/app/plugin/plugin.aspx?contentID=afzNAw4Qn0iWLsbsoe8Agg&useIFrame=true&embed=true&
displayTitle=false&autoPlay=false&
hideControls=false&showCaptions=false"></script></div>
------------------- end modified plug-in example code -------------------
Remove Embed Codes and Statistics
Remove unwanted information like the embed code, statistics and more. Here is a live demonstration of this plug-in code.
------------------- modified plug-in code example below -------------------
<div id="ensembleContentContainer_qZmD64A9Kk2kO8XZl-3CLA" class="ensembleContentContainer"><script type="text/javascript" src="http://demo.ensemblevideo.com/app/plugin/plugin.aspx?destinationID=qZmD64A9Kk2kO8XZl-3CLA&displayEmbedCode=false&displayStatistics=false"></script></div>
------------------- end modified plug-in example code -------------------
Additional Resources
Summary
Ensemble Video provides users with flexible tools like the HTML Plugin. The HTML Plugin simplifies publishing video on one to many web destinations. Knowing that users want to inject video into many different systems with different requirements, Ensemble Video allows users to customize the HTML Plugin.