• 技术文章 >web前端 >H5教程

    HTML5设置视频背景的方法介绍

    青灯夜游青灯夜游2020-11-17 18:04:26转载235

    我们常常有着将视频作为网页背景的需要,但是在设置时也经常差强人意,今天设置了一下,可以基本达到要求了,可能有些小细节做的不是太好,希望指出来,一起进步

    第一步:准备工作

    工欲善其事必先利其器,我们首先需要准备一个视频,我准备了一个这样的视频,如图:

    是不是很美,当然了,,没我美哈

    第二步:引入视频

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

    <video id="v1" autoplay muted loop style="width: 100%">
        <source  src="mp4/loading.mp4">
    </video>

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

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

    video{
              position: fixed;
              right:0;
              bottom: 0;
              min-width: 100%;
              min-height: 100%;
              width: auto;
              height: auto;
              z-index: -9999;
              /*灰色调*/
              /*-webkit-filter:grayscale(100%)*/
     
          }

    这样就OK了,-webkit-filter:grayscale(100%)为调节会色调的,同样适用于img

    第四步:视频播放速度

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

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

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

    更多编程相关知识,请访问:编程入门!!

    以上就是HTML5设置视频背景的方法介绍的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:博客园,如有侵犯,请联系a@php.cn删除
    专题推荐:HTML5 视频背景
    上一篇:html5怎么嵌入视频 下一篇:h5怎么解决移动端滑动卡顿的问题
    第14期线上培训班

    相关文章推荐

    • 一起来聊聊html与HTML5的区别• HTML5实现对话气泡点击动画• 你有认真学习HTML5吗?那么你应该读的书都在这里了• 如何利用HTML5 canvas旋转图片?(实例演示)• 通过html5中的canvas来绘制一个圆环形进度条

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网