complete pack
English Chinese (Simplified) Czech French German Greek Italian Spanish

SJ Video Player

1 1 1 1 1 1 1 1 1 1 Rating 4.69 (52 Votes)

video player product pictureSJ Video Player is a Joomla module that allows you to easily add videos from your local ftp or Youtube account and display them in a stylish design.

Keep your work organized by creating playlists that can have both local and Youtube videos!

Get yourself a user-frindly online video player with lots of backend options: color schemes, multiple playlist control, easy video management, descriptions and more!

The Video Player has an automatic display of each video poster and thumbnail and works with IOS and Android mobiles!

 

Price: 42.00 USD

Demo

This is a demo with a dark color palette. You can also customize it with a light color palette.

  • 1

    SJ Video Player Documentation

  • 1

    Captain America The Winter Soldier

  • 1

    300: Rise of an Empire

  • 1

    oceans-clip

  • 1

    Seven Souls

  • 1

    Cross Fire Hero

  • 1

    Big buck bunny trailer

Install, set up and run your fist SJ Video Player

Captain America The Winter Soldier

After the cataclysmic events in New York with The Avengers, Marvel's "Captain America: The Winter Soldier" finds Steve Rogers, aka Captain America, living quietly in Washington, D.C. and trying to adjust to the modern world. But when a S.H.I.E.L.D. colleague comes under attack, Steve becomes embroiled in a web of intrigue that threatens to put the world at risk. Joining forces with the Black Widow, Captain America struggles to expose the ever-widening conspiracy while fighting off professional assassins sent to silence him at every turn. When the full scope of the villainous plot is revealed, Captain America and the Black Widow enlist the help of a new ally, the Falcon. However, they soon find themselves up against an unexpected and formidable enemy—the Winter Soldier. Based on the ever-popular Marvel comic book series, first published in 1941, Marvel's "Captain America: The Winter Soldier" is produced by Kevin Feige, directed by Anthony and Joe Russo, from a screenplay by Christopher Markus & Stephen McFeely, and stars Chris Evans, Scarlett Johansson, Sebastian Stan, Anthony Mackie, Cobie Smulders, Frank Grillo, Emily VanCamp and Hayley Atwell, with Robert Redford as Alexander Pierce and Samuel L. Jackson as Nick Fury. "Captain America: The Winter Soldier" is presented by Marvel Studios. The executive producers are Louis D'Esposito, Victoria Alonso, Michael Grillo, Alan Fine and Stan Lee. The film releases March 26 2014, and is distributed by Walt Disney Studios Motion Pictures.
Based on Frank Miller's latest graphic novel Xerxes, and told in the breathtaking visual style of the blockbuster "300," this new chapter of the epic saga takes the action to a fresh battlefield—on the sea—as Greek general Themistokles attempts to unite all of Greece by leading the charge that will change the course of the war.
zzz
Seven Souls is a 1989 album by the New York based music group Material. The album was re-released in 1997 with bonus tracks, three re-mixes that were added to the beginning of the album. In 1998, a new title, The Road to the Western Lands, was issued, composed of new mixes of the tracks. "Equation" / "Ineffect" was released as a single in 1989 (Virgin America, PR 3380).
Hero Mode is the second Mutation Mode variant, based of Zombie: The Hero from Counter-Strike Online, also extending on Mutation Mode. It throws more threatening mutants against soldiers.
Big Buck Bunny (code-named Peach) is a short computer-animated comedy film by the Blender Institute, part of the Blender Foundation.[4][5] Like the foundation's previous film Elephants Dream, the film was made using Blender, a free software application for animation made by the same foundation. It was released as an Open Source film under Creative Commons License Attribution 3.0.[6]

Features

SJ Video Player Component 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.

SJ Video Player Module Features

Mobile ready for IOS and Android
Html5 video player
Youtube video player
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 for playlist and description
Playlist repeat
Ordering
Custom CSS available
Two Jquery compatibility modes

How to use SJ Video Player

1. Quick install

After you downloaded your Joomla extension, just go to Extensions -> Extension Manager -> select the Upload Package File from the top tabs -> click on the Choose File button and select the Spot Featured Articles zip file -> click on the Upload & Install blue button.

Your module will now appear in the Module Manager section.

q

