PT Multimedia Getting Started
Overview
This guide is designed to help you quickly get started using the Multimedia application on your web site. Before you get started, there are some important concepts and terminology to understand. The Multimedia application supports uploading video and audio files, through dialog screens in the Multimedia application, directly to your web server and then to play them within your site. We refer to Multimedia served directly from your web server as “Locally Hosted”. The Multimedia application will also play videos that are hosted on third-party sites such as youtube, Yahoo and Vimeo. This guide uses the term “Externally Hosted” to refer to the serving of multimedia which resides on third-party sites.
Though the Multimedia application plays multimedia (locally hosted) without the need for a streaming server, if you wish to utilize a streaming server to take advantage of features such as digital rights, tracking and reporting, etc – you may easily customize the Multimedia application to use your in-house streaming server. The Multimedia application is designed to allow your coldfusion developers to add support for additional third-party sites, modify how media displays, etc.
If you only intend to present externally hosted media, then your Multimedia Configuration Manager page only requires that the “Upload Media Form”, “Pop-up Player URL” and “Search Results URL” fields be populated. If you intend to present both externally and locally hosted multimedia, or just locally hosted multimedia, then all fields must be populated before you begin. Instructions for these fields are described under the installation steps. This guide assumes installation is completed.
Getting Started
1) The first step in using the Multimedia application is to navigate to your Multimedia Manager page and click on either the “Series” or “Category” tab (or both) and create entries. Multimedia (audio and video) must be assigned to one or more Categories, one or more Series or a combination of Categories and Series.
- Series. Series are how podcasts (which may be audio, video or both) are associated. For example, let’s say that you have three videos (part 1, part 2 and part 3) which together form a tutorial podcast on “making widgets.” You would create a Series entry called “making widgets.” When these three videos are entered into the multimedia application, you would assign them to the “making widgets” Series. If you don’t intend to create podcasts, the Series option could be repurposed as a secondary way of organizing your multimedia.
- Categories. The primary means of organizing your multimedia is through the use of Categories. You might create a category called “Company News”, another category called “Lectures & Speeches” and one called “Events”. These are essentially “buckets” in which you place your locally hosted and externally hosted multimedia. You may have an unlimited number of categories and each video/audio item may be assigned to one or more categories. Renaming a category or series (by editing the name through the datasheet) does not break the application. Internally we use an ID – the display name may be changed at any time.
2) After you’ve created a number of categories, it’s time to add your multimedia. Still on the Multimedia Manager page, click on the Media tab and select the “Add new Media” button. You will be presented with a form in a lightbox. Enter a title in the “title” field (we recommend you keep titles relatively short). Select whether this item is hosted locally or externally. Note that the form will dynamically change to display the appropriate fields based on where (local or external) this item will originate. Select a radio button to designate this item as featured or not featured. Featured videos display larger than a thumbnail and are typically the focal point on the page. You should only have one video at a time, in each category, designated as featured. When it is time to present a new featured video, you would edit this video through the datasheet and select the “no” radio button for featured. The replacement featured video would be set to “yes”. Enter a short caption followed by a description which can be any length. The remainder of this dialog depends on whether you chose “Locally Hosted Media” or “Externally Hosted Media” above.
- For locally hosted, we recommend that you provide a preview image by selecting the “select image” button and choosing an image from your file system. Preview images display as thumbnails and also display in the player prior to the start of the video. Preview images are not used for audio files. Selecting the “upload” button will present you with a dialog to upload your audio or video file to your server. The upload will only accept file types (extensions) that you specified in the Multimedia Manager Configuration “upload file types” field. Files that exceed the size specified in the Multimedia Manager Configuration “max file size” field will be rejected. Uploaded files will be stored in the directory specified in the Multimedia Manager “upload path” field. After browsing to your multimedia on your local file system and selecting it, select the “do upload” button.
- For externally hosted, navigate to the site (such as youtube) and click on their link/button to display the video embed code. The correct code will contain the terms “embed” and “object” in the data – if instead you see a url followed by a question mark and some data that is not embed code and will not function within the multimedia application. Vimeo, youtube and google all provide true embed code for your use. Copy the embed code into your clipboard then paste it into the embed code field provided in the Commonspot dialog.
Still on the “Add new Media” dialog screen, select the “Category” tab. This is where you will assign the multimedia, you are adding, to one or more categories. Both the Category and Series tabs use a Commonspot field called a “General Chooser” which displays a drag-and-drop interface. Initially you will want to use the “show all categories” link to display within the general chooser all of the categories you created. In the future, you could alternatively use the search field to find a specific category. Left click on a category in the left column and while holding the left mouse button down drag the category to the right column and release the left mouse button. If you want to assign this multimedia item to a second category, repeat the process (for as many categories as is appropriate.)
When done, select the “submit” button . You will see the message you entered during the installation of the multimedia application – typically something like “Media uploaded successfully!” Close the lightbox containing the message and hit your browser reload button to reload the multimedia manager page. You will see your multimedia displayed in the datasheet.
We recommend that you populate the multimedia manager page with at least 4 starter (test) entries in the same category and at least one or two more entries in different categories. This will provide enough data for you to test features like “display row of 3” videos for a given category and test how to render multiple categories on a page.
3) To display video or audio on a page, place either the Multimedia Category Gallery element or the Multimedia Series Gallery Element on the page. Both of these elements are “choosers” which, through a drag and drop interface, allow you to choose either a category or series for which to display multimedia. We will use the Multimedia Category Gallery element. After placing the Multimedia Category Gallery element on a page, select the “Click here to define the custom element data” ghost text for the element. On the “Category Select” tab, select the “Show all items” link to display a list of available categories. Highlight a category in the left column by clicking it and then drag and drop it onto the right column to “choose” the category. Repeat the process for as many categories as desired. Note that choosing more than one category effectively merges the categories into a single list of multimedia and then presents them as one. If instead, you wish to present multimedia on the page grouped by category, then drop the category gallery element on the page multiple times and choose a single, but different, category for each instance of the element.
4) You will notice a tab called, “Results Filter” on the Multimedia and Series Gallery elements chooser dialogue. The normal “render mode” option, which permits filtering results for Commonspot elements, is not applicable when using the Multimedia and Series Gallery elements. It’s important to understand that when using a chooser to determine categories or series for which to display multimedia, you are choosing multimedia by how it is organized. Let’s look at an example of why the render mode option is not applicable in this situation. Say you have a category defined called, “events” and you choose that category via the category gallery element chooser. If you then used the “Render Mode” option to set some kind of filter, because this is a global custom element, the render mode could return more categories than what you chose or not categories at all – neither of these are desirable circumstances. Instead, we have provided the “Results Filter” tab to provide functions similar to the render mode option.
The “results limit” option on the “Results Filter” tab allows you to limit the results to 1 record, 3 records or return all multimedia for this category. If you were displaying a featured item, you would want to limit the results to 1. If you wanted to display a single thumb, you would limit the results to 1. Otherwise, you would choose to display 3 or all records.
The “Featured Limit” enables you to choose to display only a featured item, only items that are not featured or ignore the featured designation and return all items.
The final option on the “Results Filter” tab enables you choose whether you want multimedia sorted by title or release date.
The options on the “Results Filter” work in conjunction with the category you chose to further refine what multimedia is therefore eligible to appear on the page. After you have made your category and results filter selections, click the “finish” button to commit your selections. If you need to return to the element later to change something, select the edit icon for the element and choose the “Data” option from the menu.
5) The final step in rendering your multimedia is to choose how you want it displayed. Click on the edit icon for the multimedia category gallery element and from the menu choose the “edit Metadata” option. The metadata form presents you with a list of pre-defined display formats from which to choose.
To recap the process – drop the multimedia category gallery element on a page, choose one or more categories and set the render filter options to limit the results. Then select a display format option from the metadata form.
There are some combinations of settings which would render undesirable results. Choosing a render filter selection to limit records to 1 and choosing “row of 3 thumbs” as the display format would obviously not produce a row of three thumbs since only 1 multimedia item would be selected to display.
Displaying Category Headers
If you would like to display category (or series) headers, for example above a row of three thumbnails, with a link to view all videos in the category – that can be done by using the category or series element (as opposed to the gallery elements). Place the category element onto the page and move it to the header position. Navigate to the multimedia manager page and click on the category tab. Under the category ID column is the ID associated with each category. Find the appropriate category can copy the category ID into your clipboard. Return to the page where you placed the category element and click on the edit icon for the element. Choose “render mode” from the menu. On the rendering mode tab, select the “display existing element data (content reuse)” radio button. Then click on the filter tab and select “show subset of records” as the filter option. For field, choose “Categoryid”. For operator choose “equals”. For value, paste the category ID from your clipboard. Your filter would display something similar to:
- CategoryID equals 4B4C8EFC-265E-1C05-4D9A968DE839DBC1
Then select the Update button. Verify the correct category appears on the Preview tab and then select the “OK” button. The category header should display with a “view all” link to the right of the category name. If it does not display correctly, verify that the correct render handler is assigned to the category element. Click the edit icon for the category element and then select “more” to expand the menu and then select “custom render handlers”. Select the multimedia category name render handler. The “view all” link retrieves the path to the display page from the PT Multimedia Configuration Manager entry.
