Javascript error

All of the sudden I seem to be have errors on my page loading my background video.  When I check the console I get the below errors, does anybody know how to correct this??:

Uncaught TypeError: Cannot read property 'play' of undefined
    at HTMLDivElement.<anonymous> (custom.js:683)
    at HTMLDivElement.dispatch (jquery.js:3)
    at HTMLDivElement.r.handle (jquery.js:3)
    at Object.trigger (jquery.js:3)
    at Object.a.event.trigger (jquery-migrate.min.js:2)
    at HTMLDivElement.<anonymous> (jquery.js:3)
    at Function.each (jquery.js:2)
    at a.fn.init.each (jquery.js:2)
    at a.fn.init.trigger (jquery.js:3)
    at n (ext.js:1143)

Open in new window


-------------------------------------

This is the code in the custom.js file the error is referencing:

var video_bg_mod = { };

      if( utils.exists('video-bg')  )
      jQuery('.video-bg').each(function(i){
             
             var h = win.obj.height();
             var w =   h / (h/win.obj.width())  * 1.13  ;

             jQuery(this).find('.video-bg-inner,object').css({
                    "height" : h,
                    "width" :w
             }); 

   video_bg_mod[jQuery(this).find('video').attr('id')] =  new MediaElement(jQuery(this).find('video').attr('id'),
                          { 
                            loop:true, 
                            features : [] , 
                         videoWidth: '100%',
                          videoHeight: '100%',
                            enableAutosize: false,
                            success: function(mediaElement, domObject) {
                            
                            mediaElement.addEventListener('ended', function(e) {
                   
                                 mediaElement.play();
                                 
                            }, false);

                                mediaElement.pause();
                         }
                        });

          });


jQuery('.video-bg').each(function(){

       jQuery(this). bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
              // element is now visible in the viewport
                  jQuery(this).css({ opacity:1 });
                video_bg_mod[jQuery(this).find('video').attr('id')].play();
            } else {
               video_bg_mod[jQuery(this).find('video').attr('id')].pause();
            }
          });

     });

Open in new window

virtuali1151Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
You don't have pass the mediaElement parameter in the
 success: function(mediaElement, domObject)

Open in new window

How the mediaElement parameter is going to pass in the function?
Julian HansenCommented:
First up please use CODE tags for your code snippets. You can do this by
1. Highlighting your code
2. Clicking the cod button
CodeTags.jpg
Then, which play() is the error referring to - you have two instances (line 25 and 42). The error refers to line 633 but you have not given us the full listing so the line numbers don't match up.

I am guessing the problem is the one on line 42
This jQuery(this).find('video').attr('id') is not resolving to a value that is in the  video_bg_mod object.

Try putting console.log's here
// SO WE CAN SEE THE FULL OBJECT
console.log(video_bg_mod);
jQuery('.video-bg').each(function(){
  jQuery(this). bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
    // SO WE CAN SEE THE ID
    console.log(jQuery(this).find('video').attr('id'));
    if (isInView) {
    // element is now visible in the viewport
      jQuery(this).css({ opacity:1 });
      video_bg_mod[jQuery(this).find('video').attr('id')].play();
    } else {
      video_bg_mod[jQuery(this).find('video').attr('id')].pause();
    }
  });
});

Open in new window

virtuali1151Author Commented:
Hi Guys,

Thanks for the input,  they weird thing is this was working for ages, then all of the sudden it stopped.  I am not sure if worpdress updates jquery etc automatically and there was something in that update that changed how the calls happen or?? Anyways, I have attached the full custom.js and console.log files... let me know if you need anything else.

Thanks for your assistance.
custom.zip
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
Please provide a link to a page that replicates the problem.
The files you have provided don't match up. The console.log reports and error on line 633 however line 633 contains
}); with no sign of a .play() anywhere near it.

We need to know where the error is being generated.

The fact that it was working and is not now is interesting but not helpful right now. To diagnose the problem we need better information than we have which means a link - or at least some indication of what line in custom.js is causing the problem
virtuali1151Author Commented:
its on the front page of domin8.ca.  It should load a background video, but doesnt.. just errors.
Julian HansenCommented:
I am going to hazard a guess that your code is not inside a document ready block and is firing before the document has finished loading.

Try wrapping your code in a
jQuery(function() {
  // Video code here
var video_bg_mod = { };

      jQuery('.video-bg').each(function(i){
             
             var h = win.obj.height();
             var w =   h / (h/win.obj.width())  * 1.13  ;

             jQuery(this).find('.video-bg-inner,object').css({
                    "height" : h,
                    "width" :w
             }); 

   video_bg_mod[jQuery(this).find('video').attr('id')] =  new MediaElement(jQuery(this).find('video').attr('id'),
                          { 
                            loop:true, 
                            features : [] , 
                         videoWidth: '100%',
                          videoHeight: '100%',
                            enableAutosize: false,
                            success: function(mediaElement, domObject) {
                            
                            mediaElement.addEventListener('ended', function(e) {
                   
                                 mediaElement.play();
                                 
                            }, false);

                                mediaElement.pause();
                         }
                        });

          });

     jQuery('.video-bg').each(function(){

       jQuery(this). bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
              // element is now visible in the viewport
                  jQuery(this).css({ opacity:1 });
                video_bg_mod[jQuery(this).find('video').attr('id')].play();
            } else {
               video_bg_mod[jQuery(this).find('video').attr('id')].pause();
            }
          });

     });  
});

