html+JS刷图实现视频效果
Posted slgkaifa
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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刷图实现视频效果的主要内容，如果未能解决你的问题，请参考以下文章