<!DOCTYPE html>
<html>
<head>
   <title>Operation Aborted Example</title>
    <style>
        body{
            margin: 0;
        }
        #video{
            position:fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -1;
            -webkit-filter:grayscale(100%);
        }
    </style>
</head>
<body>

<div id="div">
    <video id="video" muted src="VID.mp4" autoplay loop>您的浏览器不支持\&lt; video&gt;元素</video>
</div>

<<script>
    var video= document.getElementById('video');
    video.playbackRate = 0.5;
</script>

</body>
</html>

HTML5将<video>视频设置为页面动态背景的更多相关文章

  1. 【HTML5】video视频

    当前,video 元素支持三种视频格式: 格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5 ...

  2. html5开发<video>视频字幕的程序

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8 ...

  3. HTML5添加 video 视频标签后仍然无法播放的解决方法 IIS添加MIEI类型

    现象:插入如下代码后仍然无法看视频(注:视频已确认为浏览器支持格式) <video controls="controls" width="500px" h ...

  4. HTML5 Video(视频)

    HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...

  5. html5 音频和视频（audio And video）

    1.音频和视频  Web 上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定 ...

  6. HTML5: HTML5 Video(视频)

    ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...

  7. js控制html5 【video】标签中视频的播放和停止

    需求:页面中有2个普通按钮a,b.还有一个video标签,能成功播放出视频..我想要的效果是,点击a按钮,视频开始播放,点击b按钮,视频播放停止!!!<br><br>----- ...

  8. 在使用html5的video标签播放视频时为何只有声音却没有图像

    在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...

  9. The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

    http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...

随机推荐

  1. python return 返回多个值

    python return 返回多个值,实际返回的是一个tuple: #!/usr/bin/env python # -*- coding: utf-8 -*- def rt(): return 1, ...

  2. 2-Zookeeper、HA安装

    1.Zookeeper安装 1.解压 zookeeper 到安装目录中/opt/app/zookeeper 中. 2.在安装目录下创建data和logs两个目录用于存储数据和日志: cd /opt/a ...

  3. mac上使用jmeter录制web项目和手机app

    前言: 最近熟悉jmeter进行带宽测试和并发测试,发现网上大多都是windows版本,自己用的mac,实验后发现大同小异 1.下载,我使用的jmeter3.2的版本,可以在网上下载,不区分mac版和 ...

  4. Windows下python库的常用安装方法

    目录:       1.pip安装(需要pip)       2.通过下载whl文件安装(需要pip)       3.在pythn官网下载安装包安装(不需要pip)   方法一:pip安装. 这是最 ...

  5. pycharm 使用print不打印结果问题解决

    参考 http://blog.csdn.net/olfisher/article/details/52486368 参考2 http://www.imooc.com/qadetail/122734 问 ...

  6. 转载：Bootstrap 源码解析

    Bootstrap 源码解析 前言 Bootstrap 是个CSS库,简单,高效.很多都可以忘记了再去网站查.但是有一些核心的东西需要弄懂.个人认为弄懂了这些应该就算是会了.源码看一波. 栅格系统 所 ...

  7. scrapy中deferred的回调

    def _next_request_from_scheduler(self, spider):#在引擎中处理一个请求 slot = self.slot request = slot.scheduler ...

  8. 怎样消除adobe flash player设置

    在有FLASH画面上,点右键选下面的设置,出现设置框去掉打上钩的即可. 如果flash player插件安装好后,视频仍无法播放,则进行以下操作:打开“我的电脑”——>“本地磁盘(C)” ——& ...

  9. Mybatis的回顾学习

    <!--id:statementId resultType:查询结果集的数据类型 parameterType:查询的入参 --> <selectid="getUserByI ...

  10. shell执行class或jar

    mc11>java -cp /home/ap/user/webproject/web.war/WEB-INF/lib/*:. com.userpackage.ExcelDemo 说明:/home ...