2016-11-15 47 views
-2

我試圖顯示兩個控件相鄰的視頻,但我似乎無法得到它的工作。我可以擁有其中一個,但不能擁有其中一個。我嘗試過,如果我指向的文件不正確,但沒有,一切似乎檢查出來。HTML5:如何在同一頁上獲得2個視頻?

@fontface { 
 
    font-family: Halo; 
 
    src: url(fonts/Halo.ttf); 
 
} 
 
body { 
 
    background-image: url(images/background-image/ExuberantWitness.jpg); 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
#head { 
 
    font-family: Halo; 
 
    font-size: 60px; 
 
    text-align: center; 
 
} 
 
.leftVideo { 
 
    margin: 0 auto; 
 
    width: 600px; 
 
    float: left; 
 
} 
 
.rightVideo { 
 
    margin: 0 auto; 
 
    width: 600px; 
 
    float: left; 
 
}
<!doctype HTML> 
 
<html> 
 

 
<head> 
 
    <title>HaloPLAY</title> 
 
    <link href="Trailer.css" rel="stylesheet" type="text/css"> 
 
    <meta charset="utf-8"> 
 
</head> 
 

 
<body> 
 
    <a href="index.html"> 
 
    <img style="margin: 0px auto;display:block" src="images/title/Halo.jpg" width="750" height="100"> 
 
    </a> 
 
    <h1 id="head">WATCH THE TRAILER TO LEARN MORE</h1> 
 
    <div class="leftVideo"> 
 
    <video width="500" height="350" controls> 
 
     <source src="video/Halo5Trailer.mp4" type="video/mp4"> 
 
     <source src="video/Halo5Trailer.ogg" type="video/ogg"> 
 
      </class> 
 
      <div class="rightVideo"> 
 
      <video width="500" height="350" controls> 
 
       <source src="video/Halo5Trailer2.mp4" type="video/mp4"> 
 
       <source src="video/Halo5Trailer2.ogg" type="video/ogg"> 
 
        </class> 
 
</body> 
 

 
</html>

回答

0

變化

</class> 

</video> 
0

看來你有未關閉標籤和關閉,這並不exsist </class>的標籤。

試試這樣說:

<div class="leftVideo"> 
    <video width="500" height="350" controls> 
    <source src="video/Halo5Trailer.mp4" type="video/mp4"> 
    <source src="video/Halo5Trailer.ogg" type="video/ogg"> 
    </video> 
</div> 
<div class="rightVideo"> 
    <video width="500" height="350" controls> 
    <source src="video/Halo5Trailer2.mp4" type="video/mp4"> 
    <source src="video/Halo5Trailer2.ogg" type="video/ogg"> 
    </video> 
</div> 

請看看這裏http://www.w3schools.com/html/html5_video.asp以獲取更多信息。

問候,

亞歷

相關問題