将视频设置为网页的背景

这篇具有很好参考价值的文章主要介绍了将视频设置为网页的背景。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

第一步、HTML中添加视频标签

使用video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放。

<video autoplay muted loop class="bg_fixed">
        <source src="img/V-154485-5ED2BB75.mp4" type="video/mp4" />
        您的浏览器不支持 video 标签。
</video>

第二步、添加CSS属性,让视频适应屏幕

.bg_fixed{
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    transition: 1s opacity;
}

第三步、使用JS控制视频速度

利用video的playbackRate属性来控制video的播放速度文章来源地址https://www.toymoban.com/news/detail-513375.html

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

到了这里,关于将视频设置为网页的背景的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 锐化多个视频的同时轻松快速批量添加上背景图片的教程

    在日常生活中,我们可能经常需要给一些视频添加背景图。但是,这并不是一项简单的任务,需要花费大量的时间和精力。那么,有没有一种简单的方法可以批量添加背景图到视频呢?答案是肯定的。下面,我们就来介绍一种简单易行的操作方法。 首先,我们需要打开软件的

    2024年02月07日
    浏览(54)
  • css设置background背景视频

    通过CSS设置背景视频可以使用HTML5的video标签。具体步骤如下: 1.在HTML中添加video标签,并设置class为bg-video。 2.在video标签中添加source标签,用于指定视频文件的路径和类型。 3.在CSS中设置bg-video的样式,包括绝对定位、宽高等属性。 4.在CSS中设置z-index属性,确保视频在其他元

    2024年04月10日
    浏览(91)
  • VUE页面背景设置为视频

    VUE页面背景设置为视频 VUE页面背景设置为视频 视频文件放置位置如下图所示 代码如下所示 CSS代码位置如下图所示 CSS代码如下所示 以上就是VUE页面背景设置为视频的全部信息、感兴趣的话点一个关注,我会不定期的更新技术分享,你的鼓励是我创作的动力。

    2024年02月11日
    浏览(37)
  • 【HTML5】HTML5 多媒体标签 ② ( 视频标签 <video> | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

    HTML 5 的 video 视频标签 , 支持 ogg / mpeg 4 ( mp4 ) / webM 三种格式的音频 , 不同的浏览器支持的音频格式不同 ; IE 浏览器 : 9.0 以上版本支持 mp4 格式 ; Firefox 浏览器 : 3.5 以上版本支持 ogg 格式 ; 4.0 以上版本支持 webM 格式 ; Opera 浏览器 : 10.5 以上版本支持 ogg 格式 ; 10.6 以上版本支持

    2024年02月09日
    浏览(76)
  • 大二Web课程设计:服装网页设计题材——HTML+CSS汉服文化带背景音乐素材带视频(12页)

    🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (

    2024年01月17日
    浏览(54)
  • CSS设置鼠标样式和添加视频样式

    CSS用户界面样式 轮廓线outline 使图片和文字对齐 vertical-align: baseline | top | middle | bottom baseline 默认元素设置在父元素的基线上 top把元素的顶端与行中最高元素的顶端对齐 middle把元素放置父元素的中部 bottom把元素的顶端与行中最低的元素的顶端对齐 这个用法限于行内和行内块

    2024年02月07日
    浏览(39)
  • vue3中【html+css】背景设置为视频并铺满整个页面

    Tip: video标签默认不是铺满的,手动设置宽高100%也不会生效,当需要video铺满div时,加上一个css样式 object-fit: fill object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。 object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或

    2024年02月11日
    浏览(59)
  • video标签设置了autoplay,自带音频的视频在谷歌浏览器仍无法自动播放

    原因分析:谷歌浏览器可以自动播放视频,不能自动播放音频。如果视频中自带音频就会导致该视频无法自动播放。 解决办法:在video标签加上静音属性muted,自带音频的视频就可以自动播放了,但是该视频无声音。 备注:1、这是谷歌浏览器自身的问题。2、Safari浏览器可正

    2024年02月12日
    浏览(64)
  • video视频标签一些设置,包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件

    代码如上,poster属性用于设置视频封面;视频链接放在source标签内的src属性;加controls属性就会展示控制栏,不加不显示; 视频进入网页自动播放 查阅资料都是说在vedio属性中加 autoplay=\\\"autoplay\\\" muted=\\\'muted\\\',如第一段代码,但是我试了都是被浏览器评屏蔽掉的(为了提高用户体

    2024年02月13日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包