网页播放视频须要载入播放器，可是通过刷图也能实现视频播放的效果

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刷图实现视频效果的更多相关文章

  1. [Js]焦点图轮播效果

    一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class=&q ...

  2. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

  3. 用js刷题的一些坑

    leecode可以用js刷题了,我大js越来越被认可了是吧.但是刷题中会因为忽略js的一些特性掉入坑里.我这里总结一下我掉过的坑. 坑1:js中数组对象是引用对象 js中除了object还有数组对象也 ...

  4. JS前端图形化插件之利器Gojs组件（php中文网）

    JS前端图形化插件之利器Gojs组件(php中文网) 一.总结 一句话总结:php中文网我可以好好走一波 二.JS前端图形化插件之利器Gojs组件 参考: JS前端图形化插件之利器Gojs组件-js教 ...

  5. 用最简单的代码写出banner图轮播效果

    以下视频是由[赵一鸣随笔]博客提供的“用最简单的代码写出banner图轮播效果”. 查看全屏高清视频,请点击链接:http://www.zymseo.com/58.html

  6. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  7. js正则表达式图形化工具-rline

    github地址:https://github.com/finance-sh/rline 在线demo: http://lihuazhai.com/demo/test.html 这是一个js正则表达式 ...

  8. Rainyday.js – 使用 JavaScript 实现雨滴效果

    Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...

  9. 用js枚举实现简易菜单效果

    用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...

随机推荐

  1. Python的网络编程[1] -> FTP 协议[1] -> 使用 pyftplib 建立 FTP 服务器

    使用 pyftplib 建立 FTP 服务器 pyftplib 主要用于建立 FTP Server,与 ftplib 建立的 Client 进行通信. 快速导航 1. 模块信息 2. 建立 FTP 服 ...

  2. Tarjan缩点【p4819】[中山市选]杀人游戏

    Description 一位冷血的杀手潜入Na-wiat,并假装成平民.警察希望能在\(N\)个人里面,查出谁是杀手.警察能够对每一个人进行查证,假如查证的对象是平民,他会告诉警察,他认识的人,谁是杀 ...

  3. Binary Tree Maximum Path Sum - LeetCode

    Given a binary tree, find the maximum path sum. For this problem, a path is defined as any sequence ...

  4. Stage3D 中的PerspectiveMatrix3D

    PerspectiveMatrix3D继承自Matrix3D.表示投影矩阵的功能类. 公式:用4X4矩阵向z=d的平面投影 public function perspectiveFieldOfView ...

  5. 【分享】· 图床&在线分享演示文稿

    关于图床 什么是图床? 这并不是一个多么高大上的名词概念!用比较通俗的话来说,当你在撰写新文章时,你需要去插入图片以使得你的文章内容更加直观.易懂,这个时候有以下几种办法: 在博客根目录的 sourc ...

  6. JDBC_PreparedStatement 防sql注入

    package songyan.jdbc.login.prepared; import java.sql.Connection; import java.sql.DriverManager; impo ...

  7. 集合框架（04）HashMap

    集合Map的简单方法:该集合存储键值对,一对一对往里面存,而且要保证健的唯一性 1.添加 put(K key,V value) putAll(Map<? Extends k, ? extends ...

  8. Ubuntu 16.04将ISO镜像写入U盘

    sudo fdisk -l 查看U盘的路径,如/dev/sdc为U盘的位置,注意位置!注意这个不是挂载的位置. 然后准备好ISO文件,如放在/home/jim/abc.iso 然后输入 sudo dd ...

  9. jQuery插件开发 总结

    一般来说,jQuery插件的开发分为两种:一种是挂在jQuery命名空间下的全局函数,也可称为静态方法:另一种是jQuery对象级别的方法,即挂在jQuery原型下的方法,这样通过选择器获取的jQue ...

  10. md5是哈希算法的改进加强，因为不同原始值可能hash结果一样，但md5则改善了用于验证消息完整性，不同md5值原始值也必将不一样

    md5是哈希算法的改进加强,因为不同原始值可能hash结果一样,但md5则改善了用于验证消息完整性,不同md5值原始值也必将不一样