Question

我有一个由15个面板组成的旋转木马。每个面板包含一个音频样本，一个图像和一个（本地）视频（总共150kb）。它可以正常工作，但是当我快速滑动时，我会遇到性能问题（挂起）。这可能与视频在刷到新面板时没有autoPause（默认设置为true）这一事实有关。我希望之前的面板和他们的视频在刷卡时闭嘴。我设法通过activeitemchange监听器为音频样本执行此操作。我无法将其用于视频。

我做错了什么？请帮忙。

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

我为视频元素添加了一个监听器：

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'
                    }
                    }

Sencha Touch 2 activeitemchange监听器用于旋转木马中的视频

1 个答案: