Sencha Touch 2 activeitemchange listener for video in carousel

Question

I have a carousel that consists of 15 panels. Each panel contains an audio sample, an image and a (local) video (150kb in total). It works but I have performance issues (hanging) when swiping to fast. This has probably something to do with the fact that videos do not autoPause (which is set to true by default) when swiped to a new panel. I would like the previous panels and their video's to shut up on swipe. I managed to do this for the audio samples through a activeitemchange listener. I can't get this to work for videos.

What am I doing wrong? Please help.

Ext.define('Test.view.Card',{
extend: 'Ext.Carousel',
id: 'gebarencarousel',
xtype:'cardpanel',
fullscreen : true,

config:{
    title: 'Speel',
    iconCls: 'star',
    store: Ext.create('Test.store.Gebaar'),

 listeners:{
    activeitemchange:function()
     {
        var activeIndex = this.getActiveIndex();           
        document.getElementById(activeIndex).play();
        document.getElementById(activeIndex-1).pause();
        console.log('video'+activeIndex);
//          document.getElementById('video'+activeIndex-1).stop(); 
     }
        },

    items:[

// -------------------------------- 1 ------------------------------------------------
       {
            html: ["<audio id=\"1\"><source src=\"resources/images/hond.mp3\" ></audio>"].join(""),
            layout: {
            type: 'vbox'                       
            },
            items: [
                {
                    flex:521,
                    xtype: 'image',
                    src: 'resources/images/hond.png'                    
                },                                      
                {
                    flex:432,
                    height: 432,
                    xtype: 'video',
                    id:'video1',
                    url: 'resources/images/hond.mp4',
                    posterUrl: 'resources/images/bekijkgebaar.png',
                    loop: true,
                    enableControls: false,
                    autoResume: true
                }]},

// -------------------------------- 2 ------------------------------------------------
etc. 

Answer 1

I added a listener to the video element:

listeners: {
                        tap: {
                            fn: function ()
                        {
                            var myVideo = document.getElementById('video1'); 
                            if (myVideo.paused) 
                                myVideo.play(); 
                            else 
                                myVideo.pause(); 
                        },
                        element: 'element'
                    },
                    swipe: {
                            fn: function() {
                                var swipeVideo = document.getElementById('video1');
                                swipeVideo.pause();
                            },
                            element: 'innerElement'
                    }
                    }