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)支持
html+JS刷图实现视频效果的更多相关文章
- [Js]焦点图轮播效果
一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class=&q ...
- JS、JQ实现焦点图轮播效果
JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...
- 用js刷题的一些坑
leecode可以用js刷题了,我大js越来越被认可了是吧.但是刷题中会因为忽略js的一些特性掉入坑里.我这里总结一下我掉过的坑. 坑1:js中数组对象是引用对象 js中除了object还有数组对象也 ...
- JS前端图形化插件之利器Gojs组件(php中文网)
JS前端图形化插件之利器Gojs组件(php中文网) 一.总结 一句话总结:php中文网我可以好好走一波 二.JS前端图形化插件之利器Gojs组件 参考: JS前端图形化插件之利器Gojs组件-js教 ...
- 用最简单的代码写出banner图轮播效果
以下视频是由[赵一鸣随笔]博客提供的“用最简单的代码写出banner图轮播效果”. 查看全屏高清视频,请点击链接:http://www.zymseo.com/58.html
- js 实现图片瀑布流效果,可更改配置参数 带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...
- js正则表达式图形化工具-rline
github地址:https://github.com/finance-sh/rline 在线demo: http://lihuazhai.com/demo/test.html 这是一个js正则表达式 ...
- Rainyday.js – 使用 JavaScript 实现雨滴效果
Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...
- 用js枚举实现简易菜单效果
用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...
随机推荐
- Spfa【p3385】【模板】负环(spfa)
顾z 你没有发现两个字里的blog都不一样嘛 qwq 题目描述 毒瘤数据要求判负环 分析: 还是融合了不少题解的思想的. 负环定义: 权值和为负的环 //在网络上并没有找到一个官方定义,暂且这么理解. ...
- 分层图【p4568】 [JLOI2011]飞行路线
Description Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在nn个城市设有业务,设这些城市分别标记为\(0\)到\(n−1\),一共有\(m\)种航线 ...
- Jboss ESB简介及开发实例
一.Jboss ESB的简介 1. 什么是ESB. ESB的全称是Enterprise Service Bus,即企业服务总线.ESB是过去消息中间件的发展,ESB采用了“总线”这样一 ...
- Oracle多用户对一个表进行并发插入数据行操作
oracle数据库支持多用户间同时对同一个表进行操作,但是数据不一定同步,因为oracle数据库是支持脏数据的,比如A用户删除了表的数据但没有提交,B用户也能查询访问到,如果要避免这种情况只能加锁,A ...
- Eclipse常用小知识汇总
原文:http://blog.csdn.net/jinzhencs/article/details/50462370 1.修改注释 自动出来的author
- thinkphp中JS文件不能写__ROOT__变量
如题 ,如果写了,就不能正确读取JS中的URL,
- Java:集合类的区别详解
Java中集合类的区别 Array是数组,不在集合框架范畴之内,一旦选定了,它的容量大小就不能改变了,所以通常在编程中不选用数组来存放. 集合 : 集合对象:用于管理其他若干对象的对象 数组:长度不可 ...
- selenium的PageObject设计模式
PageObject设计模式1. Web自动化测试框架(WebTestFramework)是基于Selenium框架且采用PageObject设计模式进行二次开发形成的框架. 2. web测试时,建议 ...
- NetBean 远程开发的好文1 --> NetBeans的远程Linux C开发实践
from: http://blog.csdn.net/jacktan/article/details/9268535 一直以来总觉得NetBeans生活在Eclipse的阴影下,同样做为一款不错的基 ...
- 12. 改变JDK编译版本【从零开始学Spring Boot】
spring Boot在编译的时候,是有默认JDK版本的,如果我们期望使用我们要的JDK版本的话,那么要怎么配置呢? 这个只需要修改pom.xml文件的<build>-- <plug ...