关于网页动态背景的设置

我想用一个mp4视频做背景,该怎么设置,希望给我一些代码最好告诉我一下原理,急求谢谢各位哥哥了

9个回答

这是我写的代码
这是css设置
这是显示的样子
求大神待我完成这个功能求!!!!

把视频fixed定位,长宽都是100%,loop就好

buquan4041
Leslie丶 没用的。还是没有重叠在一起
大约 3 年之前 回复
 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
    $(function(){
        $('video').attr({'width':window.innerWidth,'height':window.innerHeight})
        $(window).resize(function(){
            $('video').attr({'width':window.innerWidth,'height':window.innerHeight})
        })

    })
</script>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
video{
    position: fixed;
    top:0px;
    left: 0px;
}
</style>
    <body>
    <video  loop="loop" autoplay="autoplay">
        <source src="myvideo.mp4" type="video/mp4"></source>
        <source src="myvideo.ogv" type="video/ogg"></source>
        <source src="myvideo.webm" type="video/webm"></source>
        <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
            <param name="movie" value="myvideo.swf" />
            <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
        </object>
        当前浏览器不支持 video直接播放,点击这里下载视频: <a href="myvideo.webm">下载视频</a>
    </video>
    </body>
</html>

buquan4041
Leslie丶 我设置了全屏也显示了全屏为什么一插表格就不行了呢,我想要一个登陆界面把表格放在动态背景的上面,它们必须是重合的
大约 3 年之前 回复

<!DOCTYPE HTML>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="zh"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="zh"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="zh"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="zh">  <!--<![endif]-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5全屏背景视频jQuery插件效果演示_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
    <meta name="keywords" content="html5视频,背景视频,视频,jquery,html5,全屏背景视频,视频播放" />
    <meta name="description" content="HTML5全屏背景视频jQuery插件效果演示。" />
    <link rel="shortcut icon" href="http://www.htmleaf.com/favicon.ico">
    <link rel="apple-touch-icon" href="http://www.htmleaf.com/templets/default/images/ico/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="http://www.htmleaf.com/templets/default/images/ico/apple-touch-icon-72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="http://www.htmleaf.com/templets/default/images/ico/apple-touch-icon-114.png">
    <link rel="apple-touch-icon" sizes="144x144" href="http://www.htmleaf.com/templets/default/images/ico/apple-touch-icon-144.png">
    <link rel="stylesheet" type="text/css" href="http://www.htmleaf.com/templets/default/css/htmleaf-demo.min.css" />
    <!--[if lt IE 9]>
      <script src="http://www.htmleaf.com/assets/js/html5shiv.min.js"></script>
      <script src="http://www.htmleaf.com/assets/js/respond.min.js"></script>
        <![endif]-->
</head>
<body>
    <div class="htmleaf-container">
        <div class="htmleaf-container--header">
            <div class="logo">
                <a href="http://www.htmleaf.com/"><img src="http://www.htmleaf.com/templets/default/images/logo.svg" alt="jQuery之家"></a>
            </div>
            <h1>HTML5全屏背景视频jQuery插件效果演示</h1>
            <div class="responsive">
                    <a href="#" class="desktop active" title="在桌面浏览器中预览"></a> 
                    <a href="#" class="tabletlandscape" title="平板Landscape模式 (1024x768)"></a> 
                    <a href="#" class="tabletportrait" title="平板Portrait模式 (768x1024)"></a> 
                    <a href="#" class="mobilelandscape" title="移动手机Landscape模式 (480x320)"></a>
                    <a href="#" class="mobileportrait" title="移动手机Portrait模式 (320x480)"></a>
                </div>
            <div class="actions">
                  <div class="action">
                    <a href="http://www.htmleaf.com/html5/yinpinheshipin/201511012731.html" class="button button--empty" title="返回下载页"><i class="fa fa-leaf"></i></a>
                  </div>
                </div>
        </div>
        <div class="htmleaf--main">
            <div class="htmleaf-container--side">
                <!--广告位-->
                <div class="htmleaf-adv">
                    <h2 class="title">广告</h2>
                    <div>
                        <script type="text/javascript">
                            /*200*200*/
                            var cpro_id = "u2034900";
                        </script>
                        <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
                    </div>
                </div>
                <!--相关插件-->
                <div class="htmleaf-related">
                    <h2>相关插件</h2>
                      <a href="http://www.htmleaf.com/html5/yinpinheshipin/201505261910.html">
  <img src="http://img.htmleaf.com/1505/201505261751.jpg" width="300" alt="基于JSON数据HTML5视频播放器js插件"/>
  <h3>基于JSON数据HTML5视频播放器js插件</h3>
