Video play() method doesn't exist

[vitalaaron]

Hi,

I have the following code:

var videos = [
  {
    xtype    : 'video',
    width    : 780,
    height   : 439,
    url      : "http://path/to/my/video.mp4",
    posterUrl: "http://path/to/my/poster.png"
  }
]


var buttons = [
  {
    xtype: 'button',
    text: "Play",
    listeners: {
      tap: function() {
        videos[0].play();
      }
    }
  },
  {
    xtype: 'button',
    text: "Pause",
    listeners: {
      tap: function() {
        videos[0].pause();
      }
    }
  }
]

When I click the Play button, I receive a JS error in the Chrome Inspector:

Uncaught TypeError: Object #<Object> has no method 'play'

The video plays back fine, though, on my webpage.

When I echo out the properties/methods of the video, only "xtype", "width", "height", "url", and "posterUrl" are listed. Where is the "play" method, and how do I access it from the buttons?

Thanks.

[dawesi]

You should also add a itemId:'myVideo' attribute to your config and use that to get a handle on your video:

Ext.ComponentQuery.query('video [itemId=myVideo]')[0].play();

[vitalaaron]

Thanks for the reply. This does not work, however.

Going back to my original code, I changed the button listeners to this:

listeners: {
  tap: function() {
    console.log(videos[0]);
    videos[0].play();
  }
}

, pressed the button, and saw this output in my Chrome Inspector console:

Object {xtype: "video", width: 780, height: 439, url: "http://path/to/my/video.mp4", posterUrl: "playbutton.jpg"…}

Uncaught TypeError: Object #<Object> has no method 'play'

The call to videos[0] is not a problem at all, as it is returning the video. The problem is that the video apparently has no public play() method.

Any other suggestions?