Getting a Image, Video and Audio on Html Web page.

Any Website without Image, Video or Audio is incomplete. Here Audio is not necessary but Images and Video are important, adding media on a webpage can have different agendas, such as these can be used for educational purposes which can be observed on blog pages, for SEO purposes, and even for advertisement purposes and more. Hence, the main motive for using this type of media is to make the website more interactive and to visitors engaging.

Let's see the use scenario of three of them in html webpage.

Image: As we know the image is an Inline element and the image can be inserted in two ways i.e from the file itself and from another webpage.

Such as:


    <title>Image</title>
</head>
<body>
    <h1>Image</h1>
    <!-- From file -->
    <img src="/devbytes-preview.png" alt="image" height="500px" width="600px"/>
    <br>
    <hr>
    <!-- From another webpage -->
    <img src="https://images.unsplash.com/photo-1464802686167-b939a6910659?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8cmVkJTIwaGVybyUyMGJhY2tncm91bmR8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt="image" height="300px" width="600px"/>
</body>

Output:

Video: The method of inserting a video is as common as an image with one important attribute i.e controls. Every video has a play, pause button and other user control interface. Hence Youtube videos can also be linked using the iframe tag that is already provided on Youtube.

    <h1>Video</h1>
    <video height="400px" width="500px" controls autoplay muted>
     <source src="https://player.vimeo.com/external/559880023.sd.mp4?s=7445cd904634755802174ff794f2098ad80967f1&profile_id=165&oauth2_token_id=57447761">
    </video>
    <br>
    <hr>
    <!-- Youtube video -->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/LXb3EKWsInQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Output:

Audio: If we approach for a website embedded with audio then an audio tag is most useful which can be inserted by the following method:

   <title>Video</title>

</head>
<body>
    <h1>Audio</h1>
    <audio autoplay controls muted>
        <source src="/audio.mp3">
    </audio>
</body>

Output:

Further, The image, video, as well as audio, can be customized by using CSS.

DevBytes

DevBytes

Getting a Image, Video and Audio on Html Web page.