Plugin SDK Playlist Features – 3Play Media Support

This article goes over some of the customizable features of the 3Play Media's Playlist Module.
In order to implement a playlist, you must be using a linked account. You can learn about linked accounts here.

The code for the playlist features below must be placed inside of a p3sdk-playlist div.

Available Features

Playlist Display
Playlist Pagination
Playlist Search
Playlist Tagging
Putting it All Together
Using with the Interactive Transcript

Playlist Display

To create a playlist, first create a p3sdk-playlist div with a project_id and linked_account_id. You can find these by going to your linked account and clicking settings.

folder_id, per_page, sortby and tags are optional attributes that can help you customize how the videos are displayed in the playlist.

folder_id limits the playlist results to be from a particular 3Play Media folder. You can find the folder id by clicking on a folder in the 3play account system and looking at the url.
per_page is the number of videos that will appear per page of the playlist. You can implement pagination to flip through pages of videos.
sortby can be assigned the attributes "name", "name:desc", "id" or "id:desc" (most recent) and will sort the videos accordingly.
tags take a comma separated list of values that will allow you to filter by tags that you set up through 3Play Media's account system.

Playlist Template

The code contained in p3sdk-playlist-dynamic-list-template is a template that you can use to customize the appearance of each video in the playlist. In this example, we use an unordered list, where each list item shows a video thumbnail, the video title, and duration. You could also implement the playlist as a table, or any other html layout.

The p3sdk-playlist-dynamic-list is where the actual playlist gets generated.

Please note in the following example, project_id, linked_account_id and folder_id must be changed to your appropriate values for the playlist to work properly.

Template Components

There are a number of template components that work inside of the p3sdk-playlist-dynamic-list-template div that automatically fill in information from the 3Play Media account system. Some examples are shown below.

{name}
{thumbnail_000x000} - change the dimensions (000x000) to pixel width and height size you want the thumbnails to appear.
{video_id}
{duration}
{result_timeline_000x000} - see Playlist Search Result Timeline section below.
{attribute1} - set attributes 1 through 3 in the 3Play Media account system.
{attribute2}
{attribute3}
{hit_count} - appears with playlist search query, shows how many times the query is in a video.

<ul class="p3sdk-playlist-dynamic-list">playlist goes here</ul>
<div class="p3sdk-playlist-dynamic-list-template" style="display:none">
<li video_id="{video_id}">
<div class="playlist-video-thumbnail">{thumbnail_133x100}</div>
<div class="playlist-video-name p3sdk-playlist-play-video-id" video_id="{video_id}" > {name}
<br>
</div>
<div class="playlist-video-info">
{duration}
</div>
</li>
</div>

Playlist Pagination

first, last, prev, next, and limit are optional attributes in the p3sdk-playlist-dynamic-pagination div that take in html to represent links to jump to various pages of the playlist. The limit attribute shows how many pages you want to display.

pagination

<div class="p3sdk-playlist-dynamic-pagination" first="first " last="last " prev="< " next="> " limit="10">
pagination goes here
</div>

Playlist Search

You can create a search box that looks through the transcript of videos in your playlist for text matches. Modify the CSS of the p3sdk-playlist-searchbox class to change the appearance of the search box. The search is conducted when you hit the return key or the submit button. The Esc key will clear the playlist of your query and change the playlist back to its default display.

<input type="text" class="p3sdk-playlist-searchbox"/>

Playlist Search Result Timeline

Playlist search result timelines can be used with playlist search as a visual representation of the query results. p3sdk-playlist-result-timeline and p3sdk-playlist-result-timeline-match can be styled with CSS to change the appearance of the result timeline and the hits. In the example below, the result timeline is gray and the matches are in pink.

The result timeline is a playlist template component and should be used inside the p3sdk-playlist-dynamic-list-template div. The width and height of the result timeline can be modified by changing the dimensions in the component.

HTML

<div class="p3sdk-playlist" project_id="124" folder_id="14635" linked_account_id="829">
<input type="text" class="p3sdk-playlist-searchbox"/>
<div class="p3sdk-playlist-dynamic-list-template" style="display:none">
{result_timeline_300x10}
</div>
</div>

CSS

.p3sdk-playlist-result-timeline{
background: #f1f1f1;
border-width: 1px;
border-color: #ccc;
}

.p3sdk-playlist-result-timeline-match{
background: #5599E5;
}

Playlist Tagging

Tag word filtering can be implemented using a drop down list or checkboxes. Please note that if you tag multiple checkboxes, videos that are tagged with either option will be shown. For the example below, any video tagged with "physics" and any videos tagged with "computer science" will be shown, not just those tagged with both.

Drop Down List

Value of "" will list all files instead of being filtered by tag.

<select class="p3sdk-playlist-tag-selector">
<option value="">All Videos</option>
<option>Physics</option>
<option>Computer Science</option>
<option>Aerospace</option>
</select>

Checkbox

<div class="p3sdk-playlist-tag-list">
<input type="checkbox" value="Physics"/> Physics
<input type="checkbox" value="Computer Science"/> Computer Science
<input type="checkbox" value="Aerospace"/> Aerospace
</div>

Putting It All Together

Please note the following code does not include any styling. Tables and lists will inherit from your pages core CSS rules and you can modify from there.

HTML

<div class="p3sdk-container" player_id="youtube_handle" player_type="youtube">
<div class="p3sdk-playlist" project_id="12640" linked_account_id="2161" per_page="5" sortby="name" tags="">

<h3>Search all Transcripts</h3>
<hr>


<div class="search-bar">
<input type="text" class="p3sdk-playlist-searchbox"/>
<a href="javascript:void(0);" class="fa fa-search p3sdk-playlist-searchsubmit"></a>
</div>

<p>


<select class="p3sdk-playlist-tag-selector">
<option value="">All Videos</option>
<option>Olympics</option>
<option>Food</option>
<option>Aerospace</option>
</select>
</p>

<h3> Related Videos </h3>
<hr>


<ul class="p3sdk-playlist-dynamic-list"></ul>

<div class="p3sdk-playlist-dynamic-list-template" style="display:none">
<li video_id="{video_id}">
<div class="item-left">
<div class="playlist-video-thumbnail">{thumbnail_133x100}</div>
</div>

<div class="item""-right">
<div class="playlist-video-name p3sdk-playlist-play-video-id" video_id="{video_id}">► {name}</div>
<div class="playlist-video-info">{duration}</div>
<div class="result-timeline-container">{result_timeline_200x15}</div>

</div>
</li>
</div>



<div class="p3sdk-playlist-dynamic-pagination" first="first " last="last " prev="<" next=">" limit="10"></div>

</div> 
</div>

Using with the Interactive Transcript

To have the interactive transcript automatically update when the video changes, you must include the attribute, "platform_integration = "1" to the p3sdk-interactive-transcript div.

*The Plugin SDK is sometimes referred to as "P3SDK".