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刷圖實現視頻效果