Discussion on HTML5 Image Video Audio Gallery with Playlist


Tean supports this item


This author's response time can be up to 2 business days.

79 comments found.


r3chn3r Purchased


Thank you..

Quick questions..

I used your product to make this: https://8ing.com/slvidz/deploy/index_dark_db.php Where are the controls? Are they hidden?

Is there a way to full screen the player in the page?

Thank you in advance..


1. Add https to bootstrap icons since you use https


or remove prefix


2. You can make it fullscreen, copy some css from index_dark2_100.html or some other 100% example. Size it only the mater of css.


mytom Purchased

Hi tean! Why have you removed ivag-slideshow from audio files in the last update package?

Because I havent found it useful.


r3chn3r Purchased

Thank you so much for your previous reply! Exactly what I needed to know.

I wanted to bring up that the when adding vimeo videos via the admin manager, it doesn’t work. Is there something special about vimeo I might be missing? Up till now I’ve only been using mp4

Vimeo works if you write html yourself? What html do you write?

Hello Tean, I’ve bought your new “HTML5 Image Video Audio Gallery with Playlist” and it seems to be great ! Unfortunately, i can’t use the database because of fileinfo and mysqlnd wich are not installed on my webserver and provider (www.amen.fr) I face another problem, on some videos, I can only hear the sound but can’t see the film ? Thanks for your support Olivier Lille (FRANCE)

I have checked your link, if you cant see the video (but can only hear the audio) I suggest you try different video encoding.

Hello Tean, I’ve bought your new “HTML5 Image Video Audio Gallery with Playlist” and it seems to be great ! Unfortunately, i can’t use the database because of fileinfo and mysqlnd wich are not installed on my webserver and provider (www.amen.fr) I face another problem, on some videos, I can only hear the sound but can’t see the film ? Thanks for your support Olivier Lille (FRANCE)

Here is a link : http://dockydoc.com/tvm/index_bg01.html


What type of server you have so it doesnt support fileinfo and mysqlnd ? Have you asked the admins for this information?

I have checked your link, if you cant see the video (but can only hear the audio) I suggest you try different video encoding.


I would like to display the range tooltips and move them based on button clicks. However, I do not want the user to have the ability to drag them. They should only move when they click these buttons. I am talking about: ivag-range-a-point ivag-tooltip-top

I have them moving when I set my own range using buttons already!!!! Is there an easy way to disable the draggability?



I guess what I am really trying to do is get the tooltips to recalculate their position when ivagItemTriggered happens

tooltip time is not updated if drag is disabled because time is calculated from drag values. Maybe you can try to modify the code around:


Thanks again… Man, your customer service is the best! I can not thank you enough for your help. Your comment gave me a little more courage to explore and I ended up creating my own function in new.js. Everything is A Ok!


mytom Purchased


I noticed that advert elements have only the parameter “poster” (and not “thumb”) in the database (‘ads’ table). However, with “audio” media, if i want background image, there is only this field ‘poster’. In that case, the image does not resize when you close the playlist.

I have given you 2 examples below:

1. with Parameter “data-poster” included, it is KO -> http://i.imgur.com/ejFo3KL.png 2. with Parameter “data-thumb” included, it is OK -> http://i.imgur.com/cBbphKu.png

There is not this problem with the main medias (‘media’ table) because we have the field ‘thumb’.

Have I forgotten something?


Ads dont have thumb because thumb comes from main media and ads only show in player area, not in playlist area. Ads do have poster because if autoplay is off, it does require poster to load before playback.

What you describe is something internally I have to check to how poster vs thumb is being resized.


mytom Purchased

OK! great.


I am trying to use the api >> addTrack

It says the second argument for this is:

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)

What is this? A string of what? I looked at the example in index_light.html and it points to an array called ivag_track_list. I found that array in new.js BUT I am wondering what I need to feed this to get it to work.

Should track be an html string with divs, etc like you would originally declare a track?

I fiddled and got this working… it was unclear to me but I figured it out

for others… yes… you need to supply html with divs just as you would when you first declare a ivag-playlist-item

Yes, that is correct. You can see api examples in index_api.html demo and tracks listed in api_tracks.js file.

I am using the loadMedia(value):void

I keep getting this error Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

It does not kill the page but I am wondering if you have any thoughts on it. I am using another library with a slider and when the slider is clicked I call a function that calls loadMedia(value):void.

I have seen this before, this is some bug with chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=593273

it shouldn’t influence the playback.

I am struggling to get the range working the way I would like still. I was wondering if you could give me some advice.

Right now I am setting the range with setRange. This works ok but where I struggle is trying to set different ranges on the same video clip.

Example- I would like to be able to

