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
| /*!
| * 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'
| }
| },
|
| 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' }
| ],
| poster: 'http://b.vimeocdn.com/ts/148/397/148397103_640.jpg',
| 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;
| }
| }
| });
| }
|
| 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);
| }
| });
|
|
