html+JS刷图实现视频效果
网页播放视频须要载入播放器,可是通过刷图也能实现视频播放的效果
JS中用到Z-index属性,记录一篇解说Z-index属性的博客的地址:
http://www.cnblogs.com/gisdream/archive/2010/06/10/1755891.html
方法1:
JS的代码
<script type="text/javascript">
var imageNr = 0;
var finished = new Array();
function createImageLayer() {
var img = new Image();
img.style.position = "absolute";
img.style.zIndex = 0;
img.onload = imageOnload;
img.width = 480;
img.height = 320;
img.src = "/?
action=snapshot&n=" + (++imageNr);
var webcam = document.getElementById("webcam");
webcam.insertBefore(img, webcam.firstChild);
}
function imageOnload() {
this.style.zIndex = imageNr;
while (1 < finished.length) {
var del = finished.shift();
del.parentNode.removeChild(del);
}
finished.push(this);
createImageLayer();
}
</script>
html 的body
//网页载入完毕后開始调用createImageLayer()函数
<body onload="createImageLayer();" >
<div id="webcam" style="width:480px; height:320px;"></div>
方法一大概的工作原理就是Web前端向服务GET一张图片,server给Web前端
发一张图片,循环获取并显示实现刷图,现有大多数流浪器都支持此方法
方法2:
html 的body
<img src="/?action=snapshot" width="480px" height="320px" />
方法二不须要JS,简单的使用html载入server端的一张图片就可以,方法尽管简单,可是大多数
浏览器不支持。临时仅仅发现火狐(Mozilla Firefox)支持
最新文章
- openMP的一点使用经验【非原创】
- 在VS2010中ActiveX控件注册方法,使用regsvr32命令
- java中volatile关键字的含义 (转载)
- U3D 脚本添加和获得对象
- iOS判断并使用百度地图 高德地图 导航 (使用URI,不集成sdk)
- 接收Dialog的值
- 我的Android学习之旅(转)
- FileSystemXmlApplicationContext、ClassPathXmlApplicationContext和XmlWebApplicationContext简介
- SQL Server 服务器主体拥有一个或多个端点无法删除;错误15141
- [CQOI2013]棋盘游戏
- Django学习笔记(1)——初识Django
- 博客三--tensorflow的队列及线程基本操作
- C语言复习:结构体
- 算法学习之冒泡排序的C实现
- 在本地设置 http-proxy 代理 (前后端分离)
- nfs的无敌时间更改的配置参数
- leetcode 20 Valid Parentheses 有效的括号
- SpringMVC拦截器的实现单方登陆
- bzoj 2434 AC自动机+树状数组
- PatternLayoutEncoder 输出格式
热门文章
- POJ 2337 Catenyms (欧拉图)
- Python的程序结构[8] ->; 装饰器/Decorator ->; 装饰器浅析
- DB2如何调整表空间大小
- [TopCoder8600]MagicFingerprint
- 如何避免CSS :before、:after 中文乱码
- Delphi ParamStr 使用方法
- kubernetes社区项目生态概览
- [置顶]
 kubernetes资源类型--RC和RS
- iOS:UICollectionView纯自定义的布局:堆叠式布局、圆式布局 (一般用来制作相册)
- 【共享单车】—— React后台管理系统开发手记:AntD Form基础组件