Appending/Updating/Removing Videos to AnythingSlider + Video Extension

[christian-seifert]

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

[Mottie]

Hi Christian!

Thanks for sharing this problem, and your solution code!

With only a cursory look, the change looks good. If you are willing to fork the repo, add your changes, and maybe even include a demo, then submit a pull request, it would make integration a whole bunch easier :)

Thanks again! Rob

[christian-seifert]

Hi, I made a quick fiddle to show how the changes work here: http://jsfiddle.net/2hhUE/16/ I tested it with Chrome and FF. Have a look please. if everything is okay, I will submit a pull request later today

[Mottie]

It looks good to me :)

And I meant, add a demo to the repo, if you are willing :)

Thanks again!