您的位置：首页 → 技术开发 → JAVA Script → Exit加HTML播放器制作思路

Exit加HTML播放器制作思路

时间：2010/1/19 14:02:00来源：本站整理作者：我要评论(0)

作为HTML5的一部分，<video> 可以通用CSS和JavaScript来定制和操作，使得我们能够用一种不错的方式对用户观看的视频加以处理。以此为题材，我们可以做出一个很实用的组件——live video ，以下为截图：

 

 首先扩展Ext.Panel使其可以播放HTML5的视频：

 

 

Html代码

1. Ext.ns('Ext.ux');   
2.     
3. /* -NOTICE-   
4.  * For HTML5 video to work, your server must   
5.  * send the right content type, for more info see:   
6.  * https://developer.mozilla.org/En/HTML/Element/Video   
7.  */   
8. ExtExt.ux.HTML5VideoPanel = Ext.extend(Ext.Panel, {   
9.     
10.   constructor: function(config) {   
11.     Ext.ux.HTML5VideoPanel.superclass.constructor.call(this, Ext.applyIf(config, {   
12.       width    : '100%',   
13.       height   : '100%',   
14.       autoplay : false,   
15.       controls : true,   
16.       bodyStyle: 'background-color:#000;color:#fff',   
17.       html     : '',   
18.       suggestChromeFrame: false   
19.     }));   
20.     
21.     this.on({   
22.       scope        : this,   
23.       render       : this._render,   
24.       beforedestroy: function() {   
25.         this.video = null;   
26.       },   
27.       bodyresize   : function(panel, width, height) {   
28.         if (this.video)   
29.         this.video.setSize(width, height);   
30.       }   
31.     });   
32.   },   
33.     
34.   _render: function() {   
35.     var fallback = '';   
36.     
37.     if (this.fallbackHTML) {   
38.       fallback = this.fallbackHTML;   
39.     } else {   
40.       fallback = "Your browser doesn't support html5 video. ";   
41.     
42.       if (Ext.isIE && this.suggestChromeFrame) {   
43.         /* chromeframe requires that your site have a special tag in the header   
44.          * see http://code.google.com/chrome/chromeframe/ for details   
45.          */   
46.         fallback += '<a>Get Google Chrome Frame for IE</a>';   
47.       } else if (Ext.isChrome) {   
48.         fallback += '<a>Upgrade Chrome</a>';   
49.       } else if (Ext.isGecko) {   
50.         fallback += '<a>Upgrade to Firefox 3.5</a>';   
51.       } else {   
52.         fallback += '<a>Get Firefox 3.5</a>';   
53.       }   
54.     }   
55.     
56.     /* match the video size to the panel dimensions */   
57.     var size = this.getSize();   
58.     
59.     var cfg = Ext.copyTo({   
60.       tag   : 'video',   
61.       width : size.width,   
62.       height: size.height   
63.     },   
64.     this, 'poster,start,loopstart,loopend,playcount,autobuffer,loop');   
65.     
66.     /* just having the params exist enables them */   
67.     if (this.autoplay) cfg.autoplay = 1;   
68.     if (this.controls) cfg.controls = 1;   
69.     
70.     /* handle multiple sources */   
71.     if (Ext.isArray(this.src)) {   
72.       cfg.children = [];   
73.     
74.       for (var i = 0, len = this.src.length; i < len; i++) {   
75.         if (!Ext.isObject(this.src[i])) {   
76.           throw "source list passed to html5video panel must be an array of objects";   
77.         }   
78.     
79.         cfg.children.push(   
80.           Ext.applyIf({tag: 'source'}, this.src[i])   
81.         );   
82.       }   
83.     
84.       cfg.children.push({   
85.         html: fallback   
86.       });   
87.     
88.     } else {   
89.       cfg.src  = this.src;   
90.       cfg.html = fallback;   
91.     }   
92.     
93.     thisthis.video = this.body.createChild(cfg);   
94.   }   
95.     
96. });   
97.     
98. Ext.reg('html5video', Ext.ux.HTML5VideoPanel);  

Ext.ns('Ext.ux');
 
/* -NOTICE-
 * For HTML5 video to work, your server must
 * send the right content type, for more info see:
 * https://developer.mozilla.org/En/HTML/Element/Video
 */
Ext.ux.HTML5VideoPanel = Ext.extend(Ext.Panel, {
 
  constructor: function(config) {
    Ext.ux.HTML5VideoPanel.superclass.constructor.call(this, Ext.applyIf(config, {
      width    : '100%',
      height   : '100%',
      autoplay : false,
      controls : true,
      bodyStyle: 'background-color:#000;color:#fff',
      html     : '',
      suggestChromeFrame: false
    }));
 
    this.on({
      scope        : this,
      render       : this._render,
      beforedestroy: function() {
        this.video = null;
      },
      bodyresize   : function(panel, width, height) {
        if (this.video)
        this.video.setSize(width, height);
      }
    });
  },
 
  _render: function() {
    var fallback = '';
 
    if (this.fallbackHTML) {
      fallback = this.fallbackHTML;
    } else {
      fallback = "Your browser doesn't support html5 video. ";
 
      if (Ext.isIE && this.suggestChromeFrame) {
        /* chromeframe requires that your site have a special tag in the header
         * see http://code.google.com/chrome/chromeframe/ for details
         */
        fallback += '<a>Get Google Chrome Frame for IE</a>';
      } else if (Ext.isChrome) {
        fallback += '<a>Upgrade Chrome</a>';
      } else if (Ext.isGecko) {
        fallback += '<a>Upgrade to Firefox 3.5</a>';
      } else {
        fallback += '<a>Get Firefox 3.5</a>';
      }
    }
 
    /* 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])) {
          throw "source list passed to html5video panel 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);
  }
 
});
 
Ext.reg('html5video', Ext.ux.HTML5VideoPanel);

 将html5video panel添加到一个web desktop window，canvas preview 添加到taskbar按钮：

 

 

Html代码

1. Desktop.VideoWindow = Ext.extend(Ext.app.Module, {   
2.   id: 'video-win',   
3.     
4.   init: function() {   
5.     this.launcher = {   
6.       text   : 'Video Window',   
7.       iconCls: 'icon-grid',   
8.       handler: this.createWindow,   
9.       scope  : this   
10.     };   
11.   },   
12.     
13.   createWindow: function() {   
14.     var win,   
15.         tipWidth  = 160,   
16.         tipHeight = 96;   
17.     
18.     /* createWindow uses renderTo, so it is immediately rendered */   
19.     win = this.app.getDesktop().createWindow({   
20.       animCollapse   : false,   
21.       constrainHeader: true,   
22.     
23.       title  : 'Video Window',   
24.       width  : 740,   
25.       height : 480,   
26.       iconCls: 'icon-grid',   
27.       shim   : false,   
28.       border : false,   
29.       layout : 'fit',   
30.       items: [{   
31.         xtype: 'html5video',   
32.         src: [   
33.         // firefox (ogg theora)   
34.         {   
35.           src : 'http://xant.us/files/google_main.ogv',   
36.           type: 'video/ogg'   
37.         },   
38.         // chrome and webkit-nightly (h.264)   
39.         {   
40.           src : 'http://xant.us/files/google_main.mgv',   
41.           type: 'video/mp4'   
42.         }   
43.         ],   
44.         autobuffer: true,   
45.         autoplay : true,   
46.         controls : true,   
47.         /* default */   
48.         listeners: {   
49.           afterrender: function() {   
50.             var win = this.ownerCt;   
51.             win.videoEl = this.video.dom;   
52.     
53.             win.tip = new Ext.ToolTip({   
54.               anchor   : 'bottom',   
55.               autoHide : true,   
56.               hideDelay: 300,   
57.               height   : tipHeight,   
58.               width    : tipWidth,   
59.               bodyCfg  : {   
60.                 tag    : 'canvas',   
61.                 width  : tipWidth,   
62.                 height : tipHeight   
63.               },   
64.               listeners: {   
65.                 afterrender: function() {   
66.                   /* get the canvas 2d context */   
67.                   win.ctx = this.body.dom.getContext('2d');   
68.                 }   
69.               }   
70.             });   
71.           }   
72.         }   
73.       }],   
74.       listeners: {   
75.         beforedestroy: function() {   
76.           winwin.tip = win.ctx = win.videoEl = null;   
77.         }   
78.       }   
79.     });   
80.     
81.     win.show();   
82.     
83.     win.tip.initTarget(win.taskButton.el);   
84.     win.tip.on('show', this.renderPreview.createDelegate(this, [win]));   
85.   },   
86.     
87.   renderPreview: function(win) {   
88.     if ((win.tip && ! win.tip.isVisible()) || !win.videoEl) return;   
89.     
90.     if (win.ctx) {   
91.       win.ctx.drawImage(win.videoEl, 0, 0, win.tip.width, win.tip.height);         
92.     }   
93.     
94.     /* 20ms to keep the tooltip video smooth */   
95.     this.renderPreview.defer(20, this, [win]);   
96.   }   
97.     
98. });  

