examples/desktop/js/Video.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 /* -NOTICE-
  25  * For HTML5 video to work, your server must
  26  * send the right content type, for more info see:
  27  * http://developer.mozilla.org/En/HTML/Element/Video
  28  */
  29
  30 Ext.define('Ext.ux.desktop.Video', {
  31     extend: 'Ext.panel.Panel',
  32
  33     alias: 'widget.video',
  34
  35     width: '100%',
  36     height: '100%',
  37     autoplay: false,
  38     controls: true,
  39     bodyStyle: 'background-color:#000;color:#fff',
  40     html: '',
  41
  42     initComponent: function () {
  43         this.callParent();
  44     },
  45
  46     afterRender: function () {
  47         var fallback;
  48
  49         if (this.fallbackHTML) {
  50             fallback = this.fallbackHTML;
  51         } else {
  52             fallback = "Your browser does not support HTML5 Video. ";
  53
  54             if (Ext.isChrome) {
  55                 fallback += 'Upgrade Chrome.';
  56             } else if (Ext.isGecko) {
  57                 fallback += 'Upgrade to Firefox 3.5 or newer.';
  58             } else {
  59                 var chrome = '<a href="http://www.google.com/chrome">Chrome</a>';
  60                 fallback += 'Please try <a href="http://www.mozilla.com">Firefox</a>';
  61
  62                 if (Ext.isIE) {
  63                     fallback += ', ' + chrome +
  64                         ' or <a href="http://www.google.com/chromeframe">Chrome Frame for IE</a>.';
  65                 } else {
  66                     fallback += ' or ' + chrome + '.';
  67                 }
  68             }
  69         }
  70
  71         // match the video size to the panel dimensions
  72         var size = this.getSize();
  73
  74         var cfg = Ext.copyTo({
  75             tag   : 'video',
  76             width : size.width,
  77             height: size.height
  78         },
  79         this, 'poster,start,loopstart,loopend,playcount,autobuffer,loop');
  80
  81         // just having the params exist enables them
  82         if (this.autoplay) {
  83             cfg.autoplay = 1;
  84         }
  85         if (this.controls) {
  86             cfg.controls = 1;
  87         }
  88
  89         // handle multiple sources
  90         if (Ext.isArray(this.src)) {
  91             cfg.children = [];
  92
  93             for (var i = 0, len = this.src.length; i < len; i++) {
  94                 if (!Ext.isObject(this.src[i])) {
  95                     Ext.Error.raise('The src list passed to "video" must be an array of objects');
  96                 }
  97
  98                 cfg.children.push(
  99                     Ext.applyIf({tag: 'source'}, this.src[i])
 100                 );
 101             }
 102
 103             cfg.children.push({
 104                 html: fallback
 105             });
 106
 107         } else {
 108             cfg.src  = this.src;
 109             cfg.html = fallback;
 110         }
 111
 112         this.video = this.body.createChild(cfg);
 113         var el = this.video.dom;
 114         this.supported = (el && el.tagName.toLowerCase() == 'video');
 115     },
 116
 117     doComponentLayout : function() {
 118         var me = this;
 119
 120         me.callParent(arguments);
 121
 122         if (me.video)
 123             me.video.setSize(me.body.getSize());
 124     },
 125
 126     onDestroy: function () {
 127         var video = this.video;
 128         if (video) {
 129             var videoDom = video.dom;
 130             if (videoDom && videoDom.pause) {
 131                 videoDom.pause();
 132             }
 133             video.remove();
 134             this.video = null;
 135         }
 136
 137         this.callParent();
 138     }
 139 });
 140