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+,
   7  *   the video will 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  *         layout: 'fit',
  26  *         items: [
  27  *             {
  28  *                 xtype    : 'video',
  29  *                 url      : 'porsche911.mov',
  30  *                 posterUrl: 'porsche.png'
  31  *             }
  32  *         ]
  33  *     });
  34  */
  35 Ext.define('Ext.Video', {
  36     extend: 'Ext.Media',
  37     xtype: 'video',
  38
  39     config: {
  40         /**
  41          * @cfg {String/Array} url
  42          * Location of the video to play. This should be in H.264 format and in a .mov file format.
  43          * @accessor
  44          */
  45
  46         /**
  47          * @cfg {String} posterUrl
  48          * Location of a poster image to be shown before showing the video.
  49          * @accessor
  50          */
  51         posterUrl: null,
  52
  53         /**
  54          * @cfg {Boolean} [showPosterOnPause=true] When paused, the {@link #posterUrl}
  55          * will be shown. If set to `false`, the poster will not be shown when the video
  56          * is paused.
  57          *
  58          * Showing a poster may save on device resources as the `<video>` element is
  59          * resource intensive whereas the `<img>` is not as intensive. Not showing a poster
  60          * may slow down parts of the application including scrolling as the device is
  61          * repainting the screen.
  62          *
  63          * @since 6.5.0
  64          */
  65         showPosterOnPause: false
  66     },
  67
  68     baseCls: Ext.baseCSSPrefix + 'video',
  69
  70     template: [{
  71         /**
  72          * @property {Ext.dom.Element} ghost
  73          * @private
  74          */
  75         reference: 'ghost',
  76         classList: [Ext.baseCSSPrefix + 'video-ghost']
  77     }, {
  78         tag: 'video',
  79         reference: 'media',
  80         classList: [Ext.baseCSSPrefix + 'media']
  81     }],
  82
  83     initialize: function() {
  84         var me = this;
  85
  86         me.callParent();
  87
  88         me.media.hide();
  89
  90         me.ghost.on({
  91             tap: 'onGhostTap',
  92             scope: me
  93         });
  94
  95         me.media.on({
  96             pause: 'onPause',
  97             scope: me
  98         });
  99
 100         if (Ext.os.is.Android4 || Ext.os.is.iPad) {
 101             this.isInlineVideo = true;
 102         }
 103     },
 104
 105     applyUrl: function(url) {
 106         return [].concat(url);
 107     },
 108
 109     updateUrl: function(newUrl) {
 110         var me = this,
 111             media = me.media,
 112             newLn = newUrl.length,
 113             existingSources = media.query('source'),
 114             oldLn = existingSources.length,
 115             i;
 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     onActivate: function() {
 134         this.media.show();
 135     },
 136
 137     onDeactivate: function() {
 138         this.pause();
 139         this.media.hide();
 140         this.ghost.show();
 141     },
 142
 143     /**
 144      * @private
 145      * Called when the {@link #ghost} element is tapped.
 146      */
 147     onGhostTap: function() {
 148         var me = this,
 149             media = this.media,
 150             ghost = this.ghost;
 151
 152         media.show();
 153         ghost.hide();
 154         me.play();
 155     },
 156
 157     /**
 158      * @private
 159      * native video tag display only, move the media down so we can control the Viewport
 160      */
 161     onPause: function(e) {
 162         this.callParent([e]);
 163
 164         // If the video is seeking, the browser may pause the video before setting
 165         // the time to wherever the user clicked on.
 166         if (!this.isInlineVideo && !e.target.seeking && this.getShowPosterOnPause()) {
 167             this.media.hide();
 168             this.ghost.show();
 169         }
 170     },
 171
 172     /**
 173      * @private
 174      * native video tag display only, move the media down so we can control the Viewport
 175      */
 176     onPlay: function(e) {
 177         this.callParent([e]);
 178
 179         this.media.show();
 180     },
 181
 182     /**
 183      * Updates the URL to the poster, even if it is rendered.
 184      * @param {Object} newUrl
 185      */
 186     updatePosterUrl: function(newUrl) {
 187         var ghost = this.ghost;
 188
 189         if (ghost) {
 190             ghost.setStyle('background-image', 'url(' + newUrl + ')');
 191         }
 192     }
 193 });