ONLINE VIDEO WATCHING PLATFORM

A MINI PROJECT REPORT

Submitted by

MURALIDHARAN M (621719104025)

in partial fulfillment for the award of the degree

of

BACHELOR OF ENGINEERING
in

COMPUTER SCIENCE AND ENGINEERING

MUTHAYAMMAL COLLEGE OF ENGINEERING

RASIPURAM

ANNA UNIVERSITY: CHENNAI 600 025

JUNE 2022

1
 BONAFIDE CERTIFICATE

Certified that this project report “ONLINE VIDEO WATCHING PLATFORM” is the
bonafide work Of “ MURALIDHARAN M(621719104025) ” who carried out project
work under my supervision.

SIGNATURE SIGNATURE

Dr. C.Suganthi, M.E.,Ph.D., Mr D.Jotheeswaran, M.Tech.,

HEAD OF THE DEPARTMENT SUPERVISOR

Assistant Professor

Department of Computer Science and Department of Computer Science and

Engineering, Engineering,

Muthayammal College of Engineering, Muthayammal College of Engineering,

Rasipuram. Rasipuram.

Submitted for Anna University Project Viva Voce held on .

Internal Examiner External Examiner

2
 DECLARATION
We affirm that the project work titled “ONLINE VIDEO WATCHING PLATFORM”
being submitted in partial fulfillment for the award of B.E.,(Computer Science and
Engineering) is the original carried out by us. It has not formed the part of any other
project work submitted for award of any degree, either in this or any other University.

(Signature of the candidate)

MURALIDHARAN M (621719104025)

I certify that the declaration made above by the candidates is true to the best of my
knowledge and belief.

(Signature of the Guide)

Mr D.Jotheeswaran, M.Tech.,
Assistant Professor,
Department of Computer Science
and Engineering,
Muthayammal College of Engineering,

Rasipuram-637 408.

3
 ACKNOWLEDGEMENT

First of all, we would like to thank the Almighty for blessings and our parents for their moral
support given to us to complete our project successfully.

Our hearty thanks to Shri R. Kandasamy, Chairman, Muthayammal Educational Trust &
Research Foundation.

We express our hearty thanks to Dr. K.Gunasekaran, Ph.D.,F.I.E., Secretary and Managing
Trustee for providing the necessary facilities.

We would also extend our deep gratitude and thanks to Dr. P.Venugopal, Ph.D., Principal of
Muthayammal College of Engineering for his kind support and guidance.

We extend our deep pleasure and sincere thanks to Dr. C.Suganthi, Ph.D., Head of the
Department of Computer Science and Engineering for his guidance and kind co-operation.

We wish to extend our sincere thanks to Mr D.Jotheeswaran, M.Tech., Assistant Professor

Computer science of Engineering for his guidance to complete the project.

We express our heartful gratitude and sincere thanks to Mr D.Jotheeswaran, M.Tech., project
coordinator for his valuable support.

4
 TABLE OF CONTENTS

CHAPTER. NO TITLE PAGE .NO

ABSTRACT 1

1 INTRODUCTION 2

1.1 Objective 2

1.2 Problem Definition 3

1.3 Literature Review ……………………………….....3

1.4 Features of Online video watching platform 4

2 SYSTEM ANALYSIS 5

2.1 Existing system 5

2.2 Proposed system 5

3 SYSTEM SPECIFICATION 6

3.1 Hardware Requirements 6

3.2 Software Requirements 6

4 SYSTEM DESIGN 7

4.1 Use Case Diagram 7

4.2 Data Flow Diagram 8

5 SYSTEM TESTING 9

5.1 Experimental Result/ Output 9

5.1.1 Online video watching platform 9

5
 5.1.2Login into Online video watching platform…...10

5.1.3Accessing Online video watching platform…....11

6 ADVANTAGES 12

7 SYSTEM DEVELOPMENT 13

7.1 User Login Module 13

7.2 Homepage / Video Module 13

7.3 Ad less Module 13

7.4 Download Module 13

8 OBJECTIVES AND GOALS 14

8.1 OBJECTIVES OF THE NEW SYSTEM 14

8.2 OBJECTIVES OF THE DESIGN 15

9 CONCLUSION AND FUTURE ENHANCEMENT

16 9.1 CONCLUSION 16

9.2 FUTURE ENHANCEMENT 16

10 APPENDIX 1 SOURCE CODE 17

11 APPENDIX 2 SCREEN SHOTS 23

12 APPENDIX 3 REFERENCES 25

6
 ABSTRACT

