Description

SJ Video Player is a youtube and local storage video player. Built with html5 and some youtube api.

Features

• Easy Management for playlists and videos
• Multiple playlists control
• Add videos to playlist in a graphic fashionable manner
• Video management
• add/edit/delete individual videos
• description control
• poster image control for local videos
• automatic poster and thumbnails for youtube videos.

• Mobile ready IOS and Android
• Html5 player added
• Youtube support added
• Removed Flash
• Added bottom extended description
• Simplified options:
• Player width and height
• Playlist with and height
• Playlist image size control
• Playlist image and text margin-top control
• Two colors css3 gradient added for playlist and description
• Playlist repeat
• Ordering
• Custom CSS available

Included

• module instalation package (.zip)
• component instalation package (.zip)

Requirements

• Joomla 3.0 or newer

Instructions

I. Upload videos and thumbnails

 Using your FTP user and password, login on your server.
Navigate to images/
Create a folder for videos here (aka. myvideos), and another one for thumbnails (aka. mythumbs).
Upload the video files in .mp4 and .ogv or .ogg file format in "myvideos" folder (also .webm can be used), and thumbnails into "mythumbs" folder.

Down there it is table with the compatibility of HTML5 video formats.

II. Setup the component

1. Create a playlist

Under the Playlists tab press New in from the top toolbar. Give your playlist a name ex. Playlist 1

Press Save&Close

Publish the playlist

2. Add videos to playlist

Under the Videos tab press New in from the top toolbar.

Give your video a name.

Select his source. If is a youtube video select Youtube and if is a local file select Local

URL/Youtube id 

If the video is from youtube the id must be inserted here. The id is the code after the ?v= from  the youtube link.
ex: If the link is https://www.youtube.com/watch?v=xJ_gZ-h2X9Y the id will be xJ_gZ-h2X9Y

If the video is a local file the path to the local file must be inserted starting from images. 
ex: images/myvideos/big_buck_bunny_trailer

Do not specify the extension in the name of the file. The different file formats must have same name.
ex: if we have the video big_buck_bunny_trailer on the ftp we must have the following files: 
big_buck_bunny_trailer.mp4
big_buck_bunny_trailer.ogv
big_buck_bunny_trailer.webm

Poster image 

For youtube videos the poster image field will not be present and it will complete automatically with the image that youtube is using for that video.

For local files select the image you want to use from the images/mythumbs folder that you have created earlyer.

Description

Here you can add description to your video. The field supports HTML tags, so you can create any structure here. (like you can use h1 tags for titles)
ex:

My video

Subtitle

My desc goes here

Is NOT mandatory to use html tags but helpfull sometimes. Theese tags can be styled in the module under the CSS field.

Playlist 

Select the playlist in which you want the video to be.

Save & Close

Remember to publish the video.

In same manner create as manny playlists and add as manny videos you need.

III. Setup the module

The module does not support multiple instances for now.

Select Extensions --> Module Manager from the top menu and click SJ Video Player in the list.

 1. Player options

Select playlist:  
Select from the playlists you have made in the component part. The videos from that playlist will populate the player. 
Here will display only published playlists and will play only the published videos.

Set your player size (with and height)

2. Playlist options

Set width and height of the playlist in pixels.
Set the image with in procent and the image margin-top to arrange your image. Same for the Playlist text
Choose your colors.
Playlist repeat - If you need the playlist to repeat after end select yes here.
Order By and Type - The playlist can be ordered after Id, Name, Source and even Description, ascendent or descendent

CSS - a custom css are has been added to easely override any of the css bits. For ex. if you want to use a H1 tag into your description here you can style that just for the video player part.

Classes and id's used: 

sjvideoplayerpl1 - the videoplayer wrapper div id
videoarea - the html5 video element class
youtubepl1 - the youtube iframe div holder class
descriptionpl1 - the description div class
playlistpl1 - the playlist ul id
plitempl1 - the playlist item class
vpactivepl1 - the active playlist item class

 Usage example: 

.descriptionpl1 h1{
font-size:2em;
}

#playlistpl1{
display:none;
}

3. Publish

In the left hand size give your module a Title , select the Position you want to publish check the Status to be Published and Module Assignement to be On all pages or if you want specific pages select them from the list.

4. Save and exit

Enjoy!