PDA

View Full Version : Need help for playing video in html5



prashantB
24 Jun 2010, 4:45 AM
Hi,

First I would like to clarify that I am very new to ExtJs.

I have tried following example which works fine on FF and Crome but not in IE.

"http://www.sencha.com/blog/2010/01/14/html5-video-canvas-extjs/"

I have also tried '.mov' video whether format is 'video/mp4' which works fine in crome but not works in FF.

After some investigation I found that we need to write "flowplayer" as fallback in this.

Could you please anybody help me out for this or do you have any example then please
forward it me?

There is html5media but i was not able to configured it out in this above 'Desktop' example.

Thanks in advance.
Prash.

example I have tried :


/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/

// Sample desktop configuration
MyDesktop = new Ext.app.App({
init :function(){
Ext.QuickTips.init();
},

getModules : function(){
return [
new MyDesktop.GridWindow(),
new MyDesktop.TabWindow(),
new MyDesktop.AccordionWindow(),
new MyDesktop.BogusMenuModule(),
new MyDesktop.BogusModule(),
new MyDesktop.VideoWindow()
];
},

// config for the start menu
getStartConfig : function(){
return {
title: 'Jack Slocum',
iconCls: 'user',
toolItems: [{
text:'Settings',
iconCls:'settings',
scope:this
},'-',{
text:'Logout',
iconCls:'logout',
scope:this
}]
};
}
});



/*
* Example windows
*/
MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
id:'grid-win',
init : function(){
this.launcher = {
text: 'Grid Window',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if(!win){
win = desktop.createWindow({
id: 'grid-win',
title:'Grid Window',
width:740,
height:480,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,

layout: 'fit',
items:
new Ext.grid.GridPanel({
border:false,
ds: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'}
]),
data: Ext.grid.dummyData
}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 70, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'}
]),

viewConfig: {
forceFit:true
},
//autoExpandColumn:'company',

tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}]
})
});
}
win.show();
}
});



