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/3009888/autoplay-audio-files-on-an-ipad-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
}
]
}


});