Open in new window

virtuali1151Author Commented:
I added the code.. still the same error....  its still there if you want to check it.
Julian HansenCommented:
Ok here is what is causing the problem.

When you create the mediaElement object - it wraps your <video> in a <mediaelementwrapper> tag which it gives the ID of your video.

It changes the id of your video to be the original ID with '_html5' on the end.

So what is happening is your video_bg_mod array has an index 'abc' but the actual id you are finding is 'abc_html5' - which is why you are getting an undefined.

There are various ways of solving this -
you can append _html5 to the index when you add the element to the video_bg_mod array
You can remove it (if it exists) from the id when you index that array later on
You can search on the mediaelementwrapper instead
jQuery(this).find('mediaelementwrapper').attr('id')

Open in new window

virtuali1151Author Commented:
Ok, I changed that to the below, and its working.. but there is still one more error, do you know what is causing the ID error?:


video_bg_mod[jQuery(this).find('video_html5').attr('id')] =  new MediaElement(jQuery(this).find('video_html5').attr('id'),

Open in new window



Uncaught TypeError: Cannot read property 'id' of undefined
    at new e (mediaelement-and-player.min.js:12)
    at HTMLDivElement.<anonymous> (custom.js:657)
    at Function.each (jquery.js:2)
    at a.fn.init.each (jquery.js:2)
    at HTMLDocument.<anonymous> (custom.js:647)
    at i (jquery.js:2)
    at Object.fireWith [as resolveWith] (jquery.js:2)
    at Function.ready (jquery.js:2)
    at HTMLDocument.K (jquery.js:2)
Julian HansenCommented:
I think you misread my earlier email - the html5 is being added to the id of the video element - you have added it to the class of the container.
The video element stays as is the only issue is it's ID gets the html5 suffix

My recommendation is that you use what I suggested in my last post - search on the mediaelementwrapper rather
virtuali1151Author Commented:
Hey Julian,

Thanks for your help thus far.. but Im a total newb with this.  So here is the current code for that area.  I am unclear on what I actually need to change.. cause when I put your suggestion it loads, but only 1/4 of the page for some reason... and it doesnt take any of the overlay effects or anything.. If you could show exactly what I need to put here.. so I can see it would be great.. my apologies for not quite understanding this.

 /**
       * Background Videos for RAD builder
       */

      var video_bg_mod = { };

      if( utils.exists('video-bg')  )
      jQuery('.video-bg').each(function(i){
             
             var h = win.obj.height();
             var w =   h / (h/win.obj.width())  * 1.13  ;

             jQuery(this).find('.video-bg-inner,object').css({
                    "height" : h,
                    "width" :w
             }); 

   video_bg_mod[jQuery(this).find('video').attr('id')] =  new MediaElement(jQuery(this).find('video').attr('id'),
                          { 
                            loop:true, 
                            features : [] , 
                         videoWidth: '100%',
                          videoHeight: '100%',
                            enableAutosize: false,
                            success: function(mediaElement, domObject) {
                            
                            mediaElement.addEventListener('ended', function(e) {
                   
                                 mediaElement.play();
                                 
                            }, false);

                                mediaElement.pause();
                         }
                        });

          });

     jQuery('.video-bg').each(function(){

       jQuery(this). bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
              // element is now visible in the viewport
                  jQuery(this).css({ opacity:1 });
                video_bg_mod[jQuery(this).find('video').attr('id')].play();
            } else {
               video_bg_mod[jQuery(this).find('video').attr('id')].pause();
            }
          });

     });

Open in new window

Julian HansenCommented:
jQuery(this). bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
              // element is now visible in the viewport
                  jQuery(this).css({ opacity:1 });
                video_bg_mod[jQuery(this).find('video').attr('id')].play();
            } else {
               video_bg_mod[jQuery(this).find('video').attr('id')].pause();
            }
          });

Open in new window

Becomes

jQuery(this). bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
            if (isInView) {
              // element is now visible in the viewport
                  jQuery(this).css({ opacity:1 });
                // NOTE THE mediaelementwrapper  CHANGE FROM video
                video_bg_mod[jQuery(this).find('mediaelementwrapper').attr('id')].play();
            } else {
                // NOTE THE mediaelementwrapper  CHANGE FROM video
               video_bg_mod[jQuery(this).find('mediaelementwrapper').attr('id')].pause();
            }
          });

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
virtuali1151Author Commented:
Yes, that worked.  Thanks for your help and patience Julian.. really appreciate it.
virtuali1151Author Commented:
Julian is awesome and keeps at it til the issue is resolved. I would highly recommend him for anybody needing assistance with Javascript etc.
Julian HansenCommented:
Thank you and you are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.