Autoplay video

[gwthompson]

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:

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

[evant]

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.

[gwthompson]

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:

        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

[evant]

http://stackoverflow.com/questions/3...pad-with-html5

Guess not

[gwthompson]

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

[Luxury]

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...

[DaveC426913]

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

[rickygupta]

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..

[rickygupta]

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..

[Deepak Kumar Sharma]

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


});