</a>
<a href="http://www.htmleaf.com/html5/html5donghua/20141208711.html">
  <img src="http://img.htmleaf.com/1412/201412081508.jpg" width="300" alt="html5和css3实用Mobile手机app功能视频展示插件"/>
  <h3>html5和css3实用Mobile手机app功能视频展示插件</h3>
</a>
                </div>
            </div>
            <div class="htmleaf-container--content">
                <iframe src="http://demo.htmleaf.com/1511/201511011616/index.html" id="iframe" ></iframe>
            </div>
        </div>
    </div>
    <script src="http://www.htmleaf.com/templets/default/js/htmleaf-demo.min.js"></script>
    <script type="text/javascript">
        IS_IPAD=navigator.userAgent.match(/iPad/i)!=null;
        var t={desktop:"100%",tabletlandscape:1040,tabletportrait:788,mobilelandscape:480,mobileportrait:340,placebo:0};
        jQuery(".responsive a").on("click",function(){
        var e=jQuery(this);
        for(device in t){
            if(e.hasClass(device)){
                clicked=device;
                jQuery("#iframe").width(t[device]);
                if(clicked==device){
                    jQuery(".responsive a").removeClass("active");
                    e.addClass("active")}}}
        return false});
        if(IS_IPAD){
            $("#iframe").css("padding-bottom","60px")
        }
    </script>
    <script type="text/javascript">
        $(".htmleaf-container--side").mCustomScrollbar({
            theme:"minimal"
        });
    </script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fe7a3e6b56f1bd183761873eec17147ca' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>
buquan4041
Leslie丶 不用js插件只用css和html能实现吗
大约 3 年之前 回复
buquan4041
Leslie丶 这个插件不错,不过我在想如果只用css和html运用分层能不能实现,
大约 3 年之前 回复

截一个GIF的图作为背景吧,那样的话就没问题,video现在没材料我也试不了

buquan4041
Leslie丶 已经搞定js和css全部实现
大约 3 年之前 回复

video直接放body里面,设置html,body和video都是width/height 100%全屏。

然后登陆界面的table放在一个absolute定位的层上上面即可。top/left为50%,margin-left:-(层宽度/2)px,margin-top:-(层高度/2)px实现水平垂直居中

buquan4041
Leslie丶 好的谢谢老哥,我用js做的,你说我我试了一下还是很不错的就是现在的问题是js放太多好像网页很卡,由优化办法吗
大约 3 年之前 回复

