sorry for the late response, but uhm for one I used a slightly edited plugin I found on the forums (that was originally made for ext 3.0)
for which the code in my hands became:
Code:
Ext.ns('Ext.ux');
/* -NOTICE-
* For HTML5 video to work, your server must
* send the right content type, for more info see:
* https://developer.mozilla.org/En/HTML/Element/Video
*/
Ext.ux.HTML5VideoPanel = Ext.extend(Ext.Panel, {
constructor: function(config) {
Ext.ux.HTML5VideoPanel.superclass.constructor.call(this, Ext.applyIf(config, {
width : '100%',
height : '100%',
autoplay : false,
controls : true,
bodyStyle: 'background-color:#000;color:#fff',
html : '',
suggestChromeFrame: false
}));
this.on({
scope : this,
render : this._render,
beforedestroy: function() {
this.video = null;
},
bodyresize : function(panel, width, height) {
if (this.video)
this.video.setSize(width, height);
},
resize : function(panel, width, height)
{
if (this.video)
this.video.setSize(width, height);
}
});
},
_render: function() {
var fallback = '';
if (this.fallbackHTML) {
fallback = this.fallbackHTML;
} else {
fallback = "Your browser doesn't support html5 video. ";
if (Ext.isIE && this.suggestChromeFrame) {
/* chromeframe requires that your site have a special tag in the header
* see http://code.google.com/chrome/chromeframe/ for details
*/
fallback += '<a>Get Google Chrome Frame for IE</a>';
} else if (Ext.isChrome) {
fallback += '<a>Upgrade Chrome</a>';
} else if (Ext.isGecko) {
fallback += '<a>Upgrade to Firefox 3.5</a>';
} else {
fallback += '<a>Get Firefox 3.5</a>';
}
}
/* match the video size to the panel dimensions */
var size = this.getSize();
var cfg = Ext.copyTo({
tag : 'video',
width : size.width,
height: size.height,
onabort:"console.log('onabort');",
oncanplay:"console.log('oncanplay');",
oncanplaythrough:"console.log('oncanplaythrough');",
ondurationchange:"console.log('ondurationchange');",
onemptied:"console.log('onemptied');",
onended:"console.log('onended');",
onerror:"console.log('onerror');",
onloadeddata:"console.log('onloadeddata');",
onloadedmetadata:"console.log('onloadedmetadata');",
onloadstart:"console.log('onloadstart');",
onpause:"console.log('onpause');",
onplay:"console.log('onplay');",
onplaying:"console.log('onplaying');",
onprogress:"console.log('onprogress');",
onratechange:"console.log('onratechange');",
onreadystatechange:"console.log('onreadystatechange');",
onseeked:"console.log('onseeked');",
onseeking:"console.log('onseeking');",
onstalled:"console.log('onstalled');",
onsuspend:"console.log('onsuspend');",
ontimeupdate:"console.log('ontimeupdate');",
onvolumechange:"console.log('onvolumechange');",
onwaiting:"console.log('onwaiting');"
},
this, 'poster,start,loopstart,loopend,playcount,autobuffer,loop');
/* just having the params exist enables them */
if (this.autoplay) cfg.autoplay = 1;
if (this.controls) cfg.controls = 1;
if (this.videoId) cfg.id = this.videoId;
/* handle multiple sources */
if (Ext.isArray(this.src)) {
cfg.children = [];
for (var i = 0, len = this.src.length; i < len; i++)
{
if (!Ext.isObject(this.src[i]))
{
throw "source list passed to html5video panel must be an array of objects";
}
cfg.children.push(
Ext.applyIf({tag: 'source'}, this.src[i])
);
}
cfg.children.push({
html: fallback
});
} else {
cfg.src = this.src;
cfg.html = fallback;
}
this.video = this.body.createChild(cfg);
}
});
the zillion listeners are for debugging purposes since I haven't managed to fix all bugs in it properly yet. (right now seeking in this set up is impossible in firefox and chrome, but I'm not in need for help on this matter right now)
the window that would cause the scrollbar is a hidden window with an overflown grid.
so for simplicity sake I'd make it out as this for exemplary purposes:
Code:
Ext.define('App.view.window.Search',
{
extend: 'Ext.window.Window',
requires: ['Ext.window.Window'],
id: 'searchWindow',
alias: 'widget.search',
cls: 'search',
iconCls: 'searchWindowIcon',
bodyCls: 'panelBody',
width: '60%',
height: '60%',
layout:
{
type: 'vbox'
},
title: 'Search',
closeAction: 'hide',
//initialize container and it's components
initComponent: function()
{
var me = this;
grid = new Ext.grid.GridPanel
({
id: 'searchGrid',
cls: 'searchResults',
title: locale['searchGrid'],
width: '92%',
flex: 1,
store:{
fields: ['name', 'email'],
data : [
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'}
]
}
columns: //not really important for this case
[
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
],
viewConfig:
{
forceFit: true
},
autoScroll: true,
columnLines: true
});
Ext.applyIf(me,
{
items: [searchBtnContainer, searchForm, grid]
});
me.callParent(arguments);
return me;
}
});
i'd use some local data to make a panel with a working video and then run it with the window in the middle and hide it...
I'm pretty sure it'll give the same effect as what I've been getting
Unanswered: A scroll bar shows up in the middle of a video panel
Reply With Quote
