PDA

View Full Version : Video wont stop when switching tabs



caseybecking
28 Jul 2010, 9:59 PM
I have a video in a TabPanel and when i switch tabs it doesnt stop. I had the idea to trigger a pause on card switch but i can figure out what the call would be..


the video code in the tabpanel items

{

title: 'Montauk',
styleHtmlContent: true,
contentEl: 'montauk_1',
id: 'montauk',
xtype: 'video',
items: [{
centered: true,
width: 550,
height: 400,
xtype: 'video',
url: "videos/videoplayback.mp4",
poster: 'images/video.png'
}]

}

and i thought i could do


listeners: {
cardswitch: function(){

}
},

but i dont know what the command would be any one have an idea??

evant
28 Jul 2010, 10:13 PM
This should happen automatically, what version are you using?

caseybecking
28 Jul 2010, 10:24 PM
I assume the newest version, how do I check?

evant
28 Jul 2010, 10:27 PM
console.log(Ext.version);

caseybecking
28 Jul 2010, 10:29 PM
0.9.1

evant
28 Jul 2010, 10:33 PM
That isn't the latest: http://www.sencha.com/products/touch/download.php?dl=true

caseybecking
28 Jul 2010, 10:35 PM
Those files also say 0.9.1 in ext-touch-debug.js.

caseybecking
29 Jul 2010, 9:48 AM
any idea why? It's still not working even with the latest update.

evant
29 Jul 2010, 6:49 PM
It works fine for me. For example:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var pnl = new Ext.TabPanel({
items: [{
title: 'Foo'
},{
title: 'Bar',
autoPause: true,
xtype: 'video',
url: 'space.mp4',
loop: true,
width: 500,
height: 400,
poster: 'Screenshot.png'
}],
fullscreen: true
})
}
});


I switch to the second tab, click to activate the video. Then I click back on the first tab. After I click on the video again, it's stopped.

caseybecking
30 Jul 2010, 8:57 AM
This is my code and it wont stop?


Ext.ns('App.Ui');
App.Ui.Video = Ext.extend(Ext.Carousel, {
initComponent: function() {
var config = {
title: 'Video',
cls: 'video',
iconCls: 'bookmarks',
scroll: 'vertical',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'video',
url: "videos/videoplayback.mp4",
autoPause: 'true',
poster: 'images/video.png'
}, {
xtype: 'video',
autoPause: 'true',
url: "videos/videoplayback.mp4",
poster: 'images/video.png'
}, {
height: 500,
width: 500,
xtype: 'video',
autoPause: 'true',
url: "videos/videoplayback.mp4",
poster: 'images/video.png'
}]

};
Ext.apply(this, config);
App.Ui.Video.superclass.initComponent.call(this);
},

// @private
onRender : function(ct, position) {
App.Ui.Video.superclass.onRender.call(this, ct, position);
}
});
Ext.reg('App.Ui.Video', App.Ui.Video);

caseybecking
2 Aug 2010, 1:49 PM
any idea how to force the video to stop when i switch cards or move the carousel?

evant
2 Aug 2010, 4:30 PM
As I said, in the examples I was running this already happens when you use the autoPause option.

However, you could listen for the deactivate event on the item and then explicitly call stop().

Luxury
4 Aug 2010, 10:37 AM
Can you explain this a little more? I am experiencing this happening in side of the carousel... Not really a programmer so some of what I'm trying to do is deconstruction of sample code and self learning CSS...