js视频html代码,html+JS刷图实现视频效果(示例代码)

网页播放视频须要载入播放器，可是通过刷图也能实现视频播放的效果

JS中用到Z-index属性，记录一篇解说Z-index属性的博客的地址：

http://www.cnblogs.com/gisdream/archive/2010/06/10/1755891.html

方法1：

JS的代码

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();

}

html 的body

//网页载入完毕后開始调用createImageLayer()函数

方法一大概的工作原理就是Web前端向服务GET一张图片，server给Web前端

发一张图片，循环获取并显示实现刷图，现有大多数流浪器都支持此方法

方法2：

html 的body

方法二不须要JS，简单的使用html载入server端的一张图片就可以，方法尽管简单，可是大多数

浏览器不支持。临时仅仅发现火狐(Mozilla Firefox)支持