extjs/modern/modern/src/Video.js

   1 /**
   2  * Provides a simple Container for HTML5 Video.
   3  *
   4  * ## Notes
   5  *
   6  * - There are quite a few issues with the `<video>` tag on Android devices. On Android 2+, the video will
   7  * appear and play on first attempt, but any attempt afterwards will not work.
   8  *
   9  * ## Useful Properties
  10  *
  11  * - {@link #url}
  12  * - {@link #autoPause}
  13  * - {@link #autoResume}
  14  *
  15  * ## Useful Methods
  16  *
  17  * - {@link #method-pause}
  18  * - {@link #method-play}
  19  * - {@link #toggle}
  20  *
  21  * ## Example
  22  *
  23  *     var panel = Ext.create('Ext.Panel', {
  24  *         fullscreen: true,
  25  *         items: [
  26  *             {
  27  *                 xtype    : 'video',
  28  *                 x        : 600,
  29  *                 y        : 300,
  30  *                 width    : 175,
  31  *                 height   : 98,
  32  *                 url      : "porsche911.mov",
  33  *                 posterUrl: 'porsche.png'
  34  *             }
  35  *         ]
  36  *     });
  37  */
  38 Ext.define('Ext.Video', {
  39     extend: 'Ext.Media',
  40     xtype: 'video',
  41
  42     config: {
  43         /**
  44          * @cfg {String/Array} url
  45          * Location of the video to play. This should be in H.264 format and in a .mov file format.
  46          * @accessor
  47          */
  48
  49         /**
  50          * @cfg {String} posterUrl
  51          * Location of a poster image to be shown before showing the video.
  52          * @accessor
  53          */
  54         posterUrl: null,
  55
  56         /**
  57          * @cfg
  58          * @inheritdoc
  59          */
  60         baseCls: Ext.baseCSSPrefix + 'video',
  61
  62         /**
  63          * @cfg {Boolean} controls
  64          * Determines if native controls should be shown for this video player.
  65          */
  66         controls: true
  67     },
  68
  69     template: [{
  70         /**
  71          * @property {Ext.dom.Element} ghost
  72          * @private
  73          */
  74         reference: 'ghost',
  75         classList: [Ext.baseCSSPrefix + 'video-ghost']
  76     }, {
  77         tag: 'video',
  78         reference: 'media',
  79         classList: [Ext.baseCSSPrefix + 'media']
  80     }],
  81
  82     initialize: function() {
  83         var me = this;
  84
  85         me.callParent();
  86
  87         me.media.hide();
  88
  89         me.ghost.on({
  90             tap: 'onGhostTap',
  91             scope: me
  92         });
  93
  94         me.media.on({
  95             pause: 'onPause',
  96             scope: me
  97         });
  98
  99         if (Ext.os.is.Android4 || Ext.os.is.iPad) {
 100             this.isInlineVideo = true;
 101         }
 102     },
 103
 104     applyUrl: function(url) {
 105         return [].concat(url);
 106     },
 107
 108     updateUrl: function(newUrl) {
 109         var me = this,
 110             media = me.media,
 111             newLn = newUrl.length,
 112             existingSources = media.query('source'),
 113             oldLn = existingSources.length,
 114             i;
 115
 116
 117         for (i = 0; i < oldLn; i++) {
 118             Ext.fly(existingSources[i]).destroy();
 119         }
 120
 121         for (i = 0; i < newLn; i++) {
 122             media.appendChild(Ext.Element.create({
 123                 tag: 'source',
 124                 src: newUrl[i]
 125             }));
 126         }
 127
 128         if (me.isPlaying()) {
 129             me.play();
 130         }
 131     },
 132
 133     updateControls: function(value) {
 134         this.media.set({controls:value ? true : undefined});
 135     },
 136
 137     onActivate: function() {
 138         this.media.setTop(0);
 139     },
 140
 141     onDeactivate: function() {
 142         this.pause();
 143         this.media.setTop(-2000);
 144         this.ghost.show();
 145     },
 146
 147     /**
 148      * @private
 149      * Called when the {@link #ghost} element is tapped.
 150      */
 151     onGhostTap: function() {
 152         var me = this,
 153             media = this.media,
 154             ghost = this.ghost;
 155
 156         media.show();
 157         // Browsers which support native video tag display only, move the media down so
 158         // we can control the Viewport
 159         ghost.hide();
 160         me.play();
 161     },
 162
 163     /**
 164      * @private
 165      * native video tag display only, move the media down so we can control the Viewport
 166      */
 167     onPause: function() {
 168         this.callParent(arguments);
 169         if (!this.isInlineVideo) {
 170             this.media.setTop(-2000);
 171             this.ghost.show();
 172         }
 173     },
 174
 175     /**
 176      * @private
 177      * native video tag display only, move the media down so we can control the Viewport
 178      */
 179     onPlay: function() {
 180         this.callParent(arguments);
 181         this.media.setTop(0);
 182     },
 183
 184     /**
 185      * Updates the URL to the poster, even if it is rendered.
 186      * @param {Object} newUrl
 187      */
 188     updatePosterUrl: function(newUrl) {
 189         var ghost = this.ghost;
 190         if (ghost) {
 191             ghost.setStyle('background-image', 'url(' + newUrl + ')');
 192         }
 193     }
 194 });