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 >

<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)支持

时间: 2024-10-16 23:03:10

html+JS刷图实现视频效果的相关文章

用js刷题的一些坑

leecode可以用js刷题了,我大js越来越被认可了是吧.但是刷题中会因为忽略js的一些特性掉入坑里.我这里总结一下我掉过的坑. 坑1:js中数组对象是引用对象 js中除了object还有数组对象也是引用对象,这点常常被忽视,所以在递归的时候传递数组要用arr.slice(0)这样复制一个一样的新数组,不然会出现你传入的数组会被同级的递归改变,结果就不对了. 所以只要数组复制的地方最好都要这么写,除非你真的想引用.而且注意是slice不是splice这两个方法差别很大,你如果用splice(0

精品jquery多图层叠展示效果

精品jquery多图层叠展示效果jquery多图层叠展示效果,使用css和js完成,图片叠加效果,可点击上一张和下一张完成图片的切换特效,图片切换效果也非常的棒 先上图: 精品jquery多图层叠展示效果,布布扣,bubuko.com

原生js重写《锋利的JS》之 轮播效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

.Net中使用response.write(&#39;js代码&#39;)后css失去效果,解决办法。

net中使用response.write输出js会将js放在源代码的最前面,这样就可能出现破坏网页css的效果,让css失去效果 .net中使用Page.ClientScript.RegisterStartupScript(this.GetType(), "", " <script lanuage=javascript>if(confirm('确定要交卷吗?')==false){history.back()}; </script>"); 可以

js实现的数字四舍五入效果代码实例

js实现的数字四舍五入效果代码实例:下面直接给出能够截取指定位数字符串,且具有四舍五入效果的代码: var num=3.1415926; console.log(num.toFixed(3)); toFixed()函数可以参阅javascript的Number对象的toFixed()方法一章节. 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11973 更多内容可以参阅:http://www.softwhy.com/javas

js实现的div拖动效果实例代码

js实现的div拖动效果实例代码:div的拖动效果在很多效果中都有应用,当然还有很多附加的功能,本章节只是给拖动效果,并介绍一下它的实现过程.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

HighCharts绘制JS折线图(后台传数据给前台基于JFinal框架)

/*****************************Controller(基于JFinal框架)**************/ package com.zzu.controller;import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.List;import org.jfree.chart.ChartFactory;import org.jfree.chart.ChartUtilitie

习题:刷图(01背包)

洛谷2297 题目描述 Loidc是一个勤奋的孩子. 他每天都会勤奋的搬砖刷疲劳,每天都会期待着各种BOSS给他爆点什么神奇的东西(例如魔剑..),但是每次刷远古总会坑到连门票钱也赚不回来. 最近loidc新技能get√ 他每天都会朗诵一遍线段树,将自己升级为"Deep Dark Fantasy"模式(其实是每天去给腾讯爹送钱)下才去搬砖,所以他人品次次爆发,每次刷图后腾讯都会象征性给他爆点好东西. 今天他又来刷一个叫做"痛苦之村列瑟芬"的图,每次刷完图后都会有N个

实用js+css多级树形展开效果导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