zoukankan      html  css  js  c++  java
  • 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)支持



  • 相关阅读:
    大端序与小端序
    中断分类
    PHP开发框架[国内框架]
    PHP开发框架[流行度排名]
    ecshop 后台分页功能
    Windows下phpStudy中的Apache无法启动的排查方法
    Windows里配置Apache2.2+PHP5.3+mod_fcgid运行高效的FastCGI模式
    Apache多虚拟主机多版本PHP(5.2+5.3+5.4)共存运行配置全过程
    让 Node.js 支持 ES6 的语法
    微信小程序请求wx.request数据,渲染到页面
  • 原文地址:https://www.cnblogs.com/slgkaifa/p/6822499.html
Copyright © 2011-2022 走看看