阅读更多

6顶
0踩

Web前端

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

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

 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 Service:架构、标准与技术

    本文还有配套的精品资源,点击获取 简介:Web服务是基于互联网的应用程序接口,允许不同应用程序间通信和数据交换,促进分布式系统集成。本章节深入讲解Web服务的核心概念、架构和技术,特别是Service-Oriented Architecture(SOA)的设计原则。内容涵盖Web服务的关键标准如WSDL、UDDI、SOAP、XML和相关安全协议,以及Web服务的实现技术如J...

  • WebService简介

    Webservice(就是一种远程调用技术,他的作用就是从远程系统中获取业务数据) Web Services 是应用程序组件 Web Services 使用开放协议进行通信 Web Services 是独立的(self-contained)并可自我描述 Web Services 可通过使用UDDI来发现 Web Services 可被其他应用程序使用 webservice 常见名词: ...

  • Web服务(Web Service)

    Web服务(Web Service)

  • WebService详解

    WebService 是一种跨编程语言和跨操作系统平台的远程调用技术。所谓跨编程语言和跨操作平台,就是说服务端程序采用 java 编写,客户端程序则可以采用其他编程语言编写,反之亦然!跨操作系统平台则是指服务端程序和客户端程序可以在不同的操作系统上WebService 是一种标准化的网络服务,允许不同平台和应用程序之间通过网络进行通信。它使得不同语言和平台的应用能够互操作。以下是 WebService 的详细介绍,包括基本概念、类型、工作原理以及应用场景。

  • 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服务(相应用户请求,处理请求并...

  • WCF也可以做聊天程序

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

Global site tag (gtag.js) - Google Analytics