In this Modern World, Internet administrations and mobiles have turned into an
inseparable piece of everyday life. In this application to easy way to generate the random
password to the user. Yet, tragically, the specialist co-ops of power are as yet utilizing the
traditional strategies for getting data on vitality devoured by the clients, which is obsolete,
wasteful and tedious one.

Streaming video service offers a convenient and flexible way of watching online videos,
through which users could play the video files simultaneously when the files are being
delivered from the server. Many streaming media websites such as YouTube and MSN
video provide millions of online streaming videos. This gains online streaming video
growing popularity among Internet users.

Online video watching platform is a project that is created for users to saw videos online . It
is website that shows videos on some topics . We can log in to that website and we can
access the videos on it . But the video uploading was limited . Users can not able to upload
video . It may be used for the online webinars and the course which was learn through
online mode.

1
 CHAPTER 1

INTRODUCTION

Online video watching platform is a project that is created for users to saw videos
online . It is website that shows videos on some topics . We can log in to that website and
we can access the videos on it . But the video uploading was limited . Users can not able
to upload video . It may be used for the online webinars . Streaming video service offers a
convenient and flexible way of watching online videos, through which users could play
the video files simultaneously when the files are being delivered from the server. Many
streaming media websites such as YouTube and MSN video provide millions of online
streaming videos. This gains online streaming video growing popularity among Internet
users.

1.1 OBJECTIVE

The online video watching platform is created for the purpose which can be used for
self learning purpose . There are number of websites in online but most of the website
contains too much ad’s .

Online video watching platform is a project that is created for users to saw videos online .
It is website that shows videos on some topics . We can log in to that website and we can
access the videos on it . But the video uploading was limited . Users can not able to
upload video . It may be used for the online webinars .

2
1.2 PROBLEM DEFINITION

There are number of Online video watching platforms available in world. But the
main problem of those websites are that website push too much of ad’s during the time
of learning something . It was very irritating and also distracting their mind. So the
problem is advertisement on the websites which may lead children who learn through
online .

1.3 LITERATIVE REVIEW

A literature survey or a literature review in a project report is that section which shows
the various analyses and research made in the field of your interest and the results already
published, taking into account the various parameters of the project and the extent of the
project.

OVERVIEW OF ONLIE VIDEO WATCHING PLATFORM

This Online video watching platform is designed to watch random videos with the
topics without any Advertisements. In this website , you can watch n number of videos
which was uploaded with the topic like JAVA , HTML , JS etc... Then you can log in into
your website . The User Interface is very simple so user can easily access the website .
The online video watching platform is a simple project developed using HTML ,CSS and
Java script .

3
1.4 FEATURE OF ONLINE VIDEO WATCHING PLATFORM

1. The User Interface is very simple so user can easily access the website for long
time .
2. In this website , you can watch n number of videos which was uploaded with the
topic like JAVA , HTML , JS etc...
3. It is designed to watch random videos with the topics without any Advertisements .
4. It has a clean UI which helps users easy to navigate the way of what they want .
5. It does not contains and advertisements so that you can access without distraction
while learning the course.

4
 CHAPTER 2
SYSTEM ANALYSIS

2.1 EXISTING SYSTEM

Already there are many websites on the internet . The main problem is that those
websites are mostly for commercial use . So they gave most priority to push ad’s on their
website . Ad’s are helpful on sometimes but it may be distracting while we study on that
website . We can use adblocker to control pop up ad’s but we can not control ad’s on the
video .

2.2 PROPOSED SYSTEM

The Ultimate Goal of us is to create a website that looks minimalistic with clean User
Interface without any pushed ad’s . The 99% ad’s on the site would be controlled by the
users and the remaining 1% controlled by the team which is to control the ad’s like
gambling games , Investment related ad’s , Crypto ad’s and some unwanted ad’s which is
not by a trustable company or Groups and fake ad’s as like as the famous brand’s
products. .

5
 CHAPTER 3
SYSTEM REQUIREMENTS

3.1 HARDWARE REQUIREMENTS

Intel Pentium or AMD A4 or Higher version

System that support Windows 10 or Higher

RAM – Minimum 2 GB

3.2 SOFTWARE REQUIREMENT

Operating System – Windows10

Visual studio

Web Technology –HTML

6
 CHAPTER 4
SYSTEM DESIGN
4.1 USE CASE DIAGRAM

Fig4.1.Use Case Diagram for Online video watching platform

In this Use Case diagram, the actors and the use cases of online video watching platform

are describe the form of the diagram, in have the actors included the person(user) and the

server and in here the use cases search the video to displayed the result to them .

7
4.2 DATA FLOW DIAGRAM

