阅读更多

6顶
0踩

Web前端

翻译新闻 实时视频工具,展示HTML5 video, canvas, Ext 特性

2010-01-18 12:58 by 资深编辑 wutao0603 评论(3) 有14636人浏览

 David Davis创建了一个Live video示例,用于展示HTML5 video和Canvas的特性。<video> 标签是为了原生的视频渲染,这样的话就不用那些第三方的如Flash的插件。至于<canvas> 标签,则是为了在像素级别,这么细的一个级别中“画出”复杂的图形图像,而且是一个清晰而强大的API。

 

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


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

 

 

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按钮:

 

 

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()
  ];
}

 

点击查看示例:http://xant.us/ext-ux/lib/ext-3.0.0/examples/desktop/desktop.html

 

查看原文更多详情介绍:http://www.extjs.com/blog/2010/01/14/html5-video-canvas-extjs/

  • 大小: 345.9 KB
来自: ajaxian
6
0
评论 共 3 条 请登录后发表评论
3 楼 凤凰山 2011-04-29 12:13
2 楼 tom_cjp 2010-01-20 21:16
1 楼 terryang 2010-01-18 17:40
太cool了,哈哈

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • Web Services 技术架构

    Web Services 杨永智 MCT/MVP 微软校园大使

  • WebService全面详解

    https://blog.csdn.net/ITITII/article/details/79609073

  • WebServices技术介绍

    文章目录WebServices技术XMLSOAPWSDLgSoap介绍参考文章 WebServices技术 WebServices技术是服务器程序通过Internet发布应用服务并能够被客户端程序远程调用的一种标准机制。 采用的标准和技术有XML、SOAP、HTTP、WebServices描述语言(WSDL)和通用唯一识别码(UDDI)等。 客户端程序通过WebServices,调用暴露在外界的应用程序编程接口(API),就可以使用位于服务器的WebServices。 下面介绍XML技术、SOAP和WSDL

  • Web服务(Web Service)

    Web服务(Web Service)

  • WebService技术详解 (一)

    WebServiceWebService简介Web Service技术, 能使得运行在不同机器上的不同应用无须借助附加的、专门的第三方软件或硬件, 就可相互交换数据或集成。依据Web Service规范实施的应用之间, 无论它们所使用的语言、 平台或内部协议是什么, 都可以相互交换数据。 简单的说,WebService就是一种跨编程语言和跨操作系统平台的远程调用技术。所谓跨编程语言和跨操作平台,

  • Web services 技术

    学习web services 的很好的帮手,敬请下载!!

  • Web Services技术

    **背景:**为了方便理解,可以先认为:Web Services = http + xml,而现在流行的Restful可以认为是:Restful = http + json,当然其实这两种说法都是很不严谨的,这么写只是为了方便理解。 Web Services特点介绍 WebServices 提供一个建立分布式应用的平台,使得运行在不同操作系统和不同设备上的软件,或者是用不同的程序语言和不同厂商的软...

  • Web Service的三大技术

    一、Web Service的分类广义的Web Service: REST式Web Service,基于HTTP协议。例如:Ajax的后台部分,就是一种广义上的web service。 RPC式Web Service,一般基于SOAP协议。我们通常所说的Web Service就是这种。 注:RPC(Remote Procedure Call Protocol)——远程过程调用协议。二、SOAP协议

  • Web Services和其他的技术的比较

    XMLHTTP与SOAP:    XML是web serivces的核心基础技术,是SOAP实现的关键所在;而XMLHTTP就是根据XML来设计的。从实现的方式上讲:XMLHTTP是基于浏览器的,只要有IE,就能实现向服务器传递XML字符串,具有很高的通用性。但是浏览器不是用来做XMLHTTP,它是面向大众用户浏览的,如果能用XML完成各种操作,必然会影响到用户。比如以前版本的msxml的对应浏览

  • Webservice工作原理及实例

    Web Service工作原理 一、Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的独立的通讯技术。是:通过SOAP在Web上提供的软件服务,使用WSDL文件进行说明,并通过UDDI进行注册。 XML:(Extensible Markup

  • Web服务技术与应用

    一些基本的Web理论知识适当结合了一些实例。 主要涵盖内容有:HTML+CSS+JSP+JDBC+AJAX+XML+WebService+EJB+Servlet。 Web 概述 Web是Internet上一种应用或者服务,使人们能方便快速的发布和获取信息。Web服务由Web服务器和浏览器共同提供。 Web服务器就是由软件和硬件构成的能提供Web服务(相应用户请求,处理请求并...

  • Web Services 摘要信息

    标准化是制约技术发展的一个重要因素,也是人们在经历了大量的异构、不兼容问题后的深切体会。 目前,EAI是企业进行信息化改造的主要方法。Web Services技术建立在标准性与开放性基础之上。传统的安全认证、访问控制体系结构框架的不一致性使得整个安全认证、访问控制体系的标准化难以得到控制。  服务是封装了一定的业务逻辑的、完成一定功能的处理单元,完整描述服务资源需要的额元信息包括:(1)    物

  • WebService技术详解&CXF

    WebService WebService简介 Web Service技术, 能使得运行在不同机器上的不同应用无须借助附加的、专门的第三方软件或硬件, 就可相互交换数据或集成。依据Web Service规范实施的应用之间, 无论它们所使用的语言、 平台或内部协议是什么, 都可以相互交换数据。 简单的说,WebService就是一种跨编程语言和跨操作系统平台的远程调用技术。所谓跨编程语言和跨操作平台,就是说服务端程序采用java编写,客户端程序则可以采用其他编程语言编写,反之亦然。跨操作系统平台则是指服务端程

  • WCF也可以做聊天程序

    先看一个截图。   上面的图,各位乍一看,可能会觉得是用Socket编写的聊天程序。告诉你吧,这玩意儿不是用Socket实现,呵呵,当然它的底层肯定与Socket有一定关系,我只说我的代码没有用到socket而已。 那么,除了Socket可以用于通信,还有其他技术吗?有啊,首先,如果你足够强大,用HTTP也行,但HTTP初始化的过程貌似比较慢。那么还有吗?当然了,各位还记得.NET以前有

  • Java开发中经常使用到的几种WebService技术实现方案

    Java开发中经常使用到的几种WebService技术实现方案   一、    基于SOAP的WebService解决方案 1 、SOAP协议 简单对象访问协议是交换数据的一种协议规范,是一种轻量的、简单的、基于XML(标准通用标记语言下的一个子集)的协议,它被设计成在WEB上交换结构化的和固化的信息。 2、SOAP与JAX-WS的关系 JAX-WS 是SOAP技术的一个Java实现规

  • webservice技术介绍

    一、WebService到底是什么?    一言以蔽之:WebService是一种跨编程语言和跨操作系统平台的远程调用技术。    所谓跨编程语言和跨操作平台,就是说服务端程序采用java编写,客户端程序则可以采用其他编程语言编写,反之亦然!跨操作系统平台则是指服务端程序和客户端程序可以在不同的操作系统上运行。     所谓远程调用,就是一台计算机a上的一个程序可以调用到另外一台

Global site tag (gtag.js) - Google Analytics