非常HTML5预览:Video/Canvas/Ext JS

标签: html5 video function h.264 firefox youtube
14271人阅读 评论(22) 收藏 举报
分类:

HTML5, Video, Canvas, and Ext JS

January 14, 2010 by David Davis

HTML5正要来临。本文将会检视一下两个HTML5开发至为引人注目的特性——视频Video及Canvas。Ext的大伙们都迫不及待地赶上新标准,看有什么可以为我们所承诺的。<video>标签是为了原生的视频渲染,这样的话就不用那些第三方的如Flash的插件。至于<canvas>标签,则是为了在像素级别,这么细的一个级别中“画出”复杂的图形图像,而且是一个清晰而强大的API。

作为HTML5的一部分,可以用CSS和JavaScript来自定义元素<video> ,使得我们能够用一种不错的方式对用户收看的视频加以处理。不妨稍微试想一下,我们就可以此为新题材,做出新的组件,例如下面的例子就是,这是个“live video”预览图


以上是Ext JS web desktop的截图,演示了置于Window中的HTML5视频。貌似不太出彩?那就将你鼠标移到任务栏的按钮之上,视频播放器的那个。呵呵,笔者用了标签<canvas>渲染着一个小小的预览图,就是当前视频的直接更新内容。

构建一个HTML5 视频窗体

例子设置过程中,我会告诉阁下怎么将video的元素放置到一个window窗体中去,并且制作quciktip的预览图,几乎都是几行代码足以完成。

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

代码中我登记了扩展的“html5video”,定义新型的xtype,意味着在panel或window就可以直接使用。我们打算在Ext JS web desktop的基础上演示这个html5video,若阁下还不了解web desktop,可参考这里

接下来我们加入html5video到web桌面的window,并加入任务栏按钮的canvas预览(具体是,下载Ext 3.0到服务器上跑,修改examples/desktop的sample.js文件)。

粘贴下面的html5扩展并在sample.js底部加入video window aspp,或者干脆用这份拷贝覆盖之。

现在加入getModules的app构造代码,在sample.js顶部就可以:

如上述代码,我们在src参数中指定了两份文件。这不是播放列表,而是视频格式的兼容列表。因为不是全部的浏览器都支持同一种的视频格式,因此要引入多种兼容格式的代码。

你可以把上面的例子放在Firefox 3.5+、Google Chrome里面跑,选择Start->Video Window。这个例子也可以支持webkit-nightly build (Safari4未正式加入HTML5 Video)。

这里是完成好的例子

降级(Falling back)

降级的意思就是当浏览器不支持HTML5视频标签的时候,有一个平稳下降的机制。HTML5video Ext扩展中就有一个可选的配置项参数,“fallbackHTML”。你可以打开该配置项,进而退一步使用Flash来播放或者向用户提示一下信息。

YouTube和HTML5 (限于webkit所支持)

YouTube的任何视频均有h.264(mp4)格式的输出。所以你把h.264的url直接传送到video标签即可,就是这样简单。不过由于Firefox并不支持h.264只支持OGG Theora的格式源,所以就必须经过转换一下。YouTube HTML5 Viewer就可以将这样YouTube的h.264的视频转换为HTML5的视频标签。

小结

HTML5仍在草案的阶段,不过现代浏览器可不是盖的,在HTML5的视频方面就搞出多少眉目来。尽管解码器还有点状况,但我们总可以用一些工具来解决API问题。

查看评论

Canvas核心技术/JS游戏开发

Canvas是Flash的代替者,是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等,没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。
  • 2018年03月09日 16:34

ExtJS中运用HTML5 Canvas简单例子

在ExtJS的Panel组件上使用HTML5的Canvas对象画图 的简单例子,效果如下: 怎么运行源代码: 新建两个文件,分别命名为mydemo.html, mydemo.js以后,将...
  • jia20003
  • jia20003
  • 2012-04-13 15:00:34
  • 9011

HTML5 video基础知识总结

一、video标签的基本属性1.autoplay=“autoplay”:规定一旦视频就绪马上开始播放2.control=“controls”:让浏览器为视频播放器提供默认的暂停、进度条等控件。如果设置...
  • fareise
  • fareise
  • 2016-09-23 22:01:38
  • 1705

H5 Video截取第一帧 Canvas 动态视频渲染、截取

         由于现在的新媒体技术、资源、客户体验、需求等也越来越广、多、高,作为HTML5中较为重要的 新媒体video视频API,也是用得非常之多。           比如之前有个项目要在微...
  • muguli2008
  • muguli2008
  • 2017-10-30 15:02:34
  • 1893

html5视频截图实现

video body, html { width: 100%; height: 100%; ...
  • u011500781
  • u011500781
  • 2016-08-20 18:28:59
  • 3234

用html5 canvas js 实现图片大小的压缩显示,图片上传后可在线预览。

网上查找了好多上传图片的代码,不过bug太多,还不如自己写一个。 首先创建一个html文件 代码如下: 图片压缩--canvas 选择 canvas: ...
  • shitou20160901
  • shitou20160901
  • 2016-09-06 19:33:53
  • 2812

canvas与html5实现视频截图功能

这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,...
  • hzbje7XSXP
  • hzbje7XSXP
  • 2017-03-02 23:22:34
  • 379

HTML5 在cad领域中的研究

1、html5简介 优点:跨平台,支持各种浏览器(activex只有极少数浏览器支持),下一代html协议。 缺点:目前仅支持二维。 AutoCAD的网页cadactivex版本将会下架,被其他版本取...
  • pppaass
  • pppaass
  • 2015-07-06 16:03:35
  • 2994

JS工具库封装:Video转换成Canvas

在PC端,IE9+浏览器对原生视频的支持还是很不错的,然而一到了移动端就会各种兼容性的坑爹问题。在移动端,各大浏览器厂商对视频会植入许多他们自定义的交互方式(如默认全屏播放、视频不能初始化播放、窗口置...
  • u011200023
  • u011200023
  • 2017-06-26 11:19:49
  • 703

html5+exif.js+canvas实现手机端照片上传预览、压缩、旋转功能

html5+exif.js+canvas实现手机端照片上传预览、压缩、旋转功能 图片上传 上传图片: ...
  • linlzk
  • linlzk
  • 2015-09-22 15:34:09
  • 17376
    个人资料
    持之以恒
    等级:
    访问量: 205万+
    积分: 2万+
    排名: 510
    我的开源项目
    最新评论