Skip to main content

Use <audio>,<video> and some attribute like controls ,loop ,type ,autopaly & use CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body{
      background-color: rgb(86, 153, 153);
    }
  </style>
  <title>audio</title>
</head>
<body>
  <h1>This is my Audio file</h1>
  <p>Click on this audio file and injoy a popular song by Areght Sing.Ihope all are gayes have some fun.Thanks,everyone.</p>
  <!-- <src="horse.ogg/horse.mp3/horse.wav" type="audio/ogg""audio/mpeg""audio/wav"> -->
  <audio src="audio 3.wav" type="audio/mpeg" controls autoplay loop>
  </audio>
  <span>
    <h2>this is my vedio element</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos nam, ratione nisi minima, placeat amet quasi laboriosam, temporibus quos accusantium sint rerum laudantium iusto non asperiores ullam mollitia doloremque ut.
    </p>
    <!-- <source src="movie.mp4/movie.ogg/movie.webm" type="video/mp4""video/ogg""video/webm"> -->
    <video src="Earth Animation.mp4" controls width="400px" poster="gh.jpg" type="video/mp4" autoplay loop></video>
  </span>
</body>
</html>

 

Comments

Popular posts from this blog

feture

Use  <nav>,<figure>,<ifrem>,<samp>,<var> Tag < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < style >     header {       text-align : center ;     }     body {       background-color : rgb ( 196 , 152 , 72 );     }     .agp {       width : 100% ;       height : 250px ;    }     .fcss {     border : 3px solid red ;     border-radius : 5px ;     padding : 5px ;     margin : 2px ;     width : 50% ;    }     .fs {       text-align : center ;     }     .t1 , .t2 , .t3 , .t4 {       background-colo...
Use CSS variable (form and list style)  If you want icon like -list ..Go to this wed -site : https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=tick And attest HTML <header> this link : <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> This is CSS sheet /* form style */ .text-are12 {     resize : none ;     border : 3px solid rgb ( 71 , 3 , 3 );     border-radius : 5px ;     margin : 10px ; } input [ type = "submit" ], input [ type = "reset" ]{     width : 90px ;     border : none ;     margin : 10px ;     border-radius : 5px ;     padding : 5px ;     background-color : olivedrab ;     color : white ;     cursor : pointer...