1. 程式人生 > >html+JS刷圖實現視頻效果

html+JS刷圖實現視頻效果

java scrip snap hive image com htm load() logs

網頁播放視頻須要載入播放器,可是通過刷圖也能實現視頻播放的效果

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