X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/desktop/js/Video.js

diff --git a/examples/desktop/js/Video.js b/examples/desktop/js/Video.js
new file mode 100755
index 00000000..9675d811
--- /dev/null
+++ b/examples/desktop/js/Video.js
@@ -0,0 +1,125 @@
+/*!
+* Ext JS Library 4.0
+* Copyright(c) 2006-2011 Sencha Inc.
+* licensing@sencha.com
+* http://www.sencha.com/license
+*/
+
+// From code originally written by David Davis (http://www.sencha.com/blog/html5-video-canvas-and-ext-js/)
+
+/* -NOTICE-
+ * For HTML5 video to work, your server must
+ * send the right content type, for more info see:
+ * http://developer.mozilla.org/En/HTML/Element/Video
+ */
+
+Ext.define('Ext.ux.desktop.Video', {
+    extend: 'Ext.panel.Panel',
+
+    alias: 'widget.video',
+
+    width: '100%',
+    height: '100%',
+    autoplay: false,
+    controls: true,
+    bodyStyle: 'background-color:#000;color:#fff',
+    html: '',
+
+    initComponent: function () {
+        this.callParent();
+    },
+
+    afterRender: function () {
+        var fallback;
+
+        if (this.fallbackHTML) {
+            fallback = this.fallbackHTML;
+        } else {
+            fallback = "Your browser does not support HTML5 Video. ";
+
+            if (Ext.isChrome) {
+                fallback += 'Upgrade Chrome.';
+            } else if (Ext.isGecko) {
+                fallback += 'Upgrade to Firefox 3.5 or newer.';
+            } else {
+                var chrome = '<a href="http://www.google.com/chrome">Chrome</a>';
+                fallback += 'Please try <a href="http://www.mozilla.com">Firefox</a>';
+
+                if (Ext.isIE) {
+                    fallback += ', ' + chrome +
+                        ' or <a href="http://www.google.com/chromeframe">Chrome Frame for IE</a>.';
+                } else {
+                    fallback += ' or ' + chrome + '.';
+                }
+            }
+        }
+
+        // match the video size to the panel dimensions
+        var size = this.getSize();
+
+        var cfg = Ext.copyTo({
+            tag   : 'video',
+            width : size.width,
+            height: size.height
+        },
+        this, 'poster,start,loopstart,loopend,playcount,autobuffer,loop');
+
+        // just having the params exist enables them
+        if (this.autoplay) {
+            cfg.autoplay = 1;
+        }
+        if (this.controls) {
+            cfg.controls = 1;
+        }
+
+        // handle multiple sources
+        if (Ext.isArray(this.src)) {
+            cfg.children = [];
+
+            for (var i = 0, len = this.src.length; i < len; i++) {
+                if (!Ext.isObject(this.src[i])) {
+                    Ext.Error.raise('The src list passed to "video" must be an array of objects');
+                }
+
+                cfg.children.push(
+                    Ext.applyIf({tag: 'source'}, this.src[i])
+                );
+            }
+
+            cfg.children.push({
+                html: fallback
+            });
+
+        } else {
+            cfg.src  = this.src;
+            cfg.html = fallback;
+        }
+
+        this.video = this.body.createChild(cfg);
+        var el = this.video.dom;
+        this.supported = (el && el.tagName.toLowerCase() == 'video');
+    },
+
+    doComponentLayout : function() {
+        var me = this;
+
+        me.callParent(arguments);
+
+        if (me.video)
+            me.video.setSize(me.body.getSize());
+    },
+
+    onDestroy: function () {
+        var video = this.video;
+        if (video) {
+            var videoDom = video.dom;
+            if (videoDom && videoDom.pause) {
+                videoDom.pause();
+            }
+            video.remove();
+            this.video = null;
+        }
+
+        this.callParent();
+    }
+});