In the Extensions -> Module Manager section, find your Spot Featured Article module and click on it to acess the module's setup section.

You can find all the module's options right in the first window that opens.

First, from the right side of the page change the Status of the module into Published, put it into the desired Position and, if you want your module to be displayed with a title, select from the right Show at the Show Title section. Last, give your module the title that you want it to be displayed with.

Also, don't forget to set the display for your module on the pages you want it to be shown: Module Assignment section.

w

2. Setup SJ Video Player

2.1. 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.

BrowserMP4WebMOgg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES NO NO
Opera 10.6 NO YES YES

 

2.2. Setup the component

I. Create a playlist

There are two ways to create a playlist:

First one is to go through Components -> SJ Video Player -> Add new playlist, the following will open

e

Give your playlist a name (eg. Playlist1), then Save&Close. Publish the playlist.

The second way is through Components -> SJ Video Player -> Manage playlists and the following will open:

r

Give your playlist a name (eg. Playlist1), then Save&Close. Publish the playlist.

II. Add videos to playlist

There are two ways to add a new video to a playslist.

The first way is via Components -> SJ Video Player -> Add new video. The following will open:

t

Give your video a name.

Select it's 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: <h1>My video</h1>
<h3>Subtitle</h3>
<p>My desc goes here</p>

Is NOT mandatory to use html tags but helps 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.

Another way to add new videos to your playlist is via Components -> SJ Video Player -> Manage videos. It will look like below:

y
 The Video Manager that will open is the same one with the previous presented one. Fill all the fields according the setup from above.

2.3. 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.

I. 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)

1

II. 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

2

3
4

III. CSS - a custom css are has been added to easely overwrite any of the css bits.

For eg. 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;
}

Screenshots

1

 5

Support

emailsupport1Product support

When buying this extension, you will also receive 6 months of free support for any functionallity issues regarding your product. 

The support provided does not include any module customization or setup, additional options or features. 

If you encounter any functionallity issue regarding your recently bought extension, please send us a message using the contact form from the right section of this page and we will be happy to help you.

 

services-web-designExtra services

We are a bunch of developers and web designers that are providing professional website solutions, both coding and graphics.

Our services include:

- Website developement: design from scratch, content management system, structure and content

- Joomla extensions

- Graphic design for both web and print: logo, stationery, illustrations

Order our services

If you need any of our extra services, do not hesitate to get in contact with us. The prices will be discussed depending on your requirements.

Pin It

Comments   

0 #11 Radu Adrian 2017-06-16 07:50
Hi Paul
The last version have this matter solved. Https is inserted in the script. Just update the module to 2.3.1.
If you encounter issues or have questions just drop me an e-mail at with your page and i will help you with it.
Quote
0 #10 Paul Smith 2017-06-14 19:28
The player is not working in Firefox and Chrome now that our site is https. The browsers are showing the extension as mixed content. All the videos are coming in from https ://youtube. Does any one know of a way to fix this? Is there a way to edit the code?
This has been a great extension in http.
Thanks,
Paul
Quote
0 #9 Radu Adrian 2017-04-03 11:35
Hi Bob
I did not tested with SP Pagebuilder, so i don't know how is working with it.
Regards
Quote
0 #8 Bob 2017-03-31 15:48
Hi,

Will this work with SP Pagebuilder?

Thanks,
Bob
Quote
0 #7 sara 2016-03-31 17:08
:-)
Quote
+6 #6 Tanu Shere 2016-03-17 09:23
I love the options :) Very nice video player
Quote
+4 #5 Bobby Haydin 2016-03-17 09:21
Thank you for a very good player
Quote
+1 #4 Gil Francois 2016-03-15 00:53
This player is really easy to configure and works extremely well.
Thank you so much... :-)
Quote
+1 #3 Radu Adrian 2015-05-16 07:42
What kind of problems? If the images does not show please check if the path is correct. The option "Compatibility mode" in the backend switch from relative url (aka: /images/myimage.jpg) to absolute url (aka: http ://extensionspot/images/myimage.jpg)
Quote
0 #2 The Workout 2015-05-16 04:04
Hmm is anyone else encountering problems with the images loading? I'm trying to find out if its a problem on my end or if it's the player. Any responses would be greatly appreciated.
Quote

Add comment


Security code
Refresh