1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    7
    Vote Rating
    0
    vitalaaron is on a distinguished road

      0  

    Default Unanswered: Video play() method doesn't exist

    Unanswered: Video play() method doesn't exist


    Hi,

    I have the following code:

    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.

  2. #2
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,083
    Answers
    24
    Vote Rating
    44
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


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

    Code:
    Ext.ComponentQuery.query('video [itemId=myVideo]')[0].play();
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    7
    Vote Rating
    0
    vitalaaron is on a distinguished road

      0  

    Default


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

    Going back to my original code, I changed the button listeners to this:
    Code:
    listeners: {
      tap: function() {
        console.log(videos[0]);
        videos[0].play();
      }
    }
    , pressed the button, and saw this output in my Chrome Inspector console:

    Code:
    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?

Thread Participants: 1

Tags for this Thread