<!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. fiddler--配置火狐代理配置代理

    fiddler安装 下载fiddler最新版: 默认安装: 配置火狐代理配置代理 打开fiddler 按图操作,复制选中的链接:fiddler -> tool ->connections ...

  2. 安全测试1_Web知识简介

    接下去所有的安全测试都是本人学习安全测试的过程,随笔中会截取云课堂视频中的图片(比较生动和形象,便于理解),主要目的是方便自己以后复习和巩固! 1.Web发展阶段概述: 2.web安全我能提发展形势: ...

  3. datetime模块的简单用法

    import datetime print(datetime.datetime.today()) #2018-08-14 14:18:28.575412 print(datetime.date.tod ...

  4. ORACLE ROWNUM解析[转]

    一.对rownum的说明 关于Oracle 的 rownum 问题,很多资料都说不支持SQL语句中的“>.>=.=.between...and”运算符,只能用如下运算符号“<.< ...

  5. 框架： require.js

    require.js http://www.bootcdn.cn/require.js/ HTML: <div class="container" data-page=&qu ...

  6. Android开发中常见的设计模式（一）——单例模式

    首先了解一些单例模式的概念. 确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 这样做有以下几个优点 对于那些比较耗内存的类,只实例化一次可以大大提高性能,尤其是在移动开发中. 保持 ...

  7. Flex下打开新窗口链接

    <s:Button label="关闭推送" click="ExternalInterface.call('window.open','http://127.0.0 ...

  8. ubuntu下如何配置terminator(以16.04为例)（转载）

    https://blog.csdn.net/xungjhj/article/details/69377812 Terminator 常用快捷键 命令 说明 Ctrl+Shift+O 水平分割窗口 Ct ...

  9. 中国大学mooc直播回放看这里哦http://www.icourse163.org/forum/1001974001/topic-1003372881.htm?sortType=1&pageIndex=1

    中国大学mooc直播回放看这里哦http://www.icourse163.org/forum/1001974001/topic-1003372881.htm?sortType=1&pageI ...

  10. java对象比较==和equals的区别

    转载:http://blog.csdn.net/bluesky_usc/article/details/51849125 1值比较 即内容相同,我们就认为是相等的.比如:int i=5:int j = ...