MyDesktop.TabWindow = Ext.extend(Ext.app.Module, {
id:'tab-win',
init : function(){
this.launcher = {
text: 'Tab Window',
iconCls:'tabs',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('tab-win');
if(!win){
win = desktop.createWindow({
id: 'tab-win',
title:'Tab Window',
width:740,
height:480,
iconCls: 'tabs',
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,

layout: 'fit',
items:
new Ext.TabPanel({
activeTab:0,

items: [{
title: 'Tab Text 1',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 2',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 3',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 4',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
}]
})
});
}
win.show();
}
});



MyDesktop.AccordionWindow = Ext.extend(Ext.app.Module, {
id:'acc-win',
init : function(){
this.launcher = {
text: 'Accordion Window',
iconCls:'accordion',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('acc-win');
if(!win){
win = desktop.createWindow({
id: 'acc-win',
title: 'Accordion Window',
width:250,
height:400,
iconCls: 'accordion',
shim:false,
animCollapse:false,
constrainHeader:true,

tbar:[{
tooltip:{title:'Rich Tooltips', text:'Let your users know what they can do!'},
iconCls:'connect'
},'-',{
tooltip:'Add a new user',
iconCls:'user-add'
},' ',{
tooltip:'Remove the selected user',
iconCls:'user-delete'
}],

layout:'accordion',
border:false,
layoutConfig: {
animate:false
},

items: [
new Ext.tree.TreePanel({
id:'im-tree',
title: 'Online Users',
loader: new Ext.tree.TreeLoader(),
rootVisible:false,
lines:false,
autoScroll:true,
tools:[{
id:'refresh',
on:{
click: function(){
var tree = Ext.getCmp('im-tree');
tree.body.mask('Loading', 'x-mask-loading');
tree.root.reload();
tree.root.collapse(true, false);
setTimeout(function(){ // mimic a server call
tree.body.unmask();
tree.root.expand(true, true);
}, 1000);
}
}
}],
root: new Ext.tree.AsyncTreeNode({
text:'Online',
children:[{
text:'Friends',
expanded:true,
children:[{
text:'Jack',
iconCls:'user',
leaf:true
},{
text:'Brian',
iconCls:'user',
leaf:true
},{
text:'Jon',
iconCls:'user',
leaf:true
},{
text:'Tim',
iconCls:'user',
leaf:true
},{
text:'Nige',
iconCls:'user',
leaf:true
},{
text:'Fred',
iconCls:'user',
leaf:true
},{
text:'Bob',
iconCls:'user',
leaf:true
}]
},{
text:'Family',
expanded:true,
children:[{
text:'Kelly',
iconCls:'user-girl',
leaf:true
},{
text:'Sara',
iconCls:'user-girl',
leaf:true
},{
text:'Zack',
iconCls:'user-kid',
leaf:true
},{
text:'John',
iconCls:'user-kid',
leaf:true
}]
}]
})
}), {
title: 'Settings',
html:'<p>Something useful would be in here.</p>',
autoScroll:true
},{
title: 'Even More Stuff',
html : '<p>Something useful would be in here.</p>'
},{
title: 'My Stuff',
html : '<p>Something useful would be in here.</p>'
}
]
});
}
win.show();
}
});

// for example purposes
var windowIndex = 0;

MyDesktop.BogusModule = Ext.extend(Ext.app.Module, {
init : function(){
this.launcher = {
text: 'Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId:windowIndex
}
},

createWindow : function(src){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('bogus'+src.windowId);
if(!win){
win = desktop.createWindow({
id: 'bogus'+src.windowId,
title:src.text,
width:640,
height:480,
html : '<p>Something useful would be in here.</p>',
iconCls: 'bogus',
shim:false,
animCollapse:false,
constrainHeader:true
});
}
win.show();
}
});


MyDesktop.BogusMenuModule = Ext.extend(MyDesktop.BogusModule, {
init : function(){
this.launcher = {
text: 'Bogus Submenu',
iconCls: 'bogus',
handler: function() {
return false;
},
menu: {
items:[{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
}]
}
}
}
});


MyDesktop.VideoWindow = Ext.extend(Ext.app.Module, {
id: 'video-win',

init: function() {
this.launcher = {
text : 'Video Window',
iconCls: 'icon-grid',
handler: this.createWindow,
scope : this
};
},

createWindow: function() {
var win,
tipWidth = 160,
tipHeight = 96;

/* createWindow uses renderTo, so it is immediately rendered */
win = this.app.getDesktop().createWindow({
animCollapse : false,
constrainHeader: true,

title : 'Video Window',
width : 740,
height : 480,
iconCls: 'icon-grid',
shim : false,
border : false,
layout : 'fit',
items: [{
xtype: 'html5video',
src: [
// firefox (ogg theora)
{
src : 'IMG_08744.MOV',
type: 'video/ogg'
},
// chrome and webkit-nightly (h.264)
{
src : 'ABC.MOV',
type: 'video/mp4'
}
],
autobuffer: true,
autoplay : true,
controls : true,
/* default */
listeners: {
afterrender: function() {
var win = this.ownerCt;
win.videoEl = this.video.dom;

win.tip = new Ext.ToolTip({
anchor : 'bottom',
autoHide : true,
hideDelay: 300,
height : tipHeight,
width : tipWidth,
bodyCfg : {
tag : 'canvas',
width : tipWidth,
height : tipHeight
},
listeners: {
afterrender: function() {
/* get the canvas 2d context */
win.ctx = this.body.dom.getContext('2d');
}
}
});
}
}
}],
listeners: {
beforedestroy: function() {
win.tip = win.ctx = win.videoEl = null;
}
}
});

win.show();

win.tip.initTarget(win.taskButton.el);
win.tip.on('show', this.renderPreview.createDelegate(this, [win]));
},

renderPreview: function(win) {
if ((win.tip && ! win.tip.isVisible()) || !win.videoEl) return;

if (win.ctx) {
win.ctx.drawImage(win.videoEl, 0, 0, win.tip.width, win.tip.height);
}

/* 20ms to keep the tooltip video smooth */
this.renderPreview.defer(20, this, [win]);
}

});


/* -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);
}
});
},

_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
},
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;

/* 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);
}

});

Ext.reg('html5video', Ext.ux.HTML5VideoPanel);

// Array data for the grid
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];

Animal
24 Jun 2010, 5:17 AM
IIRC, to trigger HTML5 in FF, you need <!DOCTYPE html>

prashantB
24 Jun 2010, 5:24 AM
Hi Animal,

Sorry to say but I have not understood above reply, could you please explain it to me.
If you have any example would be best to understand me.

Thanks
Prashant.

mankz
24 Jun 2010, 5:39 AM
Read up on doctype:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

prashantB
28 Jun 2010, 3:51 AM
Hi,

Any body could please give me the example of 'flowplayer' which is used as fallback ?

Thanks
P

jay@moduscreate.com
28 Jun 2010, 3:52 AM
Hi,

Any body could please give me the example of 'flowplayer' which is used as fallback ?

Thanks
P

http://flowplayer.org/documentation/index.html