SJ Video Player

1 1 1 1 1 Rating 4.68 (53 Votes)

 compat 30

video-player
SJ Video Player V2.0 is a lightweight video player with playlist , fully customizable and easy to setup that supports youtube and local videos. The player is divided in two parts: A component that creates the playlists and manage the videos and a module with html5 video player and a youtube player that plays the playlist. 

images

 

 

 

Demo

 

Demo 

SJ Video Player

  • 1

    Rio 2

  • 1

    Captain America The Winter Soldier

  • 1

    Need For Speed Movie

  • 1

    300: Rise of an Empire

  • 1

    Earthrise

  • 1

    Cross Fire Hero

  • 1

    Big Buck Bunny

  • 1

    Arctic Combat

RIO 2 - In theaters April 11, 2014! The entire cast of the animated smash RIO returns in RIO 2, and they are joined by a new flock of top actors and musical talents. Rich with grandeur, character, color and music, RIO 2 finds Jewel (Anne Hathaway), Blu (Jesse Eisenberg) and their three kids leaving their domesticated life in that magical city for a journey to the Amazon. They encounter a menagerie of characters who are born to be wild, voiced by Oscar nominee Andy Garcia, Oscar/Emmy/Tony-winner Rita Moreno, Grammy winner Bruno Mars, and Tony winner Kristin Chenoweth.

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.
Framed for a crime he didn't commit, muscle car mechanic and street racer Tobey (Aaron Paul) gets out of prison determined to settle the score with the man responsible for his false conviction.
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.
Earthrise Description
Cross Fire Hero Description
Big Buck Bunny Trailler
Arctic Combat Description

 

 

Quick install guide

 

1. Extract the package and identify the com_sjvideoplayer.zip and mod_sjvideoplayer.zip

2. Log in to the Joomla administration back-end.

3. Select Extensions --> Install/Uninstall from the top menu.

4. In the panel Upload package file, click Browse and locate the com_sjvideoplayer.zip

5. Click the button Upload & Install.

6. Install in the same manner the mod_sjvideoplayer.zip

7. Select Components --> SJ Video Player from the top menu.

6. Open the component and follow setup.

Setup

 Setup SJ Video Player 

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.

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

 

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

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! 


 

Version history

 

v2.0 

Component V1.0 added: 

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

Module features

  • 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

 

v1.0 

  •  Background Color
  •  Mouse Over Color
  •  Item Selected Color
  •  Composition Color
  •  Text Color
  •  Horizontal positioning
  •  Vertical positioning
  •  Playlist Width
  •  Playlist Height
  •  Playlist Item Width
  •  Playlist Item Height
  •  Playlist Text Width
  •  Stage Color
  •  Playbar Skin Color
  •  Playbar Skin Autohide
  •  Playbar Skin (44 skins)
  •  Stage Width
  •  Stage Height
  •  Autoplay enable/disable
  •  Movie Quality
  •  Window mode
  •  Select playlist

v1.1

  •  Create folder for videos from back end
  •  Upload videos from back-end in your created video folder
  •  Create thumbnails folder
  •  Upload thumbnails photo with resize options
  •  Create playlist from back end with a nice fancy button and write description for videos from it.(no need to know any xml language).

v1.2

  • .mp4 format support

v1.3

  • player width
  • player height
  • can be used as video gallery.

 

Support

For any problems regarding our products do not hesitate to contact us on our suport emails:  This email address is being protected from spambots. You need JavaScript enabled to view it. This email address is being protected from spambots. You need JavaScript enabled to view it.  or place your questions, comments and critics in the comment form below.

Contact

If you have any ideas or questions, please feel free to contact us using our contact data or the form below.

 
 
  *
 
  *
  *
 
  *
 
  *
 
  Please enter the characters displayed in the image into the adjacent input field. If you are not able to read them, click the adjacent button to generate a new image.
 
  * Mandatory field
 
Created using the Joomla DFContact component.


License
GNU General Public License

Screenshots

Component backend

Manage videos

component backend videos view

 

Add new video

 

component add new video

Module Backend

module backend

 

 

 

 

Comments   

 
0 #11 Jordan Lund 2014-07-03 07:43
Thanks so much for the support help. Now it's working just fine. The update you sent did the trick. Very pleased with the result.
Jordan
Quote
 
 
0 #10 Bizz 2014-07-03 00:54
#12 Jordan Lund please check your e-mail or install the latest update please
Best Regards
Quote
 
 
0 #9 Jordan Lund 2014-06-28 20:23
I just purchased your video player, and have installed and set up videos, a playlist and the module according to your instructions. The player shows up embedded in its module, and all the videos and their thumbnails show up correctly. However, when I click on the play arrow on the player, or any of the videos in the playlist, nothing plays. Please advise as to what the problem might be?
Here is the URL for the page:
http://www.linerunners.com/index.php/about/jordan-lund
Quote
 
 
0 #8 Bizz 2014-06-05 11:10
I have added a new tab with screenshots
Quote
 
 
0 #7 RL 2014-05-30 19:56
Hi, do you have a backend demo of the video player? Or at least a couple of BE screenshots?
Thanks!
Quote
 
 
0 #6 alf 2014-05-19 11:05
hello this module is responsive, also played vimeo
thanks
Quote
 
 
0 #5 Bizz 2013-08-19 07:44
Hi Eric
I am sorry but mod_sj_videobox is not our product. I suggest contact the devs of that module.
Quote
 
 
0 #4 eric 2013-08-19 04:05
Hi guys,

I got this error when trying to upload the video.

Fatal error: Call to undefined function exif_imagetype( ) in /home/menginee/ public_html/lab server/modules/ mod_sj_videobox /core/helper_im age.php on line 260

Any help please?

Thanks
Quote
 
 
+2 #3 Juan 2013-01-23 12:05
Great !!!

Thank you very much !!!!

Juan
Quote
 
 
0 #2 Bizz 2013-01-23 10:57
Hello Juan
Yes, our SJ Video Player can be used on multiple pages with different playlist for each instance
Quote
 

Add comment


Security code
Refresh