直接插入视频的话就引用上面两位的方法,如果是直接htm了写的话要用

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
网页动态连线背景
github开源地址:https://github.com/hustcc/canvas-nest.js 使用简单,效果不错,感兴趣可以尝试一下。 使用示例如下: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;示例_no...
如何设置动态背景?
在MFC中如何实现将一幅gif图片(动态)设置为一个对话框的背景?
动态设置ListActivity的背景
private void onSetBackGround() { // 获取当前的layout mRootView = ((ViewGroup)findViewById(android.R.id.content)).getChildAt(0); if (mRootView != null) { debugout("mRootView != 0",
网页的背景设置
网页的背景设置   &amp;lt;body background=背景图片地址 bgproperties=背景 属性&amp;gt;&amp;lt;/body&amp;gt;bgproperties可取fixed,即背景图片固定。默认情况 为空值。即背景图片不固定。如:&amp;lt;body background=  http://user.qzone.qq.com/672078076/photo/ac6a3b4e-a...
如何动态的设置MDIForm的背景?
如何动态的设置MDIForm的背景,就象更改系统背景一样。
Hexo之静态+动态背景设置
写在前面  实现背景图更换及平铺,以及引入动态背景(可交互)
jQuery动态背景设置Backstretch.zip
Backstretch 是一个简单的 jQuery 插件用来设置动态大小的背景图片到任何页面中,它将根据图片的大小自动适应浏览器窗体。 标签:Backstretch
动态设置textview圆角背景
动态设置textview指定颜色圆角背景
动态设置控件背景,透明度
LinearLayout ly = new LinearLayout(getApplicationContext()); ly.setOrientation(LinearLayout.HORIZONTAL); ly.setGravity(Gravity.CENTER); ly.setBackground(getResources().getDrawable(R.drawable.location_
GradientDrawable 动态设置背景的使用
我们经常会为控件按钮等设置背景图,一般的效果都是,圆角,颜色,渐变色,阴影,或者是选中效果等。正常情况下都是通过,xml文件来静态的配置。当我们在代码中需要动态配置的时候,我们可以选用GradientDrawable这个类来实现我们的效果。支持的形状有4种: /** * Shape is a rectangle, possibly with rounded corners */矩
RelativeLayout动态设置背景问题
使用RelativeLayout动态设置背景,加载sd卡图片铺满整个屏幕。rnrn图片的尺寸不定,可能有点是1000x1000,或者800x750等等这样rnrnString photo="/mnt/sdcard/photo.jpg";rn如果我这样写:rnlayout_photo.setBackgroundDrawable(Drawable.createFromPath(photo));rn显示的结果是这样:rn[img=https://img-bbs.csdn.net/upload/201411/24/1416837712_629410.png][/img]rn看到有拉伸rnrn如果我这样写:rnBitmap bm = BitmapFactory.decodeFile(photo);rnDisplayMetrics metric = new DisplayMetrics();rngetWindowManager().getDefaultDisplay().getMetrics(metric);rnint width = metric.widthPixels; // 屏幕宽度(像素)rnint height = metric.heightPixels; // 屏幕高度(像素)rnBitmap bm1 = Bitmap.createBitmap(bm, 0, 0, width, height);rnDrawable bd = new BitmapDrawable(getResources(), bm1);rnlayout_photo.setBackgroundDrawable(bd);rn显示的结果是这样:rn[img=https://img-bbs.csdn.net/upload/201411/24/1416837864_236112.png][/img]rn只能看到图片一部分,但是没有拉伸。rnrn-----------------------------------------------------------------------------------------rnrn我想请教那位高手,有没有方法:能够将整个图片显示在屏幕等比例缩放不拉伸,看起来很自然的。谢谢啦rn
背景圆角以及图片圆角处理
&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt; &amp;lt;layer-list xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&amp;gt;         &amp;lt;item android:drawable=&quot;@drawable/icon_home_button_img&quot;/&amp;g
关于设置ActionMode 的背景
设置ActionMode的背景颜色
网页动态背景代码(4种)
包含4个网页动态背景特效,canvas特效,svg特效,需要的可以下载使用或者学习
jQuery网页气泡动态背景特效.zip
jQuery网页气泡动态背景特效是一款支持嵌套的jQuery网页动态背景特效代码。
Android-Android实现网页动态背景“五彩蛛网”
Android实现网页动态背景“五彩蛛网”
网页动态背景:随鼠标线条变动
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;动态线条背景&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;标题&lt;/h1&gt; &lt;/body&gt; &lt;!--只加入下面这行--&gt...
Android实现网页动态背景“五彩蛛网”
前言 《都挺好》迎来了大结局,相信看哭了很多人。在大结局中,所有之前让人气的牙痒痒的人设,比如 “你们太让我失望” 的苏明哲,还有妈宝男苏明成,包括一天不作就难受的苏大强,最终都成功洗白。一家人最终化解恩怨,和和气气的过日子。还有谁也喜欢《都挺好》这部剧吗? 在剧中,苏明哲同我们一样也是一名程序员,一味地迁就老爹,搞得最后差点与老婆离婚,看来程序员不能一根筋啊。转变下思维来看看网页版动态背景「五彩...
如何动态设置网页title?
rn如果我放一个label,在后台设置文字,就会显示出来span的html代码。有没有办法只显示文字阿rnrnxxx
仿QQ动态背景-SWF动态背景
仿QQ动态背景-SWF动态背景;使用了一个很好的封装类,仅两三行代码就实现QQ2014动态背景的实现,送有从QQ2014抠取的四个SWF登录框背景,再送两个SWF文件
动态背景
=============================动态背景===================== 最近在做一些新的项目联系;现在处于那种会的迷迷糊糊,不会的有待提高那种状态;终于在迷迷糊糊里面总能捡到一些新鲜的东西;这也是我这几天搭建框架的时候;发现了一些以前的新东西;也不能算新东西吧;算一个发现的一个小技巧吧; 在做很多软件的时候,都会有登录页面;有些页面高级到特别炫酷;就比如我...
android开发:如何动态设置ImageView和button的背景
Drawable drawable = ResourcesCompat.getDrawable(getResources(), R.drawable.has_authorization, null); imv_authorization.setBackground(drawable);
wpf中datagrid动态设置单元格背景
wpf中datagrid动态设置单元格背景颜色。
Android 代码动态修改XML设置的背景
01、通过Drawable的方式改变shap背景颜色 // 以 shap 作为背景,改变 shap 的背景颜色 TextView test = (TextView) findViewById(R.id.tv_test); GradientDrawable drawable = (GradientDrawable) test.getBackgro...
动态设置Edit控件的背景及字体颜色
1.新建一个基于对话框的应用程序,在对话框上添加一个Edit控件和一个Button控件 2.修改Button控件的ID为IDC_RESULT_EDIT 3.向对话框对应的类中添加如下成员变量: public:  COLORREF m_colorEditText; // edit控件的字体颜色  COLORREF m_colorEditBK;  // edit控件的背景颜色  HBRUS
android 动态设置背景失效bug
有时候当xml设置控件背景之后,需要在运行过程中修改该控件背景,导致修改背景失效。 1、检查xml设置的是src或者background 2、代码动态设置需要跟xml对应起来,如果xml设置我src,代码需要设置setImageResource,否则setBackgroundResource() 见转载分析 http://blog.csdn.net/Lu_Ca/article/det
如何设置FLASH动态文本框的背景
如何设置FLASH动态文本框的背景
Bginfor动态设置域电脑背景
自定义域电脑自适应背景设置,同时附获到LADP目录脚,在自定义中添加脚本。
代码动态设置imageview的背景的时候不起作用
写代码调用该方法时候运行后没有效果,纠结了一会, 查看了一下 xml 原来是因为 xml中设置的是 src 不是 backgroud! 导致了imageView..setBackgroundResource 没有效果。解决方案: 1 修改代码 改为imageView.setImageResource() 2 修改xml 讲 src 改为 background
微信小程序 动态设置背景
wx.setBackgroundColor(Object object) 支持版本 &amp;gt;= 2.1.0 动态设置窗口的背景色 wx.setBackgroundColor({ backgroundColor: '#ffffff', // 窗口的背景色为白色 }) wx.setBackgroundColor({ backgroundColorTop: '#ffffff', /...
WP7.1全景视图动态设置背景
想通过编程根据需要更换Panorama的背景图片rn求解 怎么动态设置Panorama的背景图片rn[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/onion/1.gif][/img]rn跪求!!
自定义Dialog动态设置全屏显示,背景透明度,背景黑暗度
前情提要: 我们在开发的过程中会用到很多的自定义控件,我们这一篇来讲自定义Dialog需要用到的一些东西 1.在设置这些属性的时候我们首先需要去获取到当前控件的参数值 WindowManager.LayoutParams p =getWindow().getAttributes(); //获取对话框当前的参数值 2.1设置全屏显示 p.width = p.MATCH_PARENT;...
关于wpf中datagrid动态设置单元格背景问题!
最近新接个项目,用wpf做的系统从来没有做过,画面是xaml的文件,后台用c#太困难了,找个属性都找不到rn现在需要在前台DATAGRID中根据数据动态设置单元格的背景属性,查了半天,光知道是需要绑定的,但是具体步骤还是不清楚rn无从下手阿,rn 哪位高手做过给指条名路吧,谢谢!rn
关于报表的动态设置
各位大虾:rn 我用VB6中的报表,我想动态地生成各个不同的数据库的数据,但是报表的控件不能用代码编写,不能动态地绑定它,有哪个大虾能告诉小弟报表的动态生成数据。谢谢
关于动态设置控件
现在有有个上传多个文件功能,开始我默认的是一个FileUpLoad,我还有继续添加的按钮,点下,就会出来一个FileUpLoad,跟一个删除按钮,之后确定是这么多文件,就点上传,这个功能怎么实现啊,rn如http://www.alisoft.com/portal/homepage/isv/fax99demo080128/fax99demo01.html 这个上演示的一样
关于动态设置对象
我有一系列的input输入框,name分别为input_1,input_2,input_3......我现在分别判断里面输入的内容是否符合我的要求,于是乎我作循环了。我知道有n个输入框,所以我用for循环。rnfor(i=0;i
关于设置背景的一个小问题
为什么我在程序中用pdc->setbkcolor(rgb());设置窗口背景色后,编译运行却不能得到如期结果?仍然是默认背景?请大虾指教。
关于设置对话框背景的问题
如何修改插入的对话框资源的背景呢?重写了 OnPaint()但是没用啊 各位指教下 谢谢
关于动态设置文本.
rn我要在运行时更改CListCtrl的HEAD的文本.rn我的代码如下:rn加入列:rnm_logList.SetExtendedStyle(LVS_EX_GRIDLINES | LVS_EX_FULLROWSELECT);rnm_logList.InsertColumn(0,_T("#"),LVCFMT_CENTER,25); //序号rnm_logList.InsertColumn(1,0,LVCFMT_LEFT,120); //时间rnm_logList.InsertColumn(2,0,LVCFMT_LEFT,292); //URLrnrn然后按按钮更改:rnTCHAR lpBuffer[50];rnwcscpy(lpBuffer,m_pLanguage->GetString(IDS_LOGLIST_COLUMN1));rnLVCOLUMN column;rncolumn.mask = LVCF_TEXT;rncolumn.pszText = lpBuffer;rncolumn.cchTextMax = sizeof(lpBuffer);rnm_logList.SetColumn(1,&column);rn或者直接用m_logList.GetHeaderCtrl()->SetDlgItemText(....);rn这两个怎么都不行啊, 不报错, 编译通过, 但是HEAD头上还是没有字啊? 怎么回事?rn
关于SiteMap动态设置
RT:rn就是实现SiteMapProvider的方法!从数据库读取数据!rn有谁做过请教下!或写个代码也可以!
相关热词 c# 标准差 计算 c#siki第五季 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池