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