title: autoplay mediaelement player when visible
body: <p>I have a wordpress site that uses the native player, mediaelement to display videos.  I'm trying to add some code to autoplay the videos when visible, pause when off the screen.  I have been working with a piece of code from my previous question <a href="https://stackoverflow.com/questions/21163756/html5-and-javascript-to-play-videos-only-when-visible/27168656?iemail=1&amp;noredirect=1#27168656">here</a> (using the <a href="https://github.com/zeusdeux/isInViewport" rel="nofollow noreferrer">isInViewport</a> JQuery plugin), but the play/pause events here don't seem to trigger the mediaelement player.  I am able to detect when each of the videos are visible and print to the console using the scroll function here.  From what I've read I need to initialize the mediaelement player before calling the play/pause function, but I get an error: "Uncaught TypeError: Cannot read property 'player' of undefined" with each scroll where the video is visible.</p>
  
  <p>JQUERY:</p>
  
  <pre><code>$(function() {
      $(window).scroll(function() {
          $('.wp-video-shortcode').each(function() {
              var str = $(this).attr('id');
              var arr = str.split('-');
              typecheck = arr[0];
              if ($(this).is(":in-viewport") &amp;&amp; typecheck == "video") {
                  var video = new MediaElementPlayer($(this).attr('id'), {
                      success: function(mediaElement) {
                          $(this).attr('id')[0].player.pause(); 
                          console.log($(this).attr('id') + 'video is playing');
  
                      }
                  });
  
                  //$(this).[0].play();
              } else {
                  //$(this).[0].pause();
              }
  
          });
      });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;video class="wp-video-shortcode" id="video-1115-1" width="792" height="470" poster="http://cdn.ultrasoundoftheweek.com/post_files/uotw16.1.jpg" loop="1" preload="none" controls="controls"&gt;
  &lt;source type="video/mp4" src="http://cdn.ultrasoundoftheweek.com/post_files/uotw16.1.mp4?_=1" /&gt; 
  &lt;source type="video/webm" src="http://cdn.ultrasoundoftheweek.com/post_files/uotw16.1.webm?_=1" /&gt; 
  &lt;/video&gt;
  </code></pre>