HTML5 media Player



Thank you for purchasing our component. If you have any questions that are beyond the scope of this help file, please feel free to email us via our Envato profile page contact form here.

How to Install#top

< head > setup

Include the following javascript and css code into HEAD section of the page:
							<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css" media="all" />
							<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
							<link rel="stylesheet" type="text/css" href="css/ivag_light.css" />
							
							<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
							<script type="text/javascript" src="js/captionator.js"></script>
							<script type="text/javascript" src="js/jquery.address.js"></script>
							<script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script>
							<script type="text/javascript" src="js/id3-minimized.js"></script>
							<script type="text/javascript" src="js/jquery.dotdotdot.min.js"></script>
							<script type="text/javascript" src="js/new.js"></script>
Some of the files can be removed, as can be seen from the comments, depending on what features are used with the player.
							<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
							<link rel="stylesheet" type="text/css" href="css/ivag_light.css" />
							
							<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
							<script type="text/javascript" src="js/new.js"></script>
These are minimum required files.

< body > setup

Create HTML markup for the player into BODY section of the page:
                            

You can skip ad in

SKIP AD >

0

0:00

/

0:00

EMBED THIS PLAYER
COPY

DOWNLOAD STARTED!

title

NOTHING FOUND!
This is full player markup, many of these elements are optional.
Note: markup differs slightly depending on playlistOrientation, around category and playlist elements order in html.

Include playlist which is going to be loaded inside the player into BODY section of the page.
Self hosted video playlist example:
                            
This is a title
This is short description.
This is long description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in neque.
This is a title
This is short description.
This is long description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in neque.
This is a title
This is short description.
This is long description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in neque.

Activation

Activate the plugin once the document is ready by placing the following into the HEAD section of the page:
                            <script type="text/javascript">
        
                                var ivag_player;  
                                jQuery(document).ready(function($) {
                                    
                                    var settings = {
                                        instanceName:"light",
                                        sourcePath:"",
                                        playlistHolder:"#ivag-main .ivag-playlist-holder",
                                        playlistList:"#ivag-playlist-list",
                                        useDeeplink:false,
                                        activePlaylist:"playlist-video",
                                        activeItem:0,
                                        autoHideInterface:false,
                                        fullscreenInterfaceTimeout:3000,
                                        volume:0.5,
                                        autoPlay:false,
                                        preload:"auto",
                                        randomPlay:false,
                                        loopingOn:true,
                                        autoAdvanceToNextMedia:true,
                                        mediaEndAction:"rewind",
                                        useLivePreview:true,
                                        playlistOrientation:"vrb",
                    
                                        aspectRatio:2,
                                        youtube:{
                                            appId:"",
                                            theme:"light",
                                            chromeless:true
                                        },
                                        vimeo:{
                                            color:"00adef",
                                            badge:false,
                                            byline:false,
                                            portrait:false,
                                            title:false,
                                            chromeless:false
                                        },
                                         
                                        soundCloudAppId:"",
                                        usePlaylistScroll:true,
                                        useInfoScroll:true,
                                        scrollTheme:"light",
                                        playlistOpened:true,
                                        useTooltips:true,
                                        showQualityMenuOnSingleQuality:true,
                                        useKeyboardNavigationForPlayback:true,
                                        useKeyboardNavigationForPlaylist:true,
                                        truncatePlaylistInfo:true,
                                        disableRightClick:false, 
                                        useCaptions:true,
                                        usePlaybackRate:true,
                                        useDownload:true,
                                        autoReuseDownloadMail:true,
                                        useShare:true,
                                        facebookAppId:"",
                                        useFullscreen:true,
                                        useRange:true,
                                        playerSizing:"restrict",
                                        playerWidth:920,
                                        playerHeight:360
                                    };

                                    ivag_player = $("#ivag-main").ivag(settings);

                                });

                            </script>

Configuration #top

