Results 1 to 2 of 2

Thread: video in carousel is killing performance

  1. #1
    Sencha User
    Join Date
    Sep 2014
    Posts
    1

    Default video in carousel is killing performance

    Hi,

    I have a carousel containing images, sounds, buttons and video xtypes on each item. It works perfectly on desktop browsers and as long as I do not touch the video component it works well on my iPad and iPhone. BUT....when I play an mp4 (all my movies are 3 sec short and +/-100kb) the carousel is getting sluggish. The more video's I tap, the less responsive the carousel gets (although only 3 are in DOM).

    I have tried everything and isolated the problem (it's the video's for sure). It seems like memory is "overloaded" when I play movies. No problem with the audio whatsoever. What can I do to prevent this? Or should I trigger overlays to display video (do not know how).

    This is the code of 1 item. Is there something wrong with it?

    PHP Code:
    {
                        
    layout: {type'vbox'pack'end'},
                                                    
                            
    items: [{
                                
    xtype'image',
                                
    src'resources/images/vogel.png',
                                
    width768,
                                
    height436
                            
    }, 
                            {
                                   
    xtype'button',
                                  
    cls'audioButton',
                                
    text'vogel',
                                
    handler: function () {
                                    var 
    container this.getParent(),
                                    
    audio container.down('audio');
                                    
    audio.toggle();
                                        }                        
                               },                           
                            {
                                
    xtype'audio',
                                
    url'resources/images/vogel.mp3',
                                
    hiddentrue                         
                            
    },                       
                            {
                                
    items: {
                                    
    xtype'video',
                                    
    url'resources/images/vogel.mp4',
                                    
    width768,
                                    
    height432,
                                    
    docked:'bottom',
                                    
    posterUrl'resources/images/bekijkgebaar.png',
                                    
    enableControlsfalse,
                                    
    listeners: {
                                        
    tap: {
                                            
    element'element'// should this be moved to underneath }, ?
                                            
    fn: function () {
                                                if (
    this.isPlaying())    
                                                
    this.pause();    
                                                else
                                                
    this.play();
                                            }
                                        }  
                                    }                                    

                               }
                            }]}, 

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    The carousel will only render 3 items in the DOM at any given time. From the looks of your code, cannot determine that is a carousel really. Media elements are heavy because the media files have to be loaded and then the device has to manage the layout and rendering of the media. This is why we have posterUrl on video functionality as to not have the <video> node shown to help with performance. Hiding the video when it's not being played or needed to be shown may help.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •