如何将视频设置为网页背景【转】

时间: 2018-03-23阅读: 2962标签: 视频
有时候为一个网页添加一个动画效果的背景,会让网页增加一定的韵味,让网页看起来与众不同。


第一步:准备工作

工欲善其事必先利其器,我们首先需要准备一个视频


第二步:html中引入视频

这里我们需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放,依照个人意愿愿意加就加,不加拉倒哈

<div class="videocontainer">
    <video class="fullscreenvideo" poster="__ROOT__/Themes/tdt/Asset/images/loginbg.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop="">
        <source src="__PUBLIC__/video/loginbg.mp4" type="video/mp4">
    </video>
</div>


第三步:css设置,调节视频,使其适应屏幕  

以上的步骤还不能满足我们的需求,这个时候我们会发现有滚动条,而且视频会遮挡我们要显示的内容,可这远远不是我们想要的结果啊,不怕,有我呢

.fullscreenvideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: 1s opacity;
    transition: 1s opacity;
}
 
.videocontainer{
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -100; 
}
 
.videocontainer:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(25,29,34,.65);
}


第四步:js控制视频播放速度 

可以利用video的playbackRate属性来控制video的播放速度,如果要让背景视频以慢速播放的话可以加上下面的JavaScript 

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

好嘞,快去设置你的酷炫背景吧    

来源:https://www.cnblogs.com/front-girl/archive/2018/03/23/8628571.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/545

Video Renderer:高性能移动 Web 端视频编辑器

Video Renderer 是一款针对移动 Web 应用开发的高性能视频编辑器。在 2019 伦敦全栈工程师大会( Fullstack London 2019 conference )上, Threads Styling 公司的软件开发工程师Forbes Lindesay 分享了 Video Renderer 的开发经验。

DPlayer简单用法

DPlayer 是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku,实时视频(HTTP Live Streaming,M3U8格式)以及 FLV 格式

视频全屏弹幕实现

这个问题如果思路错了就是个死胡同。所以我在找问题的时候趟了很多坑。思路错在我不应该使用视频的全屏,敲黑板!划重点啦!不要使用视频的全屏!(解决了问题的时候才幡然醒悟)

jsmpeg.js_h5移动端视频自动播放

在移动端使用h5自动的video标签播放视频,设置autoplay属性,在android端部分不支持,全屏播放还存在层级问题,ios10以上版本支持视频自动播放,以下版本不支视频自动播放

优化 MP4 视频以便更快的网络串流

随着 Flash 的落寞 以及 移动设备的爆发性增长 ,越来越多的内容以 HTML5 视频的方式传递。在上一篇文章中你甚至能看到 使用 HTML5 视频替换 GIF 动图来优化网站访问速度 这样的技巧

vue实现自定义H5视频播放器

前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑,这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭

h5视频播放踩坑记录

随着抖音、快手这类的视频类app的火爆,移动端h5视频类应用也随之兴起,使用video播放的场景也越来越多,本篇文章主要例举了移动端视频播放的一些场景和个人在开发过程中遇到的一些问题

html网页添加音乐视频方式

声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 Chrome 66 也正式关掉了声音自动播放

聊聊 Web 视频播放的画中画模式

Chrome 在升级到 70 的时候开始对视频播放的画中画模式开始支持了,用户在浏览器 Web 页面可以通过 画中画的形式强当前画面停留在屏幕正上方,无论你在使用其他软件还是切到其他 Tab ,都可以看到当前画面

js实现截取视频帧图片作为封面预览图

前端需要把视频文件的第一帧图像截取出来,并做为缩略图显示在页面上,这里需要利用HTML5中强大的画布canvas来实现该功能

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!