1. hit button A and then load Video 1 with a range of (2,8). 2. hit button B and then load Video 1 with a range of (10,20).(SAME Video)

I find the first set works fine but then as it goes on the range gets confused. The state of the range is what I really want more control over. If I change data-range with purely jquery is this a better way to go???

Right now I have a separate array storing in and out point and then I update the GUI with your setRange.

It looks like this is the function I want… clickPlaylistItem…

DONE…. I got it working. This function was the ticket… I was able to hookup my function at the end of it to get what is basically a “after media is loaded” call. I hope you don’t mind me thinking out loud… I do appreciate all your help and do not want to bother you too much but also I am kind of treating your comments like a forum.

You could also try ivagMediaStart which triggers once the media starts.


Al23 Purchased

Well.. I’m looking for a player to be used in joomla But this has caught my attention, so I will buy it ..


Al23 Purchased

Thanks for your quick response I send this link as proof of a video that I want to use in the component * It’s public https://s3.amazonaws.com/migarch/IJJR+de+jinotepe.mp4 Have a nice day
Just use
data-type="video" data-mp4="https://s3.amazonaws.com/migarch/IJJR+de+jinotepe.mp4" 

Al23 Purchased

Thank you…

Are you planning to add support to Facebook videos?

Not for iframe because iframe is coded to show immediately on playlist item start. (without preview image)

also for youtube videos?

Only self hosted videos accept image poster, youtube and vimeo do not.

Hey mate,

I’ll just ask my questions here: 1. I want to be able to add some image and/or text inside video only before started to play it, after playing it disappears. How could it be accomplished, my own player? youtube player? 2. I want to be able to add facebook video (not a must), u said to try the embedded iframe thing. 3. Can I control where video description is displayed? I want to open a popup with video player and below it to show video description (could be many lines of text) 4. You wrote you can view images gallery, is it only for images a user upload or I can embed from another website?

For what video type?

YouTube and VIMEO, not sure if i understand if I can add some HTML makeover on video or not – All before video even start and/or while video is playing

You can add inline html elements ( check documentation / playback features / inline events ). This is only possible once video starts.

When I add a track I would like to change the background color and highlight color… I am having a difficult time with this. I see in new.js that the classes…(ivag-playlist-non-selected and ivag-playlist-selected) are added. In chrome developer tools this does not seem to show up. I would assume I need to override these classes for my newly created tracks but I can’t get it to work. Do you have any simple solution for this? Thanks in advance


ivag-playlist-selected class is added when playlist item has become active (by any means). conversely, ivag-playlist-non-selected is defauult class for all not selected items.

Note that there are also functions called when item has been selected ( disableActivePlaylistItem ) and deselected ( enableActivePlaylistItem )

Are you manually trying to add ivag-playlist-selected class after you add new track in playlist?

I need it on my page to appear when I click its icon as popup, support it ?


Yes, it can be opened in popup, there are some examples included of popup.


when i use a widget player in a simple modal window (bootstrap modal) the player does not appear. It seems to have sizes of ‘ivag-wrapper’ and ‘ivag-player-holder’ to 0px (width and height). I try to change player params with playerSizing to ‘parent’ and ‘restrict’. Same result.

When i use this player directly in page (not in modal), it works. Any idea?

OK, and if I destroy the player with “ivag_player = null;” when i close modal ?

I think you need a modification like I already suggested or similar to achieve this.

ok i will try this. thanks


What exactly changed from version 2.1 to 2.2? I mean which files do i need to update for the update to work in my 2.1 version? (i do not want to copy everything)

Best Regards, Dror


Just main plugin file, new.js



Small question: In the case of a sizing player in ‘parent’ value (I want the player to take all the space of a specific div of my web page).

But I want that the player does not exceed this parent div size (which is in 500px / 300px); how I have to configure my parent div (what kind of attributes)? Is it possible?

Because actually the player takes all the place of the screen..

sorry. Thank you for not considering this issue. it works (with a simple height value in my parent div)

1. Is this plugin for Wordpress? If not, do you have something similar for Wordpress?

2. Are you sure it can run media from Google Drive, particularly for mobile devices (I am using your Audio plugin that supports Google Drive. It works quite OK on desktops but will not quite so on mobile devices)?

3. I am using your Audio plugin which uses Google Drive API. My question is:

- Can I use the same API for this plugin (one GD for two plugins);

- Can I use another Google Drive with this plugin (two GD’s for two plugins)

4. Can I change the Audio plugin I am using (still within 30-day period) for this one (if it is for Wordpress)? No big deal anyway.



Tean Author


This is jquery plugin, so its not for wordpress. Unfortunately we dont have anything similar for wordpress.