Scribd
Upload
23 views2 pages

Practical No 14

This document outlines a practical exercise for creating a webpage that supports embedded video streaming using HTML5. It details the step-by-step process of setting up the HTML structure and embedding a video stream via the <iframe> tag, specifically from platforms like YouTube. The exercise emphasizes the importance of integrating dynamic video content to enhance user engagement on media-rich websites.

Uploaded by

adityapandji1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views2 pages

Practical No 14

This document outlines a practical exercise for creating a webpage that supports embedded video streaming using HTML5. It details the step-by-step process of setting up the HTML structure and embedding a video stream via the <iframe> tag, specifically from platforms like YouTube. The exercise emphasizes the importance of integrating dynamic video content to enhance user engagement on media-rich websites.

Uploaded by

adityapandji1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Practical No.

14
Embed Video Streaming on Web Page.
Aim: Develop a webpage for embedded video streaming using professional
HTML5 editor.
Objective:
In this practical, we will create a webpage that supports embedded video streaming using HTML5. By
embedding a live video stream or an external video service (like YouTube), we can integrate dynamic video
content into the webpage. This approach is crucial for building media-rich websites that offer real-time
content to users.
Step-by-Step Process Tools:

 HTML5 Editor: Brackets, Sublime Text, or Visual Studio Code

1. Setting Up the HTML Structur

First, define the basic structure of the webpage. We will embed a video stream using the
<iframe> tag, which allows us to stream videos from platforms like YouTube or other
<!DOCTYPE html>
video
<html hosting services..
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Streaming Page</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #e0e0e0;
}
.video-container {
max-width: 900px;
width: 100%;
text-align: center;
}
iframe {
width: 100%;
height: 500px;
border: none;
}
</style>
</head>
<body>
<div class="video-container">
<h1>Live Video Streaming</h1>
<!-- Embedded video stream from YouTube -->
<iframe src="https://www.youtube.com/embed/your-video-id" allowfullscreen></iframe>
</div>
</body>
</html>
2. Embedding a Video Stream

Replace the "your-video-id" in the src attribute with the actual video ID from
YouTube or any other video streaming platform. You can find this ID in the video’s share
URL (e.g., for https://www.youtube.com/watch?v=abc123, the ID is abc123).

<iframe src="https://www.youtube.com/embed/abc123" allowfullscreen></iframe>

If you are embedding a live video stream from another service, you can modify the src
accordingly.

Conclusion:
In this practical, we developed a webpage that allows embedded video streaming using
HTML5. By using the <iframe> tag to embed videos from platforms like YouTube, we
learned how to bring live or recorded streams directly to users. This skill is critical for
developing websites that support live video content, enhancing user engagement and
interaction.

You might also like