• 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)支持



  • 相关阅读:
    力扣 227 :基本计算器(II)
    力扣 224 :基本计算器(I)
    力扣 888:公平的糖果棒交换(哈希表法)
    力扣 1047 :删除字符串中的所有相邻重复项
    力扣 1423 :可获得的最大点数
    vue+spreadjs+后台Java实现与服务端交互的导入导出
    webpack 中 require.context() 多个模块的加载
    dwd_fact_coupon_use
    dwd_fact_cart_info
    dwd_fact_order_detail
  • 原文地址:https://www.cnblogs.com/slgkaifa/p/6822499.html
Copyright © 2020-2023  润新知