Assignments Of Class 7: Multimedia Elements in HTML

Rashmi Mishra
personRashmi Mishra
October 21, 20244 minute read
0

 Assignments Of Class 7

Multimedia Elements in HTML

Assignment 1: Embed a Video

Task: Create a web page that includes a video embedded using the <video> tag.

Requirements:

  1. Embed a video of your choice from your local files or a URL.
  2. Include playback controls for the video.
  3. Set the video to autoplay and loop.

Example Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Video Example</title>

</head>

<body>

    <video src="video.mp4" controls autoplay loop width="640" height="360">

        Your browser does not support the video tag.

    </video>

</body>

</html>

Assignment 2: Embed an Audio File

Task: Create a web page that includes an audio file embedded using the <audio> tag.

Requirements:

  1. Embed an audio file of your choice from your local files or a URL.
  2. Include playback controls for the audio.
  3. Set the audio to autoplay and loop.

Example Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Audio Example</title>

</head>

<body>

    <audio src="audio.mp3" controls autoplay loop>

        Your browser does not support the audio element.

    </audio>

</body>

</html>

Assignment 3: Embed an External Video with <iframe>

Task: Create a web page that includes an external video embedded using the <iframe> tag.

Requirements:

  1. Embed a video from a platform like YouTube or Vimeo.
  2. Set appropriate dimensions for the iframe.
  3. Ensure the iframe is responsive and can be viewed in fullscreen mode.

Example Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Embedded Video</title>

</head>

<body>

    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen>

        Your browser does not support iframes.

    </iframe>

</body>

</html>

Assignment 4: Create a Multimedia Gallery

Task: Design a simple gallery page that includes a combination of videos, audio files, and external content.

Requirements:

  1. Embed at least one video using the <video> tag.
  2. Embed at least one audio file using the <audio> tag.
  3. Embed external content using the <iframe> tag.
  4. Add a brief description or caption for each multimedia element.

Example Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Multimedia Gallery</title>

</head>

<body>

    <h1>Multimedia Gallery</h1>

 

    <h2>Video Section</h2>

    <video src="video.mp4" controls width="640" height="360">

        Your browser does not support the video tag.

    </video>

    <p>This is a sample video showcasing some content.</p>

 

    <h2>Audio Section</h2>

    <audio src="audio.mp3" controls>

        Your browser does not support the audio element.

    </audio>

    <p>This is a sample audio file.</p>

 

    <h2>External Content</h2>

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12681.060028106946!2d-122.0842495!3d37.4219999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fbb3f0d3c5eb5%3A0x1b78b42d95c2b3c!2sGoogleplex!5e0!3m2!1sen!2sus!4v1620850517007!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="">

    </iframe>

    <p>This is an embedded Google Maps location.</p>

</body>

</html>

Assignment 5: Enhance Multimedia Elements with CSS

Task: Apply CSS styles to enhance the appearance of your multimedia elements.

Requirements:

  1. Add styles to your <video>, <audio>, and <iframe> elements.
  2. Apply styles such as borders, shadows, or rounded corners.
  3. Ensure that the multimedia elements are responsive.

Example Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Styled Multimedia Elements</title>

    <style>

        video, audio, iframe {

            border: 2px solid #333;

            border-radius: 8px;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

            max-width: 100%;

            height: auto;

        }

    </style>

</head>

<body>

    <h1>Styled Multimedia Elements</h1>

 

    <video src="video.mp4" controls width="640" height="360">

        Your browser does not support the video tag.

    </video>

 

    <audio src="audio.mp3" controls>

        Your browser does not support the audio element.

    </audio>

 

    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen>

        Your browser does not support iframes.

    </iframe>

</body>

</html>

Assignment 6: Create a Video Playlist

Task: Design a web page with a video playlist that allows users to switch between multiple video files.

Requirements:

  1. Embed multiple videos using the <video> tag.
  2. Include a basic JavaScript script to switch between videos when a button is clicked.
  3. Add playback controls to each video.

Example Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Video Playlist</title>

</head>

<body>

    <h1>Video Playlist</h1>

 

    <video id="videoPlayer" controls width="640" height="360">

        <source src="video1.mp4" type="video/mp4">

        Your browser does not support the video tag.

    </video>

    <br>

    <button onclick="changeVideo('video1.mp4')">Video 1</button>

    <button onclick="changeVideo('video2.mp4')">Video 2</button>

    <button onclick="changeVideo('video3.mp4')">Video 3</button>

 

    <script>

        function changeVideo(videoSrc) {

            document.getElementById('videoPlayer').src = videoSrc;

            document.getElementById('videoPlayer').play();

        }

    </script>

</body>

</html>

Assignment 7: Create an Audio Playlist

Task: Design a web page with an audio playlist that allows users to switch between multiple audio files.

Requirements:

  1. Embed multiple audio files using the <audio> tag.
  2. Include a basic JavaScript script to switch between audio files when a button is clicked.
  3. Add playback controls to each audio file.

Example Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Audio Playlist</title>

</head>

<body>

    <h1>Audio Playlist</h1>

 

    <audio id="audioPlayer" controls>

        <source src="audio1.mp3" type="audio/mp3">

        Your browser does not support the audio element.

    </audio>

    <br>

    <button onclick="changeAudio('audio1.mp3')">Audio 1</button>

    <button onclick="changeAudio('audio2.mp3')">Audio 2</button>

    <button onclick="changeAudio('audio3.mp3')">Audio 3</button>

 

    <script>

        function changeAudio(audioSrc) {

            document.getElementById('audioPlayer').src = audioSrc;

            document.getElementById('audioPlayer').play();

        }

    </script>

</body>

</html>

Assignment 8: Interactive Map with <iframe>

Task: Embed an interactive map on a web page using the <iframe> tag and add controls to navigate through different locations.

Requirements:

  1. Embed a Google Map using the <iframe> tag.
  2. Include controls to change the location displayed on the map.

Example Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Interactive Map</title>

</head>

<body>

    <h1>Interactive Map</h1>

 

    <iframe id="mapFrame" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12681.060028106946!2d-122.0842495!3d37.4219999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fbb3f0d3c5eb5%3A0x1b78b42d95c2b3c!2sGoogleplex!5e0!3m2!1sen!2sus!4v1620850517007!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

    <br>

    <button onclick="changeMap('https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12681.060028106946!2d-122.0842495!3d37.4219999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fbb3f0d3c5eb5%3A0x1b78b42d95c2b3c!2sGoogleplex!5e0!3m2!1sen!2sus!4v1620850517007!5m2!1sen!2sus')">Googleplex</button>

    <button onclick="changeMap('https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.131317117084!2d-122.0883434!3d37.3890856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fbb3e0c1b0a9f%3A0x6e1e7c285748f1e0!2sApple%20Park!5e0!3m2!1sen!2sus!4v1620850531914!5m2!1sen!2sus')">Apple Park</button>

 

    <script>

        function changeMap(mapSrc) {

            document.getElementById('mapFrame').src = mapSrc;

        }

    </script>

</body>

</html>

Assignment 9: Create a Photo Gallery with Lightbox Effect

Task: Design a photo gallery where images open in a lightbox effect when clicked.

Requirements:

  1. Use the <img> tag to display images in a gallery layout.
  2. Implement a lightbox effect using JavaScript or a CSS library (e.g., Lightbox2).
  3. Ensure the gallery is responsive.

Example Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Photo Gallery</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">

</head>

<body>

    <h1>Photo Gallery</h1>

 

    <a href="image1.jpg" data-lightbox="gallery" data-title="Image 1">

        <img src="thumbnail1.jpg" alt="Thumbnail 1" width="200">

    </a>

    <a href="image2.jpg" data-lightbox="gallery" data-title="Image 2">

        <img src="thumbnail2.jpg" alt="Thumbnail 2" width="200">

    </a>

    <a href="image3.jpg" data-lightbox="gallery" data-title="Image 3">

        <img src="thumbnail3.jpg" alt="Thumbnail 3" width="200">

    </a>

 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.min.js"></script>

</body>

</html>

Assignment 10: Implement a Video Background

Task: Create a web page with a full-screen video background and overlay text.

Requirements:

  1. Use the <video> tag to set a video as the background.
  2. Add overlay text or content on top of the video.
  3. Ensure the video covers the entire background and scales properly.

Example Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Video Background</title>

    <style>

        body, html {

            margin: 0;

            padding: 0;

            height: 100%;

            overflow: hidden;

        }

        .video-background {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            object-fit: cover;

            z-index: -1;

        }

        .content {

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            color: white;

            text-align: center;

            font-size: 2em;

        }

    </style>

</head>

<body>

    <video class="video-background" autoplay muted loop>

        <source src="background-video.mp4" type="video/mp4">

        Your browser does not support the video tag.

    </video>

 

    <div class="content">

        <h1>Welcome to My Website</h1>

        <p>Your Tagline Here</p>

    </div>

</body>

</html>

 

Tags

You Might Like

Show more
assignments

Post a Comment

0Comments

Post a Comment (0)
Share to other apps
Copy Post link