Parameter Description
instanceName Unique identifier for player api (instance name must be unique for each instance!).
sourcePath The root location path where all plugin files are located.
playlistHolder Selector for playlist holder element (ivag-playlist-holder). This allows for playlist holder to be separated from the player and located in different location on the page.
playlistList Selector for element which holds list of playlists that can be loaded in the player on start or by request using api method loadMedia.
useDeeplink true, false. Allow direct linking to media in the player with browser url (http://www.your-domain.com#/some-playlist/some-video).
Check working with playlist section for more info.
activePlaylist active playlist to start with from playlistList element.
enter div class=ivag-playlist "id" attribute;
Leave empty for no playlist loaded.
Check working with playlist section for more info.
activeItem active playlist item to start with.
If useDeeplink:false enter number, -1 = no playlist item loaded, 0 = first playlist item, 1 = second playlist item.. etc;
If useDeeplink:true enter div class=ivag-playlist-item "data-id" attribute.
Check working with playlist section for more info.
autoHideInterface true / false. Auto hide player controls on mouse out.
fullscreenInterfaceTimeout Time after controls and playlist hide in fullscreen if mouse inactive (in miliseconds).
autoClosePlaylistOnFullscreenEnter Auto close playlist on fullscreen enter (if playlist was opened).
volume 0-1 (number)
autoPlay true / false. Defaults to false on mobile.
preload auto/metadata/none. html5 preload media attribute
randomPlay true / false. Randomize playback in playlist.
loopingOn true / false. On playlist end (last item in playlist) rewind to beginning
autoAdvanceToNextMedia true / false. Action on media end.
mediaEndAction loop / rewind (if autoAdvanceToNextMedia:false)
useLivePreview true / false. Play video on playlist item rollover. Defaults to false on mobile.
playlistOrientation vrb / vb / hb (vertical right bottom / vertical bottom / horizontal bottom).
Note: Different playlistOrientation requires some different player HTML markup and css. Check player markup section for more info.
aspectRatio media aspect ratio for self hosted videos and images (0 = original / 1 = fit inside / 2 = fit outside). Defaults to 1 on mobile.
Youtube https://developers.google.com/youtube/player_parameters
appId Youtube application id, tutorial here: https://www.youtube.com/watch?v=pJSkp719HeE
theme light / dark. Youtube player theme color.
chromeless true / false. Youtube chromeless skin.
Vimeo https://developer.vimeo.com/player/embedding
color Specify the color of the video controls.
badge true / false. Enables or disables the badge on the video.
byline true / false. Show the user’s byline on the video.
portrait true / false. Show the user’s portrait on the video.
title true / false. Show the title on the video.
chromeless true / false. Vimeo chromeless skin.
Note: This will just treat player like it was chromeless and add custom controls to the player. To remove actual Vimeo player elements (and make it chromeless) you needs vimeo Plus or Pro account!
soundCloudAppId SoundCloud application id, register here: http://soundcloud.com/you/apps/new and enter Client ID
usePlaylistScroll true / false. Use playlist scroll
useInfoScroll true / false. Use info (media description) scroll
scrollTheme light / dark. Scroll plugin used: http://manos.malihu.gr/jquery-custom-content-scroller/
Note: Some CSS for the scrollbar is modified in jquery.mCustomScrollbar.css file, so if you replace it with new version from their site, or try to apply new scroll theme other than light / dark, there could be some visual differences in playlist scroll!
playlistOpened true / false. Playlist opened on start.
useTooltips true / false. Use tooltips on buttons. Defaults to false on mobile.
showQualityMenuOnSingleQuality true / false. Show quality menu when only single media quality available.
useKeyboardNavigationForPlayback true / false. Keyboard navigation for media (left arrow = previous media, right arrow = next media, space = toggle playback, m = toggle mute)
useKeyboardNavigationForPlaylist true / false. Keyboard navigation for playlist items. Comes from playlist scroll plugin: http://manos.malihu.gr/jquery-custom-content-scroller/
truncatePlaylistInfo true / false. Truncate playlist item description text, plugin used: http://dotdotdot.frebsite.nl/
disableRightClick true / false. Disable right click context menu over player.
useCaptions true / false
usePlaybackRate true / false
useDownload true / false
autoReuseDownloadMail true / false. For media download on mobile. Save and reuse user email after first input.
useShare true / false
Supported sharing sites are Facebook, Twitter, Google Plus.
If you would like to modify sharing content look into IVAGShareManager.
facebookAppId Facebook application id, create new application here: https://developers.facebook.com/apps and enter App ID
useFullscreen true / false
useRange true / false
playerSizing restrict / parent / none (restrict player width, height / take 100% parent size / dont resize player)
playerWidth max player width (if playerSizing:restrict)
playerHeight max player height (if playerSizing:restrict)

Player markup #top

Full player markup is shown in How to Install section.
This is minimum required markup for the player (without the playlist).
                            
<div id="ivag-main"> is element in your page in which you will place the player.

Player markup differs slightly depending on playlistOrientation, around category and playlist elements order in html, specifically this part:
                            
                            

title


Note: Just changing playlistOrientation between 3 possible values:
vrb / vb / hb (vertical right bottom / vertical bottom / horizontal bottom)
is not enough to change player layout, because except some different HTML menitoned above, some CSS is different as well!

Refer to different examples included in the package:
index_light.html - vertical right bottom playlistOrientation
index_light_horiz.html - horizontal bottom playlistOrientation
index_light_horiz2.html - vertical bottom playlistOrientation



Player elements

1. To remove some elements from the player its enough to remove them from the markup, for example:
To remove logo, remove this HTML:
                            
                            

To remove right click context menu, remove this HTML:
                            

2. Removing some elements requires changing Configuration as well, for example:
To remove share, remove this HTML:
                            
                            
and set useShare:false

To remove fullscreen, remove this HTML:
                               
                            
and set useFullscreen:false

Note: if you remove fullscreen HTML above for example, and set useFullscreen:true, you can still use fullscreen with api toggleFullscreen();
This rule applies for many elements in the player like range, volume, captions, playback rate... etc (its not necessary to have HTML elements in the player to use those features with api)



Playlist

Playlist is optional.
1. It can be part of the player, and resized with the player as well.
For this to happen, playlist needs to be located inside: ivag-wrapper element!

2. If we move playlist outside this element, it will not resize with the player any more.
Playlist can be placed anywhere on the page completely separated from the player (index_dark3.html example uses this feature).
Use this option playlistHolder:"#ivag-main .ivag-playlist-holder" to specify playlist location.

3. To remove the playlist, remove this element completely:
                            
...



Player size

Player size (together with the playlist, if playlist is used) is controlled with this option:

playerSizing restrict / parent / none (restrict player width, height / take 100% parent size / dont resize player)
playerWidth max player width (if playerSizing:restrict)
playerHeight max player height (if playerSizing:restrict)

This code in main plugin file resizes the player:
                            function checkPlayerSize(){
                            ...
                            }

If there is no playlist used, then playerWidth and playerHeight represent just player size. If playlist is used, then player size becomes playerWidth and playerHeight minus playlist size which is calculated in the function above.

Working with categories #top

Categories are optional playlist selector menu.
If you dont want to use categories, remove this HTML markup:
    
                            

title


If categories are used, category menu is going to be created for every playlist which has following data: div class="ivag-playlist-data"
    
                        
Image category
This is a playlist of images.
...
Video category
This is an video mp4 playlist.
...
So this markup would create category menu for image playlist and for video playlist.

Parameter Required Description
data-thumb category thumbnail
ivag-title title for category item
ivag-short-desc short description for category item

Category can also contain some global data which applies for every item in that category.
    
                        
Video category
This is an video mp4 playlist.
...
This category contains global ads which will be applied to every video in this playlist. Check adverts section for more details about ads.

Working with playlist #top

This section explains how to load a playlist into the player on start (using useDeeplink, activePlaylist, activeItem options)

Playlist example with 3 videos:
                            
With useDeeplink disabled:
                            useDeeplink:false,
                            activePlaylist:"playlist-video",
                            activeItem:0,
This will load first video in the playlist.
                            useDeeplink:false,
                            activePlaylist:"playlist-video",
                            activeItem:2,
This will load third video in the playlist.
                            useDeeplink:false,
                            activePlaylist:"playlist-video",
                            activeItem:-1,
This will load playlist without loading any video.

With useDeeplink enabled:
                            useDeeplink:true,
                            activePlaylist:"playlist-video",
                            activeItem:'video1',
This will load first video in the playlist.
Direct url to this video would be: http://www.your-domain.com#/playlist-video/video1
                            useDeeplink:true,
                            activePlaylist:"playlist-video",
                            activeItem:'video3',
This will load third video in the playlist.
Direct url to this video would be: http://www.your-domain.com#/playlist-video/video3
                            useDeeplink:true,
                            activePlaylist:"playlist-video",
                            activeItem:'',
This will load playlist without loading any video.


Playlist example with 3 youtube single videos:

                            
With useDeeplink disabled:
                            useDeeplink:false,
                            activePlaylist:"playlist-youtube-1",
                            activeItem:0,
This will load first video in the playlist.
                            useDeeplink:false,
                            activePlaylist:"playlist-youtube-1",
                            activeItem:2,
This will load third video in the playlist.

With useDeeplink enabled:
                            useDeeplink:true,
                            activePlaylist:"playlist-youtube-1",
                            activeItem:'youtube-single1',
This will load first video in the playlist.
Direct url to this video would be: http://www.your-domain.com#/playlist-youtube-1/youtube-single1
                            useDeeplink:true,
                            activePlaylist:"playlist-youtube-1",
                            activeItem:'youtube-single3',
This will load third video in the playlist.
Direct url to this video would be: http://www.your-domain.com#/playlist-youtube-1/youtube-single3


Playlist example with vimeo channel:

                            
With useDeeplink disabled:
                            useDeeplink:false,
                            activePlaylist:"playlist-vimeo-8",
                            activeItem:0,
This will load first video in the playlist.
                            useDeeplink:false,
                            activePlaylist:"playlist-vimeo-8",
                            activeItem:5,
This will load sixth video in the playlist.

With useDeeplink enabled:
                            useDeeplink:true,
                            activePlaylist:"playlist-vimeo-8",
                            activeItem:'vimeo-channel1',
This will load first video in the playlist.
Direct url to this video would be: http://www.your-domain.com#/playlist-vimeo-8/vimeo-channel1
                            useDeeplink:true,
                            activePlaylist:"playlist-vimeo-8",
                            activeItem:'vimeo-channel5',
This will load sixth video in the playlist.
Direct url to this video would be: http://www.your-domain.com#/playlist-vimeo-8/vimeo-channel5


index_light.html example contains all possible playlist types. From there you can quickly copy any playlist you need to some other demo.

Working with media #top

Self hosted video files - #top

Player support self hosted mp4 video files.

playlist item example

                            
This is a title
This is short description.
This is long description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in neque.
Parameter Required Description
data-id required if useDeeplink:true unique string for useDeeplink
example:
http://www.your-domain.com#/playlist-video/video1
http://www.your-domain.com#/playlist-video/video2
data-mp4 yes path to mp4 file
data-mp4 is default, any number of qualities can be added.
To add multiple qualities do this:
data-mp4="../media/video/1/main/01.mp4"
data-mp4-720p="../media/video/1/main/01_720p.mp4"
data-mp4-1280p="../media/video/1/main/01_1280p.mp4"
New quality has to have this format: data-mp4-[string]

data-mp4 can be any online link which is public and plays when opened in a browser, so for example we can have links from Googe Drive, Amazon S3... etc
data-poster yes poster path for autoPlay:false
data-thumb thumbnail path for playlist item
data-download download path
data-video-preview required if useLivePreview:true small video for thumbnail video preview on mouse rollover
data-aspect-ratio override aspectRatio value for individual media
ivag-title title for playlist item
ivag-short-desc short description for playlist item
ivag-desc long description




Self hosted audio files - #top

Player support self hosted mp3 audio files.

playlist item example

                            
This is a title
This is short description.
This is long description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in neque.

In case of audio, aspect ratio is applied to either audio slideshow or thumbnail media.
Parameter Required Description
data-id required if useDeeplink:true unique string for useDeeplink
example:
http://www.your-domain.com#/playlist-audio/audio1
http://www.your-domain.com#/playlist-audio/audio2
data-mp3 yes path to mp3 file
data-mp3 is default, any number of qualities can be added.
To add multiple qualities do this:
data-mp3="../media/audio/1/main/01.mp3"
data-mp3-320kbps="../media/audio/1/main/01_320kbps.mp3"
data-mp3-128kbps="../media/audio/1/main/01_128kbps.mp3"
New quality has to have this format: data-mp3-[string]

data-mp3 can be any online link which is public and plays when opened in a browser, so for example we can have links from Googe Drive, Amazon S3... etc
data-thumb thumbnail path for playlist item
data-download download path
data-video-preview required if useLivePreview:true small video for thumbnail video preview on mouse rollover
data-aspect-ratio override aspectRatio value for individual media
ivag-title title for playlist item
ivag-short-desc short description for playlist item
ivag-desc long description


Audio files can have optional image slideshow attached which will display while audio plays:
                            
Parameter Required Description
data-path yes path to image file
data-duration yes in seconds
data-aspect-ratio data-aspect-ratio - override aspectRatio value for individual media


For audio files display works as follows: (what is going to be shown in the player area while audio plays)
1. use image slideshow if exist
2. use thumbnail is exist
3. do nothing



Image - #top

playlist item example

                            
This is a title
This is short description.
This is long description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in neque.
Parameter Required Description
data-id required if useDeeplink:true unique string for useDeeplink
example:
http://www.your-domain.com#/playlist-image/image1
http://www.your-domain.com#/playlist-image/image2
data-path yes path to image file
data-path is default, any number of qualities can be added.
To add multiple qualities do this:
data-path="../media/audio/1/main/01.jpg"
data-path-1500x750="../media/audio/1/main/01_1500x750.jpg"
data-path-2300x1200="../media/audio/1/main/01_2300x1200.jpg"
New quality has to have this format: data-path-[string]
data-thumb thumbnail path for playlist item
data-duration indicates how long image is going to be shown before advancing to the next playlist item (seconds)
data-download download path
data-video-preview required if useLivePreview:true small video for thumbnail video preview on mouse rollover
data-aspect-ratio override aspectRatio value for individual media
ivag-title title for playlist item
ivag-short-desc short description for playlist item
ivag-desc long description




Soundcloud - #top

Soundcloud requires API key, register here: http://soundcloud.com/you/apps/new and enter Client ID in settings: soundCloudAppId

Soundcloud playlist examples

track set:
                            
user tracks:
                            
single track:
                            
user likes:
                            
group:
                            
Add
data-download
attribute to make tracks downloadable, if track is downloadable by Soundcloud.



Podcast - #top

Podcast playlist example

                            
Add
data-download
attribute to make tracks downloadable.



Youtube - #top

Youtube can be used with or without API.

1. Using Youtube with API

When API is used, we can retrieve specific information for each video, like thumbnails, title, description etc...
YouTube API: https://developers.google.com/youtube/v3/
Youtube requires API key which needs to be entered in settings: youtube:{appId:"api key here"}
Go here for the API key: https://console.developers.google.com
Tutorial on how to create Youtube API key: https://www.youtube.com/watch?v=pJSkp719HeE

Youtube playlist examples

single videos:
                            
single video list:
                            
playlist:
                            
video query:
                            
channel:
                            
user channel:
                            


1. Using Youtube without API

Without API we can only play Youtube single videos.

Youtube playlist examples

single videos:
                            
single video list:
                            
Notice data-noapi attribute in above examples!



Vimeo - #top

Vimeo can be used with or without API.

1. Using Vimeo with API

When API is used, we can retrieve specific information for each video, like thumbnails, title, description etc...
Vimeo API: https://developer.vimeo.com/api/start
Vimeo requires API key, you need to register new application: https://developer.vimeo.com/apps/new and from OAuth2 tab get:
Client Identifier (key), Client Secret and Access Token and enter them in the following file: includes / vimeo_acc.php
Remember to always test online!

Vimeo playlist examples

single videos:
                            
videos in user portfolio:
                            
list of videos that a user appears in:
                            
list of videos that the user likes:
                            
list of videos uploaded by a user:
                            
video search:
                            
list of the videos in an group:
                            
list of the videos in an channel:
                            
list of the videos in an album:
                            
list of the videos in an channel:
                            
related videos:
                            


1. Using Vimeo without API

Without API we can only play Vimeo single videos.

Vimeo playlist examples

single videos:
                            
Notice data-noapi attribute in above examples!



Reading files from directories - #top

Audio, video and images can be read automatically from folders.

Video folder playlist example

                            
data-limit
is optional attribute to limit number of results retrieved.

Audio folder playlist example

                            
data-id3
is optional attribute to read id3 tags from mp3 files.

Image folder playlist example

                            
Rules:
1. Folder files cannot have multiple qualities!
2. Only single folder can be read at a time, so to read multiple folders, list them one by one:
                            

Folder organization

Example: data-path="../media/video/1/" (we are targeting directory named "1", this can be any path as long its relative to player root)
Inside directory named "1" there has to be main and thumb directory (this rule always applies).
You need to have this organization when loading files from folders.
In our example, video and image files need to be named the same!
So you end up with this structure:
main directory
01.mp4 (main video)
01.jpg (poster image)
thumb directory (required if playlist is used)
01.jpg (image thumbnail)
01.mp4 (small video thumbnail, required if useLivePreview:true)


The same rule applies for audio:
main directory
01.mp3
thumb directory (required if playlist is used)
01.jpg (image thumbnail)




Playlist from XML source - #top

Playlist can be loaded from XML file.
This only important rule is that XML playlist markup is exactly the same as the playlist markup in HTML!
So you can just copy playlist markup from HTML and paste it in xml file.

XML playlist example

                        
Example of XML playlist file is provided in xml directory.



Mixed media - #top

It is possible to mix different media and playlists together.

Example of playlist with different playlist items:

                            
Another example: (vimeo channel, youtube playlist, soundcloud track set all loaded in a single playlist)

                            




Custom iframe - #top

It is possible to load custom iframe into the player.
Api will not be present in this case (events, callbacks... etc)
Example: (these have custom thumbnail, title, short description set)

                            
Glamour Woman Dj's
Live music with video clips of Models and various
Les tendances Fashion 3Suisses
Retrouvez tous les produits Mode de la nouvelle collection Automne-Hiver 2015
data-path - iframe path



General - #top

Overriding values

You can override some playlist item values for ANY media (Youtube, Vimeo, audio, image...), for example:
This Youtube single video has custom thumbnail, video thumbnail preview, title, short description, description set:
                            
This is a title
This is short description.
This is long description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in neque.
This Vimeo channel has custom thumbnail, title, short description, description set: (this will apply for every video within that channel!)
                            
This is a title
This is short description.
This is long description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in neque.

Playback features #top

Range - #top

(data-range)
                                
                                

Value can be empty: data-range which will just display range menu.
Value can be set: data-range="2,6" which will apply range to media (2 values are requires separated by comma (seconds).

Range is calculated on class="ivag-range-a-point class="ivag-range-b-point elements.
                                
                                
These elements are not necessary for range use and can be removed from the player.
Necessary is to set useRange:true and add data-range to playlist item.
Then we can use api setRange(2,6);




Start / end - #top

(data-start / data-end)
                                
                                

Set start and/or end media time (seconds).
Start / end time takes priority over data-range in case both values are set.



Playback rate - #top

(data-playback-rate)
                                
                                

Value can be empty: data-playback-rate which will just display playback-rate menu with default value of "1" active.
Value can be set: playback-rate="2" which will apply playback-rate to media.

Applies to HTML5 audio/video and Youtube.
Default playback rates HTML5 audio/video are: [0.25,0.5,1,1.25,1.5,2] (from PlaybackRateManager)
For Youtube playback rates are set by Youtube api.

Playback rate menu elements:
                                

0

These elements are not necessary for playback rate use and can be removed from the player.
Necessary is to set usePlaybackRate:true and add data-playback-rate to playlist item.
Then we can use api setPlaybackRate(2);
For Youtube, playback rate menu (if used) is automatically going to be hidden if there is only 1 playback rate available.




Quality - #top

Self hosted video example:
                                
data-mp4 is default and required quality.
To add multiple qualities list any number of qualities:
                            
New quality has to have this format: data-mp4-[string]
Then when quality menu is being generated in controls, it will create this menu: (menu item name is generated from [string])
default
720p
1280p


Self hosted audio example:
                            
data-mp3 is default and required quality.
New quality has to have this format: data-mp3-[string]
Then when quality menu is being generated in controls, it will create this menu:
default
320kbps
128kbps


Image example:
                            
data-path is default and required quality.
New quality has to have this format: data-path-[string]
Then when quality menu is being generated in controls, it will create this menu:
default
1500x750


For Youtube, video qualities are automatically created from Youtube api.



You can also specify other than default quality selected on start with: data-quality attribute.
Self hosted video example:
                            
We have now set data-quality="1280p" as default quality on start.
Youtube example:
                            
We have now set data-quality="hd720" as default quality on start.
More on Youtube qualities: https://developers.google.com/youtube/iframe_api_reference#Playback_quality


Quality menu elements:
                              
                            
These elements are not necessary for quality use and can be removed from the player.
We can just use api:
setQuality('hd720');
setQuality('1500x750')




Captions - #top

Captions are available in 2 formats:
1. real captions (srt/vtt format) - only for self hosted video
2. HTML captions (created from HTML elements) - for all media

1. Self hosted video example with real captions:
                                
When caption menu is being generated in controls, it will create this menu: (menu item name is generated from srclang)
en
de
ja


When using api call setCaption('en'); (target caption with srclang)
default="default" makes caption active on start (optional).

Captions are created with this plugin: https://github.com/cgiffard/Captionator
More info on track element: http://www.sitepoint.com/comprehensive-look-html5-track-element/
If you need to set up mime types on your server for vtt support, you can add following lines in your .htaccess file on your server:
AddType text/vtt .vtt




2. Youtube example with HTML captions:
                                
This type of caption can be added to any media.
Check captions.xml file to see captions structure:
                            
This is English subtitle for the player.
Any mix of video, audio and images is supported even within the same playlist item.
Das ist englische Untertitel für den Spieler.
Beliebige Kombination von Video, Audio und Bildern wird auch innerhalb des gleichen Elements Playlist unterstützt.
Each ivag-sub-group is new caption language.
data-label is menu name.
data-default makes subtitle active on start (optional).
Each ivag-sub is new caption.
data-show="2" (seconds)
data-hide="8" (seconds)
data-show (empty attribute means appear on start)
data-hide (empty attribute means show till the end)

When caption menu is being generated in controls, it will create this menu: (menu item name is generated from data-label)
English
German


When using api call setCaption('English'); (target caption with data-label)


These HTML captions are appended inside ivag-elem-holder element:
                            

Caption menu elements:
                              
                            
These elements are not necessary for caption use and can be removed from the player.
Necessary is to set useCaptions:true and add captions to playlist item.
Then we can use api setCaption('en');




Inline events - #top

Timed inline elements can be placed over the player area at specific times (HTML / javascript / iframe etc.. anything that can be added to the DOM)
They can be added to any media (video, audio, Youtube, Vimeo, image...).
Example of playlist item with events:
                            

This is a video advert which plays before main media.

<img src="data/close-btn.png" alt=""/>

Adverts can be anything from video, audio, youtube, vimeo, image.

<img src="data/close-btn.png" alt=""/>

Adverts can have skip button, url links,

<img src="data/close-btn.png" alt=""/>

Subtitles, multiple qualities, playback rate, range, start / end time,

<img src="data/close-btn.png" alt=""/>

HTML / javascript / iframe etc.. inline elements.

<img src="data/close-btn.png" alt=""/>
Each ivag-elem is new event which is appended inside ivag-elem-holder element:
                                
ivag-elem has "id" attribute so it can be targeted with css or javascript, and it can contain anything which can be added inside the DOM.
data-show="2" (seconds)
data-hide="8" (seconds)
data-show (empty attribute means appear on start)
data-hide (empty attribute means show till the end)

index_bg_ads.html demo contains more examples of created events.

Adverts #top

Media playback rules:
1. Every playlist item can be of any type (video, audio, Youtube, Vimeo, image...), we call this main media.
2. Every playlist item can contain adverts which can be of any type (video, audio, Youtube, Vimeo, image...), we call this adverts (advert media).

Adverts come in 3 different types:
1. pre advert - advert before main media starts (only one allowed, plays only once)
2. mid advert - adverts during main media play (unlimited allowed, play repeatedly if playback of main media is rewinded)
3. end advert - advert after main media ends (only one allowed, plays only once)

- adverts can contain optional skip button and url link.
- seekbar is disabled while advert plays.

Example of media playback:
- First main playlist item is self hosted video.
- It start with optional pre advert before main media starts which is na audio mp3 file.
- When pre advert is skipped or finished, main media starts to play.
- At 10 seconds, middle advert is launched which is Youtube single video, when this is skipped or finished, main media continues to play.
- At 25 seconds, middle advert is launched which is self hosted video, when this is skipped or finished, main media continues to play.
- At 40 seconds, middle advert is launched which is image with duration set, when this is skipped or finished, main media continues to play.
...etc...
- When main media ends, end advert is launched which is Vimeo video, when this is skipped or finished, playback goes to next playlist item.
We can this one media sequence (which is one playlist item).

Lets replicate example from above:
                            
So this is one playlist item (one media sequence).

Advert options:

Parameter Required Description
data-skip-enable show skip button with this attribute.
data-skip-enable = "0" - show skip button from start.
data-skip-enable = "5" - show skip button with 5 seconds skip time.
If data-skip-enable is ommited, no skip button will appear.
data-begin required for mid advert data-begin="10" - begin middle advert at 10 seconds of main media play.
Every mid advert requires diferent data-begin time. If 2 or more mid adverts have same data-begin time, only first will be played!
data-link url link which will launch on advert pause playback.
data-target target for url link: http://www.w3schools.com/tags/att_a_target.asp


These adverts can be added to ANY media.
Self hosted audio file with adverts:
                            
Youtube single video with adverts:
                            
Vimeo album with adverts: (these adverts are going to be added to every video in this album!)
                            


Adverts can also have the same data as normal playlist items.
Adverts only cannot contain other adverts!

This Youtube single pre advert has:
data-start, data-end, data-quality, data-playback-rate attributes,
custom title, short description, description,
captions, timed inline events:
                            
This is a title
This is short description.
This is long description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in neque.

Timed Event from 0 to 3 seconds
Some link

<img src="data/close-btn.png" alt=""/>

Timed Event displayed through whole video
Some link

<img src="data/close-btn.png" alt=""/>

Timed Event 5 to 10 seconds
Any HTML

<img src="data/close-btn.png" alt=""/>

Timed Event from 25 till end

<img src="data/close-btn.png" alt=""/>

Its possible to define adverts which will repeat for every item in playlist by creating global ads in category data, check Working with categories.

Callbacks #top

Parameter Description
ivagSetupDone (instance, instanceName) Called when component setup is finished and is ready to use API. Returns player instance, instanceName.
ivagPlaylistEnd (instance, instanceName) Called on playlist end. Returns player instance, instanceName.
ivagDoneResizing (instance, instanceName) Called when window resize event happens in gallery. Returns player instance, instanceName.
ivagPlaylistStartLoad (instance, instanceName) Called when playlist load starts. Returns player instance, instanceName.
ivagPlaylistEndLoad (instance, instanceName) Called when playlist load ends. Returns player instance, instanceName.
ivagItemTriggered (instance, instanceName, counter) Called when new media is triggered. Returns player instance, instanceName, media counter.
ivagMediaStart (instance, instanceName, counter) Called when media starts. Returns player instance, instanceName, media counter.
ivagMediaPlay (instance, instanceName, counter) Called when media is played. Returns player instance, instanceName, media counter.
ivagMediaPause (instance, instanceName, counter) Called when media is played. Returns player instance, instanceName, media counter.
ivagMediaSequenceEnd (instance, instanceName, counter) Called when media sequence ends. Returns player instance, instanceName, media counter.
ivagPlaylistItemEnabled (instance, instanceName, target, counter) Called on playlist item enable. Returns player instance, instanceName, playlist item (target), media counter.
ivagPlaylistItemDisabled (instance, instanceName, target, counter) Called on playlist item disable. Returns player instance, instanceName, playlist item (target), media counter.
ivagPlaylistItemClick (instance, instanceName, target, counter) Called on playlist item click. Returns player instance, instanceName, playlist item (target), media counter.
ivagPlaylistItemRollover (instance, instanceName, target, counter) Called on playlist item mouseenter. Returns player instance, instanceName, playlist item (target), media counter.
ivagPlaylistItemRollout (instance, instanceName, target, counter) Called on playlist item mouseleave. Returns player instance, instanceName, playlist item (target), media counter.
ivagMediaEmpty (instance, instanceName) Called when active media gets removed (no active media). Returns player instance, instanceName.
ivagPlaylistEmpty (instance, instanceName) Called when playlist becomes empty (no items in playlist after new playlist has been created or last playlist item removed from playlist, NOT after destroyPlaylist!). Returns player instance, instanceName.
ivagDestroyMedia (instance, instanceName) Called when active media is destroyed. Returns player instance, instanceName.
ivagDestroyPlaylist (instance, instanceName) Called when active playlist is destroyed. Returns player instance, instanceName.
ivagFsEnter (instance, instanceName) Called on fullscreen enter. Returns player instance, instanceName.
ivagFsExit (instance, instanceName) Called on fullscreen exit. Returns player instance, instanceName.
ivagCaptionChange (instance, instanceName, lang) Called on caption change. Returns player instance, instanceName, caption language.
ivagQualityChange (instance, instanceName, quality) Called on quality change. Returns player instance, instanceName, quality.
ivagPlaybackRateChange (instance, instanceName, rate) Called on playback rate change. Returns player instance, instanceName, playback rate.
ivagCategoryItemEnabled (instance, instanceName, target, id) Called on playlist item enable. Returns player instance, instanceName, playlist item (target), category id.
ivagCategoryItemDisabled (instance, instanceName, target, id) Called on playlist item disable. Returns player instance, instanceName, playlist item (target), category id.
ivagCategoryItemRollover (instance, instanceName, target, id) Called on playlist item mouseenter. Returns player instance, instanceName, playlist item (target), category id.
ivagCategoryItemRollout (instance, instanceName, target, id) Called on playlist item mouseleave. Returns player instance, instanceName, playlist item (target), category id.
ivagEventShow (instance, instanceName, id) Called on event item show. Returns player instance, instanceName, event item id attribute.
ivagEventHide (instance, instanceName, id) Called on event item hide. Returns player instance, instanceName, event item id attribute.

Note: Some of these events are disabled (commented out) for performance reasons, and should be enabled in main plugin file, like:

  • ivagCategoryItemRollover
  • ivagCategoryItemRollout
  • ivagEventShow
  • ivagEventHide

After ivagSetupDone fires, player API can be used.

API methods #top

Parameter Description
playMedia():void Play active media
pauseMedia():void Pause active media
togglePlayback():void Toggle active media playback
nextMedia():void Play next media
previousMedia():void Play previous media
setAutoPlay(val:Boolean):void Set autoplay
getVolume():Number Get volume (0-1)
setVolume(Number):void Set volume (0-1)
toggleMute():void Toggle mute
seek(value:Number, direct:Boolean):void Seek media:
value: (time in seconds / percent)
direct: (default true: time, false: percent)
getCurrentTime():Number Get current time
getDuration():Number Get duration
getLoadProgress():Number Get load progress (0-1)
toggleCategory(value):void Toggle between category and playlist
value: true/false/void (open/close/toggle)
togglePlaylist(value):void Toggle playlist
value: true/false/void (open/close/toggle)
toggleInterface(value):void Toggle player interface (controls.. etc)
value: true/false/void (open/close/toggle)
toggleShare(value):void Toggle share
value: true/false/void (open/close/toggle)
toggleEmbed(value):void Toggle embed
value: true/false/void (open/close/toggle)
toggleInfo(value):void Toggle media description
value: true/false/void (open/close/toggle)
toggleRandom(value):void Toggle random play
value: true/false/void (open/close/toggle)
toggleLoop(value):void Toggle playlist loop
value: true/false/void (open/close/toggle)
download(path:String, title:String):void download file:
path: file download path (required)
title: file title
toggleSearch(value):void Toggle search
value: true/false/void (open/close/toggle)
search(type:String, query:String, limit:Number, clear:Boolean):void Search media
type: youtube, vimeo, soundcloud (required)
query: search query (required)
limit: results limit
clear: clear playlist
toggleFullscreen():void Toggle fullscreen
setQuality(value:String):void Set quality
getCurrentQuality():String Get current quality
getQualityData():Array Get available qualities for active media
setCaption():void Set caption
getCurrentCaption():String Get current caption
getCaptionData():Array Get available captions for active media
setPlaybackRate():void Set playback rate
getCurrentPlaybackRate():String Get current playback rate
getPlaybackRateData():Array Get available playback rates for active media
toggleRange(value):void Toggle range
value: true/false/void (open/close/toggle)
setRange(a:int, b:int):void Set range (seconds)
a: start
b: end
resetRange():void Reset range
destroyMedia():void Destroy active media
destroyPlaylist():void Destroy active playlist
sort(type:String, reverse:Boolean):void Sort playlist items (this also changes playback order!)
type: title, random (required)
reverse: title ascending / title descending
loadMedia(value):void Load media/playlist:
useDeeplink:true
enter div class=ivag-playlist "id" attribute / div class=ivag-playlist-item "data-id" attribute (single or two level).
useDeeplink:false
for media enter number (counting starts from 0)
for playlist enter div class=ivag-playlist "id" attribute.
addTrack(format:String, track:String/Array, playit:Boolean, position:int):void Add track to playlist:
format: type of track, html/data (required)
track: track or array of tracks (String/Array) (required)
playit: automatically play track after add
position: position to insert tracks (counting starts from 0, leave out parameter for the end append)
removeTrack(String/int):void remove track from current playlist
id: track title (String) / int (counting starts from 0).
initScroll(value):void init playlist or info scroll
value: scroll element selector (ivag-playlist-inner / ivag-info-container)
destroyScroll(value):void Destroy playlist or info scroll
value: scroll element selector (ivag-playlist-inner / ivag-info-container)
cleanPreviewVideo():void Clean playlist item rollover video playback ( useLivePreview )
trackMediaData(value):void Start/stop track media data interval manually (where load progress / play progress / time / range ... are calculated)
value: calling this function with any value will start interval, no value only stops interval
getPlaylistLength():int Return number of items in playlist.
getInstanceName():String Return instance name
getMediaPlaying():Boolean Return media playing or paused
getPlaylistTransition():Boolean Return playlist loading (is playlist loading)
getPlaylistLoaded():Boolean Return playlist loaded (finished loading)
getSetupDone():Boolean Return component setup finished (API can be used)
getActiveItemId():int Return active item id in playlist (counting starts from 0)
getPlaylistData():Array Return playlist data for active playlist
getCurrMediaData():Object Return media data for active media
getSettings():Object Return instance settings
skipAd():void Skip advert

Example of API is located in index_light.html demo.

Special features #top

ivag-click-locked - prevent click on playlist item within that playlist holder
ivag-hover-locked - prevent hover events on playlist item within that playlist holder
index_dark4_drag.html example has this implemented:
                            




Volume

Volume can autohide or stay opened.
ivag-autohide - autohide volume
   
                        

ivag-vertical - makes volume vertical
index_bg.html , index_audio_player2.html example has this implemented:
   
                            
Note: This just tells the code to calculate volume on vertical side, nothing to do with css or volume styling / look!

Troubleshooting #top

Self hosted video/ audio doesnt play

On some older browsers like IE8 which does not support HTML5 video, flash will be used to play audio/video so its important to use this player online becase flash does not work offline.
If your audio/video dont start playing until they are fully loaded then they are encoded with the metadata at the end, this can be easily fixed by using http://renaun.com/blog/code/qtindexswapper/

If you have trouble playing audio/video on your server in some browsers, and you get an errors in browser console similar to these:
Specified "type" of "video/mp4" is not supported. Load of media resource ... failed.

HTTP "Content-Type" of "audio/mpeg" is not supported. Load of media resource ... failed.

This is a mime type problem. You need to add following lines in your .htaccess file on your server.
For video:
AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm

For audio:
AddType audio/aac .aac
AddType audio/mp4 .mp4 .m4a
AddType audio/mpeg .mp1 .mp2 .mp3 .mpg .mpeg
AddType audio/ogg .oga .ogg
AddType audio/wav .wav
AddType audio/webm .webm

More details: http://voice.firefallpro.com/2012/03/html5-audio-video-mime-types.html


Autoplay mobile

autoPlay is automatically set to false on mobile.
This means when you set autoPlay:true in settings, it will be true on desktop, but on mobiles it will be false.
AutoPlay doesnt work on IOS, and possibly some other mobiles out there, trying to set otherwise it could break the playback all together: User Control of Downloads Over Cellular Networks


Volume on mobile

You cannot control the volume on IOS with javascript, you have to use the physical button on the actual phone!
This might be true for some other mobiles out there, but for IOS, its definitely true: Volume Control in JavaScript


Multiple instance

Playing MULTIPLE instances at the same time causes bugs in IOS: Multiple Simultaneous Audio or Video Streams

Vimeo API has bug with MULTIPLE instances on the same page: https://github.com/vimeo/player-api/pull/33