examples/desktop/VideoWindow.js

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