VideoWindow.js
4.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/*!
* Ext JS Library 4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
// From code originally written by David Davis (http://www.sencha.com/blog/html5-video-canvas-and-ext-js/)
Ext.define('MyDesktop.VideoWindow', {
extend: 'Ext.ux.desktop.Module',
uses: [
'Ext.ux.desktop.Video'
],
id:'video',
windowId: 'video-window',
tipWidth: 160,
tipHeight: 96,
init : function(){
this.launcher = {
text: 'About Ext JS',
iconCls:'video',
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
var me = this, desktop = me.app.getDesktop(),
win = desktop.getWindow(me.windowId);
if (!win) {
win = desktop.createWindow({
id: me.windowId,
title: 'About Ext JS',
width: 740,
height: 480,
iconCls: 'video',
animCollapse: false,
border: false,
layout: 'fit',
items: [
{
xtype: 'video',
id: 'video-player',
src: [
// browser will pick the format it likes most:
{ src: 'http://dev.sencha.com/desktopvideo.mp4', type: 'video/mp4' },
{ src: 'http://dev.sencha.com/desktopvideo.ogv', type: 'video/ogg' },
{ src: 'http://dev.sencha.com/desktopvideo.mov', type: 'video/quicktime' }
],
autobuffer: true,
autoplay : true,
controls : true,
/* default */
listeners: {
afterrender: function(video) {
me.videoEl = video.video.dom;
if (video.supported) {
me.tip = new Ext.tip.ToolTip({
anchor : 'bottom',
dismissDelay : 0,
height : me.tipHeight,
width : me.tipWidth,
renderTpl: [
'<canvas width="', me.tipWidth,
'" height="', me.tipHeight, '">'
],
renderSelectors: {
body: 'canvas'
},
listeners: {
afterrender: me.onTooltipRender,
show: me.renderPreview,
scope: me
}
}); // tip
}
}
}
}
],
listeners: {
beforedestroy: function() {
me.tip = me.ctx = me.videoEl = null;
}
}
});
}
win.show();
if (me.tip) {
me.tip.setTarget(win.taskButton.el);
}
return win;
},
onTooltipRender: function (tip) {
// get the canvas 2d context
var el = tip.body.dom, me = this;
me.ctx = el.getContext && el.getContext('2d');
},
renderPreview: function() {
var me = this;
if ((me.tip && !me.tip.isVisible()) || !me.videoEl) {
return;
}
if (me.ctx) {
try {
me.ctx.drawImage(me.videoEl, 0, 0, me.tipWidth, me.tipHeight);
} catch(e) {};
}
// 20ms to keep the tooltip video smooth
Ext.Function.defer(me.renderPreview, 20, me);
}
});