examples/desktop/VideoWindow.js

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