效果很震撼!有电影院的感觉了。呵呵。

看了下代码,依然是 在一个canvas里嵌入<video>然后getImageData

点击这里查看效果

代码:

var canvas = document.createElement('canvas'), 

video = document.getElementsByTagName('video')[0],
ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, video.width, video.height);
var block_width = 50;
var pixels = ctx.getImageData(0, 0, block_width, canvas.height);
//http://www.cnblogs.com/roucheng/

很震撼的HTML5视频播放器,电影院的感觉的更多相关文章

  1. 7款很棒的 HTML5 视频播放器

    做个连接:http://www.cnblogs.com/lhb25/archive/2011/06/27/7-great-html-5-video-player-scripts.html

  2. 打造自己的html5视频播放器

    前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签 ...

  3. jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器

    最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...

  4. html5视频播放器 二 (功能实现及播放优化)

    样式改写css,其中的一些按钮是在“阿里妈妈”上找的字体图标,就不向上传了. /* *CoolPlay视频播放器 * 2016年8月1日 * 627314658@qq.com * */ @font-f ...

  5. html5视频播放器 一 (改写默认样式)

    一个项目用到了html5视频播放器,于是就写了一个,走了很多坑,例如在chrome中加载视频出现加载异常等 先看看效果 是不是感觉换不错,以下是我播放器改写样式的布局. <!DOCTYPE ht ...

  6. 一个很好的开源视频播放器GiraffePlayer2(支持rtmp,rtsp,http,https)

    一个很好的开源视频播放器GiraffePlayer2(支持rtmp,rtsp,http,https) https://github.com/tcking/GiraffePlayer2 GiraffeP ...

  7. Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放

    一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...

  8. video.js html5 视频播放器

    我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...

  9. 一个html5视频播放器

    具有播放视频,拖拽,自定义右键菜单,上传头像的功能 <!DOCTYPE html><html lang="en"> <head> <met ...

随机推荐

  1. 直接使用提交过来的类来更新字段EntityState.Modified并过滤null值的方法

    public T Update<T>(T entity) where T : ModelBase { var set = this.Set<T>(); set.Attach(e ...

  2. NetMQ发布订阅C#示例

    NetMQ (ZeroMQ to .Net),ØMQ号称史上最快中间件.它对socket通信进行了封装,使得我们不需要写socket函数调用就能完成复杂的网络通信.和一般意义上的消息队列产品不同的是, ...

  3. 简明易懂的call apply

    在iteye看到一篇对call解释得相当简明易懂,觉得得宣传一下 : http://uule.iteye.com/blog/1158829 一.方法的定义 call方法: 语法:call([thisO ...

  4. INSTALL MYSQL IN MAC

    安装好MYSQL后,在System References中找到MYSQL,启动它. 启动之后在终端中输入添加MySQL路径的命令,把MYSQL路径添加到PATH中: PATH="$PATH& ...

  5. 【Cocos2d-Js基础教学(5)资源打包工具的使用及资源的异步加载处理】

    TexturePacker是纹理资源打包工具,支持Cocos2dx的游戏资源打包. 如果用过的同学可以直接看下面的资源的异步加载处理 首先为什么用TexturePacker? 1,节省图片资源实际大小 ...

  6. iOS WKWebView详解

    UIWebView就不用说了,这个过时了,现在iOS8以后建议都使用WKWebView. WKWebView 是现代 WebKit API 在 iOS 8 和 OS X Yosemite 应用中的核心 ...

  7. volley二次封装

    产品中使用Volley框架已有多时,本身已有良好封装的Volley确实给程序开发带来了很多便利与快捷.但随着产品功能的不断增加,服务器接口的不断复杂化,直接使用Volley原生的JSONObjectR ...

  8. IE11 Enterprise Mode

    对IE11引入的Enterprise Mode进行了一些总结,对查阅的一些参考资料直接引用了英文,需要注意的地方用中文进行了一些注解.供大家参考. 1. The purpose of introduc ...

  9. nginx 安装与反向代理测试 under MAC

    安装 在 Mac 下可以直接使用 homebrew 安装 nginx brew search nginx brew install nginx 启动 nginx: sudo nginx,访问 8080 ...

  10. Etl之HiveSql调优(left join where的位置)

    一.前言 公司实用Hadoop构建数据仓库,期间不可避免的实用HiveSql,在Etl过程中,速度成了避无可避的问题.本人有过几个数据表关联跑1个小时的经历,你可能觉得无所谓,可是多次Etl就要多个小 ...