Description
Hi There!
I couldn't find any thread regarding this issue and I couldn't find a solution so I came up with my own. I am not sure if this is the best and most simple solution but if anyone find themselfe with the same problem I hope this helps.
So the problem is/was: I wanted to add video to an (already initialized) AnythingSlider + Video extension containing only videos (pure video slider). After every video add I had to update the slider and the extension which caused the extension to re-initalize every already initialized video. I was unable to slide through my videos because the list-indexes were also updated. Example: I added 1 Video -> this got the id asvideo0 which is correct. Then I added another video. This resulted in the following: 2 videos. 1st had the id asvideo1 and index 1 and the 2nd had the id asvideo2 and index 2, which is not correct!
Solution:
- I am now able to update the anythingSlider and Extension after every added video by calling $('#selector').anythingSlider().anythingSliderVideo();
- All previous added videos are not initialized twice only the newly added one(s)
- everything works normaly and as intended (at least I hope so ;) )
Code changes:
- Line 32 to 47 replaced by:
if(typeof base.video == 'undefined'){
video = base.video = {};
// Next update, I may just force users to call the video extension instead of it auto-running on window load
// then they can change the video options in that call instead of the base defaults, and maybe prevent the
// videos being initialized twice on startup (once as a regular video and second time with the API string)
video.options = $.extend({}, defaults, options);
// check if SWFObject is loaded
video.hasSwfo = (typeof(swfobject) !== 'undefined' && swfobject.hasOwnProperty('embedSWF') && typeof(swfobject.embedSWF) === 'function' && swfobject.hasFlashPlayerVersion('1'));
video.list = {};
video.hasVid = false;
video.hasEmbed = false;
video.services = $.fn.anythingSliderVideo.services;
video.hasEmbedCount = 0;
video.hasiframeCount = 0;
video.$items = base.$items.filter(':not(.cloned)');
} else {
video = base.video;
video.$items = base.$items.filter(':not(.cloned)');
} This prevents overwirting of base.video with an empty object if there already is a base.video
- Line 55 to 64 replaced by
var pan = tmp.closest('.panel');
if(pan.data('AnythingSliderVideoInitialized') != true){
// save panel and video selector in the list
tmp.attr('id', video.options.videoId + $.fn.anythingSliderVideo.videoIndex);
video.list[$.fn.anythingSliderVideo.videoIndex] = {
id : video.options.videoId + $.fn.anythingSliderVideo.videoIndex++,
panel : pan[0],
service : service,
selector : sel,
status : -1, // YouTube uses -1 to mean the video is unstarted
isInitialized : false, //custom Code Mark as Initialized to prevent double initialisation on adding video to slider
};
//custom Code
//add indicator that this video was already initialized
pan.data('AnythingSliderVideoInitialized', true);Adding a new object-key to the video which indicates if the video was already initialized
Plus adding a new data attribut to the iframe container which indicates the same
- Line 83
if (video.hasEmbed && video.hasSwfo && s.selector.match('embed|object') && !s.isInitialized /* Custom Code */) {Preventing 'reinitialisation'
- Line 109
} else if (s.selector.match('iframe') && !s.isInitialized /* Custom Code */) {Preventing 'reinitialisation' of iframe
- after Line 116 adding:
s.isInitialized = true;Marking Video as initialized
Thats already it. I tested it a couple of times in FF. Adding and Removing Videos to the Slider works for me. They don't get initialized twice and sliding through works fine. I am not sure, if this is the best practice/code and if it works for all of you - I just needed a quick fix.
It would be nice, if some could review these changes and post their opinion. Maybe this 'feature' finds its way in a future update - would be nice.
Thanks
Christian