1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    19
    Vote Rating
    0
    gwthompson is on a distinguished road

      0  

    Default Autoplay video

    Hi,

    I was checking the API for video and I didn't see any sort of autoplay config option or for that matter any play(0 method.

    Is there some way to autoplay a video as soon as it loads?

    I'd like to add video help in an overlay so it would make sense if it started when opened.

    Here is the test code I am using:

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {
            var pnl = new Ext.Panel({
                layout: {
                    type: 'vbox',
                    pack: 'center'
                },
                items: [{
                    xtype: 'video',
                    url: 'test3.mp4',
                    loop: true,
                    width: 480,
                    height: 360,
                    poster: 'poster.png'
                }],
                fullscreen: true
            })
        }
    });
    Thanks as always for the help!

    gt

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,700
    Vote Rating
    768
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default

    There's actually play/pause and an autoPlay config on the video object, however they don't appear in the docs.

    I'll fix that up now.

    The autoPlay code needs a bit of refactoring as well, since it only fires when the component is "activated". In the video example, it's never activated, because it's not part of a card type layout.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Jun 2010
    Posts
    19
    Vote Rating
    0
    gwthompson is on a distinguished road

      0  

    Default

    Thanks for the update Evan.

    How about this:

    I have a button that opens up the overlay that contains the video as I described before. Could I add some code to start the video playing from my handler?

    Here are the two pieces of code:

    Code:
            var videoOverlay = new Ext.Panel({
                floating: true,
                modal: true,
                centered: true,
                items: [{
                	id: 'vid',
                    xtype: 'video',
                    url: 'test3.mp4',
                    loop: false,
                    width: 480,
                    height: 360,
                    poster: 'poster.png'
                }]
           	 });
           	 
     
     var showVideo = function(button, event) {
     console.info('show video');
     				
     	          videoOverlay.setCentered(true);
                
                videoOverlay.show();
     
     }
    Any and all help would be greatly appreciated!

    Thanks,
    gt

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,700
    Vote Rating
    768
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext User
    Join Date
    Jun 2010
    Posts
    19
    Vote Rating
    0
    gwthompson is on a distinguished road

      0  

    Default

    I guess from an autoPlay perspective I'm out of luck.

    What about programmatically playing the video like the example in your link? Is there a simpler way to play the video within the Sencha API?

    Hopefully that makes sense...

    Thanks,
    gt

  6. #6
    Ext User
    Join Date
    Aug 2010
    Posts
    3
    Vote Rating
    0
    Luxury is on a distinguished road

      0  

    Default

    here is a sample of how it might work...

    http://www.codeblog.co/getting-autoplay-working-on-ios/

    what I need to understand is how to get the video to stop playing the audio once you click outside the modal...

  7. #7
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Default

    Anyone gotten this to work yet? I'd like to have autoplay on my video.

  8. #8
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    0
    rickygupta is on a distinguished road

      0  

    Default

    i am working in sencha touch 2...i have an application.... i have taken a list and with itemTap on list navigate to another view with a video...as soon as i click on items of list the video starts.....but it is not appearing....it only appears when i click on video screen...but i want when i click on items on list its should starts immediately...(no clicks)...

    Plz...suggest some solution to resolve this...Thank you in advance..

  9. #9
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    0
    rickygupta is on a distinguished road

      0  

    Default

    i am working in sencha touch 2...i have an application.... i have taken a list and with itemTap on list navigate to another view with a video...as soon as i click on items of list the video starts.....but it is not appearing....it only appears when i click on video screen...but i want when i click on items on list its should starts immediately...(no clicks)...

    Plz...suggest some solution to resolve this...Thank you in advance..

  10. #10
    Sencha User
    Join Date
    Nov 2012
    Posts
    3
    Vote Rating
    0
    Deepak Kumar Sharma is on a distinguished road

      0  

    Default Auto play video worked for in two ways and one of them describe here under.

    It worked for me like this way when pushing on navigation view.


    Ext.define('App.video.MyVideos', {
    extend: 'Ext.Container',
    xtype: 'myvideos',


    initialize: function(){
    this.setScrollable(true);
    },

    requires: [
    'Ext.Video'
    ],


    config: {
    title: '',
    type: 'fit',
    xtype: 'panel',
    style: 'background: white',
    items: [
    {
    xtype: 'video',
    id: 'myvideos',
    centered: true,
    height: 240,
    width: 281,
    preload: true,
    loop: false,
    url: 'resources/videos/skyfall.mp4',
    listeners: {
    painted: function (Component, eOpts) {
    Ext.getCmp('myvideos').setEnableControls(true);
    Ext.getCmp('myvideos').setPosterUrl('resources/videos/skyfall_video.png');
    Ext.getCmp('myvideos').play();
    Ext.getCmp('myvideos').ghost.hide();
    Ext.getCmp('myvideos').media.show();
    } // painted
    } // listeners
    }
    ]
    }


    });

Similar Threads

  1. Video in Carousel
    By ludm in forum Sencha Touch 1.x: Discussion
    Replies: 7
    Last Post: 30 Mar 2011, 1:11 PM
  2. Carousel AutoPlay
    By mobigeni in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 6 Jul 2010, 12:45 PM
  3. to open a video
    By sakaext in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 2 Oct 2009, 12:39 AM
  4. video streming
    By andryi in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 5 Aug 2009, 10:24 AM
  5. Gmail: A Behind the Scenes Video
    By mystix in forum Community Discussion
    Replies: 0
    Last Post: 10 Aug 2007, 5:33 AM

Thread Participants: 5