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="480px; height:320px;"></div>

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

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


方法2:

html 的body

<img src="/?action=snapshot" width="480px" height="320px" />

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

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



原文地址:https://www.cnblogs.com/slgkaifa/p/6822499.html