Also known as DFD, Data flow diagrams are used to graphically represent the flow of
data in a business information system. DFD describes the processes that are involved in
Also known as DFD, Data flow diagrams are used to graphically represent the flow of data
in a business information system. DFD describes the processes that are involved in a
system to transfer data from the input to the file storage and reports generation. In the
dataflow diagram which describe the flow of the processes.

8
 CHAPTER 5
SYSTEM TESTING
5.1 EXPERIMENTAL RESULTS/OUTPUTS

In this chapter the experimental result and the output of the system is described. In this
the output of the project is view on the basics of its output panel display and the each
figure process is described below ,it gives the clear view about the project and its
functions.

ONLINE VIDEO WATCHING PLATFORM

9
In this Fig 5.1.1 the initial layout of the Online video watching platform is described, in this
layout consists of input to enter the password , and then login into the website . After
clicking the login button it redirected to the other homepage of the website .

Fig 5.1.2 Input for Random password generator

In the Fig 5.1.2 the homepage of the website was shown . Here the user can access the
website through the menu bar on the left corner . Otherwise the user also able to see the
videos on the Home page to know about the User Interface .

10
 Fig 5.1.3 Menu of the Website

Fig 5.1.4 About us

In this Fig 5.1.3 the layout of the Menu bar in the website which is used to navigate the topic
you want to learn .This Menu bar is displayed at the left side of the browser like on the in Fig
5.1.3.On the image 5.1.4 it shows the details to give feedback or to contact admin according
to any issues.

11
 CHAPTER 6
ADVANTAGES

● This Online video watching platform is designed to watch random videos with the topics
without any Advertisements. In this website , you can watch n number of videos which
was uploaded with the topic like JAVA , HTML , JS etc... Then you can log in into your
website .The User Interface is very simple so user can easily access the website . The
online video watching platform is a simple project developed using HTML ,CSS and
Javascript . User friendly, secure and save time.

● The User Interface is very simple so user can easily access the website .
● In this website , you can watch n number of videos which was uploaded with the topic
like JAVA , HTML , JS etc...
● It is designed to watch random videos with the topics without any Advertisements .
● It has a clean UI which helps users easy to navigate the way of what they want .
● It does not contains and advertisements so that you can access without distraction while
learning the course.

12
 CHAPTER 7
SYSTEM DEVELOPMENT

7.1 User Login Module

If the user wants to learn or watch the videos on the website they should

login into website using mail id and password .

7.2 Video Surfing Module

After login into the website user can access all the features on the website

user can watch videos by topics using the menu bar in left corner .

7.3 Ad’s Less Module

In our website users are not pushed by any ad’s or any promotions .

Because learning through online is not easy compared to learning through

book . So ad’s would not spoil your mindset.

7.4 Download Module

User can download video if they want to learn a specific topic when he is

out of internet .

13
 CHAPTER 8
OBJECTIVES AND GOALS

8.1 Objective of the new system

✔ User friendly interface

✔ To providing good performance

✔ Providing computing capability, running programs and producing results.

✔ To eliminate the error due to manual correction

✔ On the result of the objectives of new are to provide application services to the

management.

✔ Mnemonic hashes, which reversibly convert random strings into more

memorable passwords, can substantially improve the ease of memorization.

✔ Use of ad’s less experience to the users to the learners to make their learning

time useful and far from distractions.

14
8.2 Objectives of the design

The main objective of this study is to design and develop platform that will help to :

✔ Easy to learn the topics without distractions

✔ Learn how to use online life in useful way

✔ Unfortunately, most most of the websites contains too much of advertisements

✔ Learn urself is a platform without any ad’s

✔ Simple online video watching platform

✔ The online video watching platform is used to learn some topics without

advertisements.

15
 CHAPTER 9
CONCLUSION AND FUTURE ENHANCEMENT

9.1 CONCLUSION

This online video watching platform is created for the purpose which can be used for
self learning purpose . There are number of websites in online but most of the website
contains too much ad’s .

Online video watching platform is a project that is created for users to saw videos
online . It is website that shows videos on some topics . We can log in to that website
and we can access the videos on it . But the video uploading was limited . Users can
not able to upload video . It may be used for the online webinars .

9.2 FUTURE ENHANCEMENT

The objective of this project is to design a advertisement less learning platform for the
people to easily learn what they want . This website is now on it’s scratch so on based
on it’s usage the website were regularly updated by user Interface and also the content
was regularly updated by it’s latest technology.

16
 APPENDIX 1
SAMPLE SOURCE CODE

</head>
<body>
<header>
<nav>
<div class = "logo" <h3 style="color:white;"><span style="font-size:30px;cursor:pointer"
onclick="openNav()">&#9776; </span>
LEARN URSELF™</h3></div>

<div class = "mainmenu">