Desktop.VideoWindow = Ext.extend(Ext.app.Module, {
  id: 'video-win',
 
  init: function() {
    this.launcher = {
      text   : 'Video Window',
      iconCls: 'icon-grid',
      handler: this.createWindow,
      scope  : this
    };
  },
 
  createWindow: function() {
    var win,
        tipWidth  = 160,
        tipHeight = 96;
 
    /* createWindow uses renderTo, so it is immediately rendered */
    win = this.app.getDesktop().createWindow({
      animCollapse   : false,
      constrainHeader: true,
 
      title  : 'Video Window',
      width  : 740,
      height : 480,
      iconCls: 'icon-grid',
      shim   : false,
      border : false,
      layout : 'fit',
      items: [{
        xtype: 'html5video',
        src: [
        // firefox (ogg theora)
        {
          src : 'http://xant.us/files/google_main.ogv',
          type: 'video/ogg'
        },
        // chrome and webkit-nightly (h.264)
        {
          src : 'http://xant.us/files/google_main.mgv',
          type: 'video/mp4'
        }
        ],
        autobuffer: true,
        autoplay : true,
        controls : true,
        /* default */
        listeners: {
          afterrender: function() {
            var win = this.ownerCt;
            win.videoEl = this.video.dom;
 
            win.tip = new Ext.ToolTip({
              anchor   : 'bottom',
              autoHide : true,
              hideDelay: 300,
              height   : tipHeight,
              width    : tipWidth,
              bodyCfg  : {
                tag    : 'canvas',
                width  : tipWidth,
                height : tipHeight
              },
              listeners: {
                afterrender: function() {
                  /* get the canvas 2d context */
                  win.ctx = this.body.dom.getContext('2d');
                }
              }
            });
          }
        }
      }],
      listeners: {
        beforedestroy: function() {
          win.tip = win.ctx = win.videoEl = null;
        }
      }
    });
 
    win.show();
 
    win.tip.initTarget(win.taskButton.el);
    win.tip.on('show', this.renderPreview.createDelegate(this, [win]));
  },
 
  renderPreview: function(win) {
    if ((win.tip && ! win.tip.isVisible()) || !win.videoEl) return;
 
    if (win.ctx) {
      win.ctx.drawImage(win.videoEl, 0, 0, win.tip.width, win.tip.height);      
    }
 
    /* 20ms to keep the tooltip video smooth */
    this.renderPreview.defer(20, this, [win]);
  }
 
});

 

在靠近sample.js顶部的位置，为getModules添加app constructor：

 

getModules : function(){
  return [
    new MyDesktop.GridWindow(),
    new MyDesktop.TabWindow(),
    new MyDesktop.AccordionWindow(),
    new MyDesktop.BogusMenuModule(),
    new MyDesktop.BogusModule(),
    /* add the line below, and don't forget the comma above */
    new MyDesktop.VideoWindow()
  ];
}

相关阅读 完美视频怎么使用说明 完美视频播放器怎么用看韩剧用什么播放器好 看韩剧用什么软件优酷怎么1元开通会员 优酷会员1元购买方法b站播放器绿屏卡顿花屏怎么办 bilibili播放器常见问题解决方法看视频用哪款软件好 全中国最好的几款视频app都在这里音乐达人必备 轻松玩转四款高人气音乐app免费看片播放器大全 免费看片播放器推荐 免费看片播放器排行榜春潮快潘播放器在哪下载 春潮快潘播放器最新下载地址

文章评论

查看所有0条评论>>

发表评论

我来说两句...

提交评论