task6.html

<!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">
    <title>Media element </title>
    <style>
        body{
           text-align: center;
        }
        .video{ 
            display: flex; justify-content: left;
        }
        .P{
            text-align: left;
            font-size: 35px;
        }
        
        .A{
            font-size: 35px;
        }
        #C{
            display: flex; justify-content: left;
            font-size: 35px;
        }
       
    </style>
</head>
        <body> 
             <h1>!! Media Element !!</h1>
             <p class="A"><b>* Audio</b></p>

    
            <audio controls>
                  <source src="ram siya ram.mpeg">
            </audio>
   
   
            <p class="P"><b>* Video</b></p>

            <video width="500" height="250" controls preload class="video">
                 <source src="video.mp4"> type="video/mp4">
            </video>

            <h1 class="location"> * My location </h1>
    
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3159.177423617156!2d73.
                96156194273271!3d18.52674810554678!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.
                1!3m3!1m2!1s0x3bc2c348f88521c7%3A0x46c9773c0b6247c7!2sMy%20Location!5e0!3m2!1sen!2sin!4v1672059331379!5m2!1sen!2sin" 
                width="400" height="200" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

                <h1 id="C"><b>* Animation</b></h1>
                <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
                <lottie-player src="https://assets10.lottiefiles.com/packages/lf20_KoHGtQuRer.json"  background="transparent"  speed="1" 
                 style="width: 300px; height: 300px;"  loop controls autoplay></lottie-player>


        </body>
</html>