<a href="Website1.html"><h3>HOME</h3></a>
<a href="Aboutus.html"><h3>ABOUT US</h3> </a>
<a href="Contactus.html"><h3>CONTACT US</h3></a>

</div>
</nav>

<div class = "change_text"><b>WATCH YOUR COURSE</b></div>

<div class="VDO">
<video width="320" height="240" controls>
<source
src="image/Introduction to Java Programming.mp4" type="video/mp4">
</video>
<h2>JAVA INTRODUCTION</h2>

</div>
<div class="VDO">
<video width="320" height="240" controls>
<source src="image/HTML In 10 Minutes _ HTML Tutorial For Beginners _ HTML
Basics For Beginners _ Simplilearn.mp4" type="video/mp4">
</video>
<h2>HTML INTRODUCTION</h2>

</div>
<div class="VDO">
<video width="320" height="240" controls>
17
 <source src="image/Introduction to JavaScript.mp4" type="video/mp4">
</video>
<h2>JAVASCRIPT INTRODUCTION</h2>

</div>

<div id="mySidenav" class="sidenav">

<a href="javascript:void(0)" class="closebtn"
onclick="closeNav()">&times;</a>
<a href="JAVA.html">JAVA</a>
<a href="HTML.html">HTML</a>
<a href="JAVASCRIPT.html">JAVASCRIPT</a>
</div>

<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
<footer>

<div class ="OurGoal"><h3> OUR GOAL :) </h3></div>

<div class ="OurGoal1">
<h3><p>Our Main Goal is to make the learnig in a peaceful way without any
distractions</p> </h3>
<h4>Copyrights@learnurself2022.com</h4>
</div>
</footer>

</header>
</body>
</html>

18
<style>
*{
margin:0; padding:0;
}
header{
width: 100%; height: 100vh;
background-color: white;
background-repeat: no-repeat;
background-size: cover;
}
nav{
width: 100%; height: 13vh;
background: black;
display: flex; justify-content: space-between;
align-items: center;
}
nav .mainmenu
{

font-family:Courier New, Courier,' monospace';

width: 25%;
display: flex; justify-content: space-around;
}
.mainmenu
{
color: antiquewhite;
}
.mainmenu a{

font-family:'Segoe UI';
color: #f2f2f2;
text-align: center;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
font-size: 10px;

19
}

.logo{
margin: 10px; padding: 10px;
font-size: x-large;
font-family: 'Gill Sans MT';
font-weight: 2000;
letter-spacing: 3px; font-weight: 200;

}
.change_text
{
color:whitesmoke;
margin: 0px; padding: 10px;
text-align: center;
font-family:'Segoe UI' ;
letter-spacing: 3px;
background-color: #F6728C;
}
.VDO{

margin: 20px;padding: 20;

margin-left: 20;
padding-left: 5ch;
padding-top: 5ch;
padding-bottom: 5ch;
padding-right: 5ch;
display:flex;justify-content: space-around;
box-sizing:border-box;
align-items: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
list-style-position: inside;
letter-spacing:1ch;
}
footer{

width: 100%;
bottom: 0px;

flex-shrink: 0;
20
 position:-webkit-sticky;
background-color: #1F2022;
color: #fff;

padding-top:10px;
padding-bottom:40px;
text-align:left;
}
.OurGoal{

margin: 30px; padding: 10px;

font-size:large;
font-family: 'Gill Sans MT';

letter-spacing: 3px; font-weight: 100;

}
.OurGoal1{
margin: 30px; padding: 10px;
font: size 20px;;
font-family:Segoe UI, Tahoma, 'Geneva', Verdana, sans-serif;

letter-spacing: 2px; font: weight 10px;;

body {
font-family: "Lato", sans-serif;
}

.sidenav {
margin: 0;
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
21
}

.sidenav a {
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
letter-spacing: 2px;
display: block;
transition: 0.3s;
}

.sidenav a:hover {
color: #f1f1f1;
}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

@media screen and (max-height: 450px) {

.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

</style>

22
APPENDIX-2
SCREENSHOT
S

23
24
 APPENDIX-3

REFERENCES

● https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav

● https://www.w3schools.com/howto/howto_css_menu_icon.asp

● https://www.w3schools.com/howto/howto_css_icon_bar.asp

● https://www.w3schools.com/howto/howto_css_navbar_icon.asp

● https://www.w3schools.com/howto/howto_js_sidenav.asp

● https://hackr.io/blog/html-projects

● https://www.website.com/website-builder-and-web-design/creating-the-right-site-m

enu-bar-for-your-website?source=SC&country=IN

● https://www.sitepoint.com/community/t/adding-space-between-iframe/344437

25