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



  • 相关阅读:
    C# 收集几条ToString()格式
    C# 使用Quartz简单实例以及备忘
    C# Linq 常用查询操作符
    .Net Core 创建和使用中间件
    .Net Core 学习依赖注入自定义Service
    .Net Core 学习路由和请求参数传递
    .Net Core 学习新建Core MVC 项目
    ExtJS笔记5 Components
    ExtJS笔记4 容器与布局(Layouts and Containers)
    ExtJS笔记3 MVC Architecture
  • 原文地址:https://www.cnblogs.com/slgkaifa/p/6822499.html
Copyright © 2011-2022 走看看