Question

如何在网站上添加视频并在其中写一些文字？

即使我添加的视频也没有显示在网站上

html：

<div class="p-video ">
    <video poster="image/poster.jpg" class="video " src="image/something.mp4"></video>  
    <div class="m-video">
        <div class="float-right  about">
            <image alt="logo" src="logo.png" class="image-fluid  ">
            <p class="text-justify">
                    something
            </p>
        </div>
    </div>
</div>

Css：

 .p-video{
     position: absolute;
     top: 0;
     height: 100%;
     width: 100%;
     background-color: aqua;
     }
 .video{
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
           }
 .about{
     align-content: flex-start;
     background: rgba(0,0,0,0.87);

        }
 .m-video{
     position: relative;
        }

它仅显示我的海报，而m-video位于p-video之下。我想要它来！

Answer 1

您应该为html和css这样写

.p-video{
     position: relative;
     top: 0;
     height: 100%;
     width: 100%;
     background-color: aqua;
     }
 .video{
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
           }
 .about{
     align-content: flex-start;
     background: rgba(0,0,0,0.87);

        }
 .m-video{
    position: absolute;
    top: 0;
    left: 0;
        }

<div class="p-video ">
    <video poster="image/poster.jpg" class="video" controls>
		<source src="mage/something.mp4" type="video/mp4">
	</video>  
    <div class="m-video">
        <div class="float-right  about">
            <image alt="logo" src="logo.png" class="image-fluid  ">
            <p class="text-justify">
                    something
            </p>
        </div>
    </div>
</div>

Answer 2

我不知道为什么我的代码不起作用但是我用另一种方法解决了。我添加了库jquary.vidbacking 与此CSS：

.clearfix{display:block;clear:both;float:none;}
.videokeeper{display:block;margin:0;padding:0;}
.video-back{display:block;padding:200px 0px 0px 0px;text-align:center;}
.video-back h1{display:block;text-align:center;color:#fff;text-shadow:2px 2px 4px 
  #000;font-size:50px;}
.video-back p{display:block;color:#fff;text-shadow:2px 2px 1px 
    #000;margin:0px;padding:0px;margin-bottom:20px;}
.video-back img{width:150px;}

和此html：

<div class="videokeeper">
    <video poster="assets/poster.jpg" autoplay muted loop class="vidbacking">

        <source src="assets/varagh.mp4" type="video/mp4">
    </video>
    <div class="video-back">
        <p>something</p>
    </div>
</div>

和这个js：

<script type="text/javascript">
    $(function(){
        $('body').vidbacking({
            'masked': false
        });
    });
</script>

如何添加视频并在上面写东西？

2 个答案: