Question

我正在观看有关如何在标题中自动播放视频的教程。本教程中提供的视频有效，但是当我从同一网站下载自己的视频并尝试使用video标签将其上传到html时，该视频无法正常工作。

我添加了自动播放和循环功能，并且我还使用了mov文件，它在chrome / safari中不起作用。

我尝试使用源标签使其正常工作。我没有尝试下载不同版本的视频以使其适用于不同的浏览器。

HTML:  

  <!DOCTYPE html>
  <html lang="en" dir="ltr">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta charset="utf-8">

        <meta http-equip="X-UA-Compatible"content="ie-edge">

        <title> Page 2</title>



        <link href="/css/style.css" type="text/css" rel="stylesheet">

        </head>

        <body class="secondpage">

        <header class="v-header container">

        <div class="fullscreen-video-wrap">
               <video src="/images/video.mov" autoplay="true" loop="true">



                </video>



CSS:


.secondpage{
    margin:0;
    font-family:"-apple-system", "BlinkMacSystemFont", sans-serif;
    font-size:1rem
    line-height;1.5;
    color:#333;
    overflow-x:hidden;
}

.v-header{
    height:100vh;
    display:flex;
    align-items:center;
    color:#fff;
}

.container{
    max-width:960px;
    padding-left:1rem;
    padding-right:1rem;
    margin:auto;
    text-align:center;
}

.fullscreen-video-wrap{

    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    overflow:hidden;
}


.fullscreen-video-wrap video{

   min-width: 100%;
   min-height: 100%;

}

.heading-overlay{
    height:100vh;
    width:100%;
    position:absolute;
    top:0;
    left: 0;
    background: #225470;
    z-index:1;
    opacity:0.60;
}

.header-content{
z-index:2;
}

.text02{
    font-size:50px;
    margin-top: 0;
}

.para02{
    font-size:1.5rem;
    display:block;
    padding-bottom:2rem;
}

.section{
    padding:80px 0;

}

.section-b{
    background:#333;
    color:#fff;
}

@media(max-width:960px){
    .container{
        padding-right:3rem;
        padding-left:3rem;
    }
}

预期结果：视频应自动播放。实际结果：VIDEOS IMAGE是静态的，WON PLAY没有响应。

Answer 1

在html5视频标记中，仅支持三种格式。

1. video/mp4
2. video/webm
3. video/ogg

将视频转换为以下任何一种格式。

Answer 2

.secondpage{
margin:0;
font-family:"-apple-system", "BlinkMacSystemFont", sans-serif;
font-size:1rem
line-height;1.5;
color:#333;
}
.text{
  position:absolute;
  top:20px;
  font-size:50px;
  left:50%;
  transform:translateX(-50%);
  z-index:99;
}
.v-header video{
 position: absolute;
top: 0%;
left: 0%;
z-index: 1;
object-fit: cover;
width: 100%;
height: 100%;
}
.v-header{
position: relative;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
}

   <body class="secondpage">

    <header class="v-header">
      <p class="text">some text</p>
  <video class="video" id="myVideo" muted="muted" loop="loop" autoplay="autoplay">
  <source src="back.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
  </video>
          </header>
          </body>

我想在标题部分的背景中添加视频，但是视频是静态的，不会自动播放，这是为什么？

2 个答案: