DECLARATION OF ORIGINALITY

(1)

Amazon Web Services(AWS) Video Website Hosting BY

LEE KUAN KIN

A REPORT SUBMITTED TO

Universiti Tunku Abdul Rahman in partial fulfillment of the requirements

for the degree of

BACHELOR OF INFORMATION TECHNOLOGY (HONOURS) COMPUTER ENGINEERING

Faculty of Information and Communication Technology (Kampar Campus)

JAN 2021

(2)

UNIVERSITI TUNKU ABDUL RAHMAN

REPORT STATUS DECLARATION FORM

Title: Amazon Web Services(AWS) Video Website Hosting______________

__________________________________________________________

Academic Session: ___Jan 2021__________

I ____________LEE KUAN KIN_________________________________

(CAPITAL LETTER)

declare that I allow this Final Year Project Report to be kept in

Universiti Tunku Abdul Rahman Library subject to the regulations as follows:

1. The dissertation is a property of the Library.

2. The Library is allowed to make copies of this dissertation for academic purposes.

Verified by,

_________________________

(Author’s signature) (Supervisor’s signature)

Address:

40, Jalan Bukit Permai 2/1, Ooi Chek Yee

Taman Bukit Permai, _________________________

56100 Cheras Selangor. Supervisor’s name

Date: __16/4/2021___________________ Date: 16/04/2021_________________

(3)

Amazon Web Services(AWS) Video Website Hosting BY

LEE KUAN KIN

A REPORT SUBMITTED TO

Universiti Tunku Abdul Rahman in partial fulfillment of the requirements

for the degree of

BACHELOR OF INFORMATION TECHNOLOGY (HONOURS) COMPUTER ENGINEERING

Faculty of Information and Communication Technology (Kampar Campus)

JAN 2021

(4)

1

DECLARATION OF ORIGINALITY

I declare that this report entitled “Amazon Web Services(AWS) Video Website Hosting” is my own work except as cited in the references. The report has not been accepted for any degree and is not being submitted concurrently in candidature for any degree or other award.

Signature : ______________ ___________

Name : ________Lee Kuan Kin_________________

Date : _____16/4/2021____________________

(5)

2

Abstract

These Days video websites are very popular, as many internet users enjoy their time they have spent over there. But many of the video websites still have some flaws. The first notably flaw is confused and unorganized user interface, a lot of websites lose their users due to this factor.

Secondly, there are some video websites does not provide a good filter functions, it will cause users dissatisfaction. Thirdly, many of the video websites has no download functions embedded inside the website for them to download a video, the users usually have to go find a third-party tool online to do it.

Cloud computing service is very popular as well, a lot of website hosting service has now turn to cloud web hosting to use its benefit to attract users to use their services. Amazon web service is a division of Amazon to provide cloud computing services to people and company. One of the service they provide is static website hosting.

In this project, it will discuss how to develop a video website that will tackle the problems stated above to improve the video website. In order to tackle the problems stated above, this project will develop a video website that has user friendly interface, better filter function and download function. Beside that, the video website will be hosted on Amazon web service(AWS). This is due to AWS is very useful when it come to hosting static websites, it is also cheap when compare to other website hosting available in the internet.

(6)

3

Table of Contents

1. DECLARATION OF ORIGINALITY……….……….1

2. Abstract……….………….2

3. Table of Contents………..3

4. Chapter 1: Introduction……….…….4~10 a. 1.1 Project background………..4~5 b. 1.2 Problem Statement and Motivation……….5~6 c. 1.3 Project Scope………..…….6

d. 1.4 Project Objective………..…….6

e. 1.5 Proposed approach……….6

f. 1.6 Hightlight of what has been achieved……… 7~9 g. 1.7 Report Organization………10

5. Chapter 2: Literature Review………..….11~19 a. Tudou………..….11~14 b. Niconico………..….15~17 c. YouTube………..….18~19 6. Chapter 3: System design………..….19~26 a. 3.1 Flowchart of download function………23

b. 3.2 Flowchart of search/filter function ………24

c. 3.3 Flowchart of Commenting function ………25

d. 3.4 Flowchart of favourite function ………26

7. Chapter 4: Download function………27

8. Chapter 5: Search/Filter function………28

9. Chapter 6: Commenting function………29

10. Chapter 7: Conclusion………30

a. 7.1 Project Review, Discussions and Conclusions……….30

b. 7.2 Contribution and Innovation……….30

c. 7.3 Future work………30

11. LIST OF ABBREVATION……….31

12. LIST OF FIGURE……….32~33 13. Reference……….…….34 14. Appendices……….…….35~313

(7)

4

15. Poster……….…….314

16. Plagiarism check result……….…….315~316 17. Weekly Report……….317~328 18. FYP 2 Checklist………329

(8)

5

Chapter 1: Introduction 1.1 Project background

Website hosting is a kind of service that provide storage space to certain individual or organizations for them to able to store and host their own websites that is accessible through the World Wide Web(WWW)( Skrba, 2020) in that storage space. Back in 1991, hosting a website would require individual or organizations to have their own server to host the website first, but today they are just a few clicks away from having their website up and running by able to find a web host server that provide storage space for their website(Ribeiro, 2012). Video website is simply a website that allow users to watch or stream a video that is available on the website.

At the present time, Internet has been growing strongly, according to Statista (2020), as of January 2020 global internet users has reached the number of 4.54 billion, which consist of 59 percent of the worldwide population!

Figure 1 Bar chart of Global digital population as of January 2020(Statista, 2020)

(9)

6

According to Malaysian Communications and Multimedia Commission(MCMC)’s survey(2018) which done in 2018, a 4.2 million increased of internet users from 24.5 million in 2016 to 28.7 million in 2018 in Malaysia. This increasing number of internet users has shown that more and more persons has been able to gain access to internet in Malaysia. From the

survey(Malaysian Communications and Multimedia Commission, 2018), we are also know that Malaysia internet users enjoy watching and/or download video in internet, as the survey has shown that 77.6% of internet users have spent their time watching and/or download video online with an increment of 7.6% from 70% in 2016, it is the fourth popular activity among internet users. Thus, video is important in the internet as more and more internet users enjoy watching them.

Figure 2 Online activities (Malaysian Communications and Multimedia Commission, 2018) As a result, Video websites are becoming more and more popular among users as they are the main platform to watch video. Due to this, YouTube, a famous video website is at the second place of Alexa’s (2020) top sites list of Both Global and Malaysia. There are a lot of video websites too besides YouTube. They also help increase the number of internet users watching and/or download video online. But as everything is imperfect, all those websites have their pros and cons.

1.2 • Problem Statement and Motivation

First of all, there are some video website has disorganized and confused user interface. This tend to lead to bad user experiences, as they are unable to browse the website as they are confused by the disorganized user interface. It has to be taken care of to make sure users will have a good time on the website. Secondly, the filter and categories of videos of some videos websites is not

(10)

7

good enough as they have too less diversity for user to look for the exact videos they want, or simply just browsing through the categories they have interests on to find the videos they like to watch. This is a con due to the fact users are not able to do what they want quickly, this will cause inconvenience to users, worsening their experience on the website, and in the worst case, users will lost interest on the website due to bad experience they went through on the website, and thus the website will be losing their users. To make sure this will not happen, video websites must have a good filtering and categories of videos to enhance users experience.

Thirdly, even though download video online is the fourth popular activity among internet users in Malaysia, but a lot of video websites actually do not implement such function in their website. So how did the user did it if there is no such function in the website? They did it by searching for third party tool or website that provide the function that help the users by

downloading the video for them, all the user has to provide is the link to the specific video. But this caused inconvenient to users as they have to go through troubles to download video, and no one can guarantee the third-party website or tool will not cause problem to the user or is not a

malicious website or tool that will harm the user. In order to ensure these will not happen to users, it is suggested to tackle this problem to ensure user will feel comfortable when they are hoping to download one of the videos in the website.

1.3 Project Scope

The scope of this project is to develop a video hosting website that will host a lot of videos in it and everyone can come visit the website for a good time by watching the videos in the

website. Besides, users can download videos as many times as they want, as it is free of charge.

1.4 Project Objective

The main objective of this project is to develop a video hosting website using Amazon Web Service(AWS) and deliver the video hosting website in the end of the project. Besides, the other objective is to develop a video hosting website that is able to eliminate or at minimize the weakness in other video hosting websites stated in above.

1.5 Proposed approach

Amazon S3 in Amazon Web Service(AWS) is proposed to be used to host the website.

HTML, CSS, JavaScript and Bootstrap are proposed to be used to solve the problem mentioned.

Besides, there is a newly added function which is the comment function will be using RemarkBox to achieve.

(11)

8

1.6 Highlight of what has been achieved

Figure 3 is the homepage that I have made for the video website. Developing this involves HTML language, CSS and bootstrap to make it. As it is shown, it is able to display a set of videos that belong to a category clearly and without mixing it with the other category. It has a simple, clean and organized interface so that user will not be confused on how to do the action they desired.

Figure 3 Homepage of the video website

In figure 4 and figure 5, they are the webpage for one of the categories pages of the video website and search page of the video website respectively. I have also applied HTML language, CSS and bootstrap to make them. With using these methods, I am able to make the interface clean, simple and organized.

The users able to search for the video they want by typing related information in search box or choosing the option to filter out the videos they do not want.

(12)

9

Figure 4 webpage of Entertainment category of the video website

Figure 5 webpage of search page of the video website

In the figure 6 and figure 7, both are part of the video page of the website. Users are able to change the quality and the format of the video. They can also download the video if they want by clicking on the download button and also favouriting the video by clicking the favourite icon. Beside the video, it is showing a list of videos recommend to the users to watch. There is also a description section to allow user to briefly know what the video is about. There is also a comment section to allow user to comment too.

Figure 6 video page of the video website

(13)

10

Figure 7 video page of the video website

Figure 8 show the list of videos that has been favourited by the user while figure 9 show the history of the videos user has watched.

Figure 8 Favourite page

Figure 9 History page

(14)

11

1.7 Report Organization

In this report, it has included 7 main chapters: Introduction, Literature Review, System Design, Download function, Search/Filter function, Commenting function, and Conclusion.

In chapter 1, it is mainly to brief the reader on what this project is about, what are the problem statements, objectives, proposed approach and the highlight of what has been achieved.

In chapter 2, it is mainly discussing about what has others did on video website, what they did good and what they did not.

In chapter 3, it is about the system design of this project. Here is discussing about the details of the development of the project.

In chapter 4, 5 and 6 will be dive into more details that are mentioned in the chapter 3 to discuss about the methodology and tools, requirements, specification and implementation and testing of the functions in chapter 3.

In chapter 7, the conclusion of this project will be made.

(15)

12

Chapter 2: Literature Review 1. Tudou

Tudou is a Chinese video website, one of the famous video websites in China. First of all, Tudou has a simple and organized interface. Users are able to navigate the websites with ease as where to go to do their desired action is clearly stated. For example, in the area that is highlighted by the red bar(figure 10), it has several buttons which are several categories, the second button on the left is recommendation, the first button on the right is gaming, the second button on the right is music and other buttons have other categories except for the first button on the left is homepage. These buttons is for user to click on to go to their desired category page, so that they can browse videos by category. If they wish to browse gaming category, by clicking the button will bring them to the gaming category page(figure 11).

Figure 10 Homepage pf Tudou

Figure 11 Gaming category page of Tudou

(16)

13

Secondly, there is several categories panels like Daily life, Entertainment, Music, Gaming and others located in homepage as well, they are showing some recommended videos from each category for users to choose(figure 12 and 13), figure 12 and figure 13 shown the webpage that is zoom out, in order to get a better look on the website. This provide a quick way for users that wish to check out all categories in one page, and if the user grown interest on a category after saw some of the thumbnail of those video in the specific category panel, the user can click on more as highlighted by red bar in figure 14 to check out more

videos in that category.

Figure 12 Category section at Homepage(Zoom out)

Figure 13 Category section at Homepage(Zoom out)

(17)

14

Figure 14 More button at top right of a category section at Homepage

But there is a downside of this which is that every category panel is large, the screen barely can fit one panel into it as shown in figure 15, few portions in the button side of the panel are not in the screen. To solve this problem, the category panel shall be resized to a reasonable size that will catch the user’s attention while not being a nuisance to the users.

Figure 15 Category section at Homepage(no zoom out)

Thirdly, the search function of the website will display some recommendation to the users according to the user input as shown in figure 16, this is a good function due to this can aid users in finding the videos they are looking for.

Figure 16 Search bar at homepage giving recommendation based on user's input

(18)

15

The filter function is good too as the filter function offer a lot of choices like category, latest videos, length of video and other options to filter the result. But there is a problem with this search function, when the user click the search icon, it will lead the user to another different website to show the results as shown in figure 17, the users are being led to a website called Soku, which is not Tudou to see the results of the search. It could have cause confusion to the users as users do not expect the search function will lead them to another different website to show the results and leaving users in the lost as the website do not tell them about this beforehand. To tackle this problem, users should not be led to another different website when they are trying to search videos on the website, they should be made to stay at the same website when the website show them the result.

Figure 17 The website user is led to after click search

Their video webpage is clean and simple, easy to navigate. Although Tudou has a Download button, but users is not able to use it, as it is acting as a ads to ask users to install Tudou app in their phone due to the download function is only available in apps but not website. The users will feel cheated by Tudou as they thought Tudou website can download videos without involving third party, and this will worsen the user experience. I should solve this problem by implementing a button that will actually allow users to download videos in the website without having users depending on third party to do it.

Figure 18 video webpage of Tudou

(19)

16

2. Niconico

Niconico is one of the most Popular video website in Japan, its popularity has been increased oversea as well. First of all, as you can see in figure 19 and figure 20, Niconico has a disorganized and confused user interface. In figure 19, at the left side where Green bar is highlighted, it is a list of recommended videos, but at the same times, there are also a list of live videos besides them, it is actually also recommended videos, but users might get confused by this and mistaken that the list of live videos is not a list of recommended videos too. This is due to if you have noticed, you see the first live video in the second column is actually at the same row as the Label “Recommendation”, since it is not under it, users could think that they are not related, but then they will start to think then what is the second column?

There is nothing describing what is the second column are for, so the users will get confused on it as they do not know what they are. Besides, another reason users will think they are the different list of video is due to in figure 20, which is located just below figure 19, each of the column has a name, when users see these column, they might related it back to the part where the list of live videos, they will starting to think is it really another column based on what figure 19 shown? Thus, this make the users confused due to the inconsistent arrangement that lead to disorganized and confusing interface. Niconico arrangement is different from Tudou, but Tudou’s user interface is clear and organized. Tudou has every section labelled and organized them in a good way, allowing users know which section is which, but based on figure 12 and figure 13, unlike Niconico has left out few part unlabelled that will leave the users in confused. When a user is not able to understand the website navigation, they will mostly be at lost, and eventually not returning to the website. Thus an organized and clear

interface is important.

Figure 19 Top part of Homepage of Niconico

(20)

17

Figure 20 Middle part of Homepage of Niconico

Moreover, the placement of the ads is also questionable, in figure 19 they are put near their own logo, where user might click to refresh the website and it is at the top of the search bar, due to these two reasons, accidental click on the ads could happen, and this could lead to user’s frustration on they are not performing the action user want. In figure 21, the ads are at both up and right side of the live videos, some users could have mistaken the ads at right side is a video too. So to make sure user’s experience will not be affected by these factors, even ads need to be place at a good position,

instead of just plugging ads anywhere.

Figure 21 top part of Homepage of Niconico

Though its user interface is bad, but the search page has a nice function, at where the red bar highlighted, it let user choose how should the result be displayed, one row one video or one row three videos. Some users favour less information thus will choose the second option, while some prefer the first. But their search function and filter function need to be better.

(21)

18

Figure 22 Search result page of Niconico

Niconico is famous for one unique thing, which is the bullet screen comments, it is a kind of short comments scroll through the screen, allowing real time interaction between audience. But it does not allow long comment for discussion and niconico has no comment section except this. So a comment section should be added. Niconico has no download function for user, this should be added

to make thing more easy for them.

Figure 23 Video webpage of Niconico

(22)

19

3. YouTube

YouTube is the most popular website in the world. First of all, YouTube has a clear interface which is good for user to navigate.

Figure 24 Homepage of YouTube

But their filter function required some polishing, this is due to their filter function do have category filter. This make user cannot search a video by category or browse through a specific category. This needed to be solved to ensure users can found their videos faster and also let them feel at control.

Figure 25 Search result page of Youtube

YouTube video page is neatly arranged, and the video player is in the right size that will not be too insignificant and not too big to be a nuisance. But YouTube also has no download button for user to download video, user has to rely on third party too to

(23)

20

do that.

Figure 26 Video webpage of YouTube

(24)

21

Chapter 3 System Design

To host such website, the proposed technology is AWS. AWS has offer a lot of services to be used by their customer, among those service, two are chosen to be used in this project to host the video website. First of all, Amazon S3 will be used, as in this project, a static website is enough to make the video hosting website in this project

possible. Amazon S3 is one of the best option to use when a static website is desired, as it is able to deliver HTML, Images, Video and other files to the website visitor according to Amazon(2019, p.1). Amazon(n.d.) stated that in the name Amazon S3, S3 is abbreviation for Simple Storage Service, as the name suggested, it is a cloud storage that allow user to store their file in, so of course it can store the HTML file and other files to host a static website from S3. Amazon S3 is on pay-as-you-go basic too, if a scalable network is required, S3 is suitable, as it can help you save cost due to S3 is scalable, you do not have to buy a large volume at the start. Instead, you can pay for the least amount you need, then when you need more, you can scale the level up by paying more. By doing this, you are able to save cost, since you only have to pay for the space you have used in S3, instead of paying for both the space you have used and space that you have bought but has not been using it, the system will help you scale the storage up whenever you want, it is quite a low cost service.

The second service is Amazon CloudFront. Amazon CloudFront is a CDN, and so Amazon CloudFront is able to send content out with low latency and high data transfer rates(2019, p.14). If Amazon CloudFront is not used, the users might suffer from buffering when they are watching the video.

To develop the website, HTML language is a must to use to create the website.

HTML Language is one of the most important language when we are creating a website from the start. The tool used to write HTML language will be Microsoft Visual Studio.

Microsoft Visual Studio contains a lot of programming language inside it like C++ and HTML language, so it is very important as well when we are creating a website as we need it to write the HTML language. Besides that, CSS and JavaScript are also used to develop the website, CSS is required to develop a user friendly and clean interface, JavaScript is used to allow functional requirement can be met. To develop a user friendly and clean interface, I have also use Bootstrap to help me develop the website, it is able to help me develop a responsive website as well.

(25)

22

User’s requirement will be that user are visiting the website homepage, and then it could have few different developments. First, the user could have click on any videos on the homepage to go to that video’s webpage to watch or download the video. Second, the user could have click on the category button on navigation bar to show the type of

categories available, and then they can choose one of them to go to the respective category webpage to view what kind of videos are there in that category. Third, they can also click on the “more” button on the homepage to go to the respective category that they wish to visit.

System performance will be based on how friendly is the user interface towards users, is it at a level that are acceptable for the user to use? And also, how well are the category functions being able to help locate what the users are looking for to watch or download.

In this project, Google Chrome will be used to verify my coding is correct, and the output is the expected output from what I have wrote and design.

(26)

23

In the first block, there is the video website I have planned to develop in this project, it will have 3 main user operation, which is watch video, download video and filter video. It will let user to watch the video they found interesting and also, they can download that video for offline use, to find the video they are interested at, they can filter the video to narrow down the range. There will be other 2 user operations, which are favouriting video and commenting. Favouriting video allow user to bookmark the video they loved, while commenting allow users to leave their comments about the video or interact with the other users about the content of the video.

Video Website

User operations

Watch video

Download video

Filter video

Commenting Favourite video

(27)

24

3.1 Flowchart of download function

The download function starts with user click on the download button. Afterwards, it will perform the download with the current setting for the video.

Start

User click on download button to download

Get the current video, and its current quality and format

Perform the download with the information acquired

End

(28)

25

3.2 Flowchart of search/filter function

Users type in the search box and choose the filter options as they wish. Subsequently the website will filter the video that is not match with the information provided by the user, and then it will show the search result to the users.

Start

User type in the search box and choose the option

Filtering the video that is not match with the information

provided by user

Show search result

End

(29)

26

3.3 Flowchart of Commenting function

User type in their comment in the comment box in order to spread their opinion or interact with other users on the contents of the video. User type in their email in the email box so that they can get a notification if there are replies to the comment they left there. Pressing ‘save message’

button will send out the comment.

Start

User type in their comment in the comment box

User type in their email in the email box

User press ‘save message’ to send out the comment

End

(30)

27

3.4 Flowchart of favourite function

User click on the favourite button to save the video into their list of favourite videos. They can visit this list by going to the favourite page.

Start

User click the favourite button

Save the information of the video into local storage

Go to favourite page to see the list of video they have favourited

End

(31)

28

Chapter 4: Download function 4.1 Methodology and tools

<a> tag download attribute is used to implement the download function. This attribute will automatically perform the download process on the <a>tag href attribute when click on. To allow the quality and format of the video to be download, JavaScript is used to do some scripting on changing the information on the <a> tag href attribute to ensure the video is download using correct setting when either quality or format is changed through the options.

4.2 Requirement

The functional requirement for this function is it can allow user to download the video with the setting user currently chosen.

4.3 Specification

In the analysis, the download function needs to be analysed to make sure the working of the function is known clearly. The language and the tools to develop the function must be decided.

In the design phase, the flow of the download function must be designed properly in order to ensure it is simple and easy to follow. Afterwards, the code for such flow will be design and developed.

Verification plan is using Google Chrome to verify the function by doing the flow of the download function as designed.

4.4 Implementation and Testing

The function will be implemented in a JavaScript file and embedded in the HTML files that will be required it to perform the download function. The HTML code for the download button will be placed in the designated place in the HTML files that will required it.

The testing procedure will be as follow:

1. User click on a video link they want to download.

2. Upon arrived on the video page, User choose the setting for the video by choosing the quality and format.

3. User click on download button.

(32)

29

Chapter 5: Search/Filter function 5.1 Methodology and tools

<input> tag checkbox and text type is used to implement the search/filter function. These 2 types of <input>tag will take in the inputs the user input, and then filter out the videos that are not match with information inputted by the user, only show the one that are matched.

5.2 Requirement

The functional requirement for this function is it can allow user to search the video they are looking for more easily.

In the analysis, the search/filter function needs to be analysed to make sure the working of the function is known clearly. The language and the tools to develop the function must be decided.

In the design phase, the flow of the search/filter function must be designed properly in order to ensure it is simple and easy to follow. Afterwards, the code for such flow will be design and developed.

Verification plan is using Google Chrome to verify the function by doing the flow of the search/filter function as designed.

The function will be implemented in a JavaScript file and embedded in the HTML files that will be required it to perform the search/filter function. The code for the <input> tag will be placed in the designated place in the HTML files that will be performing the function.

1. User go to one of the category pages or the search page.

2. Upon arrived on the page, User input the information required to search the video they are looking for.

3. User press enter in the search box to display the results.

(33)

30

Chapter 6: Commenting function 6.1 Methodology and tools

This commenting function is using Remarkbox to realize. Remarkbox is free open source comment services to be used.

6.2 Requirement

The functional requirement for this function is it can allow user to comment their thought and interact with other users.

In the analysis, the commenting function needs to be analysed to make sure the working of the function is known clearly. The language and the tools to develop the function must be decided.

In the design phase, the flow of the commenting function must be designed properly in order to ensure it is simple and easy to follow. Afterwards, the code for such flow will be design and developed.

Verification plan is using Google Chrome to verify the function by doing the flow of the commenting function as designed.

The function will be implemented in a JavaScript file and embedded in the HTML files that will be required it to perform the search/filter function. The code for the comments section will be placed in the designated place in HTML files that will need the section.

1. User go to a video page.

2. Upon arrived on the page, user type in the comments in the comment box.

3. User type in their email address in the email address box.

4. User click ‘save message’ button.

(34)

31

Chapter 7: Conclusion 7.1 Project Review, Discussions and Conclusions

The main objective of this project is to develop a video hosting website using Amazon Web Service(AWS) and deliver the video hosting website in the end of the project is completed. This is proved by the link http://mylkkfypvideowebsite.s3-website-us-east-1.amazonaws.com/, which is a video website I developed and using AWS to host it. Besides, the other objective is to develop a video hosting website that is able to eliminate or at minimize the weakness in other video hosting websites stated in problem statement is also completed. This is proved by travelling through the link mentioned above, the website has a clean, organized user interface, user are able to download the video directly without relying on third-party, and user are able search and filter the videos out to easily look for the video they want. Favourite functions, history function and commenting function are also added to enhance the user experience in the website.

One of the problems encountered is during the time of finding a way to implement the commenting function, a lot of the solutions are required to pay to use, but in the end a cost free solution is found and used.

7.2 Contribution and Innovation

The contribution of this project is when this project is done, it is able to allow users to watch video online anytime anywhere, and the user can download it to watch it offline. The users can also watch videos without any limit and restriction on the content. They can also favourite the videos and check out their history of watched video. They are also able to comment on the video page to share their thought or interact with other users on the content of the video. The innovation of this project is it is able to allow users download video without a third party involved or making any payment to download the video.

7.3 Future work

While the project objectives are all achieved, this project can still be improved in the future.

First, the user interface can be adding some more decoration to increase the beauty of the interface.

Second, the “bullet screen” comment mentioned in chapter 2 can be implemented to make the user interaction between each other easier.

(35)

32

LIST OF ABBREVATION CDN – Contents Delivery Network AWS – Amazon Web Service S3 - Simple Storage Service

(36)

33

LIST OF FIGURE

Figure 1 Bar chart of Global digital population as of January 2020(Statista, 2020)………4 Figure 2 Online activities (Malaysian Communications and Multimedia Commission, 2018)….5 Figure 3 Homepage of the video website……….7

Figure 4 webpage of Entertainment category of the video website………8 Figure 5 webpage of search page of the video website………..8 Figure 6 video page of the video website………8 Figure 7 video page of the video website………9 Figure 8 Favourite page………..9 Figure 9 History page……….9 Figure 10 Homepage pf Tudou………11

Figure 11 Gaming category page of Tudou………11

Figure 12 Category section at Homepage(Zoom out)………12

Figure 13 Category section at Homepage(Zoom out)………12

Figure 14 More button at top right of a category section at Homepage………….………13 Figure 15 Category section at Homepage(no zoom out) ………..…13 Figure 16 Search bar at homepage giving recommendation based on user's input………13 Figure 17 The website user is led to after click search……….14

Figure 18 video webpage of Tudou……….14

Figure 19 Top part of Homepage of Niconico………..15 Figure 20 Middle part of Homepage of Niconico………..16 Figure 21 top part of Homepage of Niconico………..16 Figure 22 Search result page of Niconico………..17 Figure 23 Video webpage of Niconico………..17 Figure 24 Homepage of YouTube………..18

(37)

34

Figure 25 Search result page of Youtube……….18 Figure 26 Video webpage of YouTube……….19

(38)

35

Reference

Ricky Ribeiro.(2012) A History of Web Hosting [Infographic] Available from https://biztechmagazine.com/article/2012/02/history-web-hosting-infographic(Accessed 29 March 2020) Anya Skrba. (2020) The Best Web Hosting Services Learn How to Find Ideal Website Hosting for Your Needs Available from https://firstsiteguide.com/tools/hosting/ (Accessed 29 March 2020)

Statista (2020) Global digital population as of January 2020(in billions) Available from https://www.statista.com/statistics/617136/digital-population-worldwide/ (Accessed 30 March 2020) Malaysian Communications and Multimedia Commission (2018) Internet users survey 2018 Available from https://www.mcmc.gov.my/skmmgovmy/media/General/pdf/Internet-Users-Survey-2018.pdf (Accessed 1 April 2020)

Alexa (2018) The top 500 sites on the web Available from https://www.alexa.com/topsites (Accessed 1 April 2020)

Alexa (2018) Top Sites in Malaysia Available from

https://www.alexa.com/topsites/countries/MY(Accessed 1 April 2020)

Amazon (n.d.) Amazon CloudFront Fast, highly secure and programmable content delivery network (CDN) Available from https://aws.amazon.com/cloudfront/ (Accessed 17 April 2020)

Amazon (n.d.) Web Hosting Available from https://aws.amazon.com/websites/ (Accessed 17 April 2020)

Amazon (n.d.) What is Amazon S3? Available from

https://docs.aws.amazon.com/AmazonS3/latest/dev/Welcome.html (Accessed 17 April 2020)

Amazon (2019) Hosting Static Websites on AWS Available from

http://d0.awsstatic.com/whitepapers/Building%20Static%20Websites%20on%20AWS.pdf (Accessed 17 April 2020)

Bootstrap (n.d.) Introduction Bootstrap Available from

https://getbootstrap.com/docs/4.0/getting-started/introduction/ (Accessed 29 July 2020)

Remarkbox (2021). Hosted Comments Service | Remarkbox. [online] Available from https://www.remarkbox.com (Accessed 5 March 2021)

(39)

36

Appendices mainpage.html

<!DOCTYPE html>

<html>

<head>

<title>Homepage</title>

href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384- JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"

crossorigin="anonymous">

</head>

<body>

<nav class="sticky-top navbar navbar-expand-lg navbar-light" style="background-color:

white;">

<a class="navbar-brand" href="mainpage.html">My FYP video website</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria- label="Toggle navigation">

</button>

<a class="nav-item nav-link active" href="mainpage.html">Home <span class="sr- only">(current)</span></a>

(40)

37

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"

data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

Category </a>

<a class="dropdown-item" href="animecategory.html">Anime</a>

<a class="dropdown-item" href="musiccategory.html">Music</a>

<a class="dropdown-item" href="entertainmentcategory.html">Entertainment</a>

<a class="dropdown-item" href="sportcategory.html">Sport</a>

</div>

<a class="dropdown-item" href="moviecategory.html">Movie</a>

</div>

<a class="nav-item nav-link" href="favvideo.html">Your favourite</a>

<a class="nav-item nav-link" href="histvideo.html">History</a>

<a class="nav-item nav-link" href="search.html">Search</a>

</div>

</nav>

</div>

</header>

<h3 >Music <a class="wantmore"href="musiccategory.html">More</a></h3>

(41)

38 <hr>

<img class="card-img-top" src="../FYP1/thumbnail/gimme.jpg" alt="八王子P × Giga

「Gimme×Gimme feat. 初音ミク・鏡音リン」">

<a href="八王子P × Giga「Gimme×Gimme feat. 初音ミク・鏡音リン」.html"

class="stretched-link" title="八王子P × Giga「Gimme×Gimme feat. 初音ミク・鏡音リン」">

八王子P × Giga「Gimme×Gimme feat. 初音ミク・鏡音リン」</a>

</div>

</div>

<img class="card-img-top"

src="../FYP1/thumbnail/62ab7287c3765b9333ff48e78e4c5aaa1d598bbc.png" alt="Card image cap">

<a href="milet「Prover」MUSIC VIDEO.html" class="stretched-link" title="milet

「Prover」MUSIC VIDEO">milet「Prover」MUSIC VIDEO</a>

</div>

<a href="Giga - '劣等上等'(BRING IT ON) ft.鏡音リン・レン【MV】.html"

class="stretched-link" title="Giga - '劣等上等'(BRING IT ON) ft.鏡音リン・レン【MV】

">Giga - '劣等上等'(BRING IT ON) ft.鏡音リン・レン【MV】</a>

</div>

(42)

39 </div>

<a href="No Logic - Megurine Luka 巡音ルカ Project DIVA Arcade.html" class="stretched- link" >No Logic - Megurine Luka 巡音ルカ Project DIVA Arcade</a>

</div>

<a href="Kakatte Koi yo.html" class="stretched-link" title="Kakatte Koi yo">Kakatte Koi yo</a>

</div>

<h3>Movie<a class="wantmore"href="moviecategory.html">More</a></h3>

<hr>

(43)

40

<a href="劇場版「メイドインアビス深き魂の黎明」本予告.html" class="stretched- link" title="劇場版「メイドインアビス深き魂の黎明」本予告">劇場版「メイドインアビス深き魂の黎明」本予告</a>

</div>

<a href="Ghost in the Shell 2 Innocence Parade Scene.html" class="stretched-link"

title="Ghost in the Shell 2 Innocence Parade Scene">Ghost in the Shell 2 Innocence Parade Scene</a>

</div>

<a href="The Usual Suspects Official Trailer 1 (1994).html" class="stretched-link" title="The Usual Suspects Official Trailer #1 - Kevin Pollak Movie (1994)">The Usual Suspects Official Trailer #1 - Kevin Pollak Movie (1994)</a>

</div>

(44)

41

<a href="American History X - Curb Stomping Scene.html" class="stretched-

link"title="American History X - Curb Stomping Scene">American History X - Curb Stomping Scene</a>

</div>

<a href="Ready Player One Battle of Castle Anorak .html" class="stretched-link" >Ready Player One Battle of Castle Anorak</a>

</div>

<hr>

<a href="Fate Grand Order - Absolute Demonic Front Babylonia Trailer 3.html"

class="stretched-link" title="Fate Grand Order - Absolute Demonic Front Babylonia Trailer 3">Fate Grand Order - Absolute Demonic Front Babylonia Trailer 3</a>

</div>

(45)

42

<img class="card-img-top" src="../FYP1/thumbnail/game-of-thrones-season-8-social.jpeg"

alt="Game of Thrones Season 8 Official Trailer (HBO)">

<a href="Game of Thrones Season 8 Official Trailer (HBO).html" class="stretched-link"

title="Game of Thrones Season 8 Official Trailer (HBO)">Game of Thrones Season 8 Official Trailer (HBO)</a>

</div>

<a href="Westworld Season 1 - Official Trailer - HBO UK.html" class="stretched- link" >Westworld Season 1 - Official Trailer - HBO UK</a>

</div>

<a href="Magia Record Puella Magi Madoka Magica Side Story TV Anime Trailer 2.html"

class="stretched-link" title="Magia Record Puella Magi Madoka Magica Side Story TV Anime Trailer 2">Magia Record Puella Magi Madoka Magica Side Story TV Anime Trailer 2</a>

</div>

<a href="Dexter Official Trailer.html" class="stretched-link" title="Dexter Official Trailer">Dexter Official Trailer</a>

(46)

43 </div>

</div>

crossorigin="anonymous"></script>

integrity="sha384-

9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"

integrity="sha384-

B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"

</body>

</html>

(47)

44

【AMV】Fate Grand Order Lostbelt No.3 OP「Thest」.html

<!DOCTYPE html>

<html>

<head>

<title>【AMV】Fate Grand Order Lostbelt No.3 OP「Thest」</title>

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384- Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"

crossorigin="anonymous">

</head>

<body>

<nav class="sticky-top navbar navbar-expand-lg navbar-light" style="background-color:

white;">

<a class="navbar-brand" href="mainpage.html">My FYP video website</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria- label="Toggle navigation">

</button>

<a class="nav-item nav-link active" href="mainpage.html">Home <span class="sr- only">(current)</span></a>

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"

data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

(48)

45

Category </a>

<a class="dropdown-item" href="animecategory.html">Anime</a>

<a class="dropdown-item" href="musiccategory.html">Music</a>

<a class="dropdown-item"

href="entertainmentcategory.html">Entertainment</a>

<a class="dropdown-item" href="sportcategory.html">Sport</a>

</div>

<a class="dropdown-item" href="moviecategory.html">Movie</a>

</div>

<a class="nav-item nav-link" href="favvideo.html">Your favourite</a>

<a class="nav-item nav-link" href="histvideo.html">History</a>

<a class="nav-item nav-link" href="search.html">Search</a>

</div>

</nav>

</div>

</header>

<source id="vidsrc" src="mp4/【AMV】Fate Grand Order Lostbelt No.3 OP「Thest」

360p.mp4" type="video/mp4">

(49)

46

Sorry, your browser does not support the video tag.

</video>

<label for="qua">quality:</label>

</select>

<label for="vidtype">Video type:</label>

</select>

<label for="downloadbutton">Download:</label>

<span class="material-icons">download</span>

</a>

favorite_border </span></button>

<h3>【AMV】Fate Grand Order Lostbelt No.3 OP「Thest」</h3>

Description </button>

</h5>

(50)

47

</div>

Disclaimer: This video is wholly owned by 卡欸蝶. I do not own this video, and I'm not seeking to use this video for any profit purpose, only use this video for academic purpose and my university final year project. This video is taken from https://youtu.be/Nh5HSzMUHH4. If the owner want this to be taken down and not to be used, please contact me at leekuankin@1utar.my.

This is a work made by 卡欸蝶,

https://www.youtube.com/channel/UCTY5Ac6bOFjWJj_0EKzJoyA.

<br>

original description: <br>

FGO這幾天新出的歌曲「Thest」

聽個幾遍後，不知不覺就聽上癮了

於是就手癢小剪了一部AMV，希望大家喜歡:)

►更多卡欸蝶的資訊◄

●Facebook專頁➔ https://www.facebook.com/AnimeKaede ●BiliBili頻道➔http://space.bilibili.com/18065057/#/

●Twitch直播間➔https://www.twitch.tv/kaede256863 ●任何工商、合作邀請➔ maple256863@gmail.com

#FGO #Lostbelt #Thest

======================================

●使用BGM：

"Thest" Music by: Kocho

(51)

48

======================================

このチャンネルでは、主にアニメ、マンガ、ゲームの推奨や評価などしております。

本チャンネル管理者は、本チャンネルにて推奨・評価する画像・音楽データ

等（著作物）が作成者（著作権者）のものであることを認め深く尊重しており、侵害する気は一切ございません。

万が一、著作権などの侵害を感じられた場合、また質問やお気付きの点などがございましたら、下記のメールアドレスへご連絡ください。

Email：maple256863@gmail.com </div>

</div>

<h5 class="mt-0">No Logic - Megurine Luka 巡音ルカ Project DIVA Arcade </h5>

<a href="No Logic - Megurine Luka 巡音ルカ Project DIVA Arcade.html"

class="stretched-link"></a>

</div>

<h5 class="mt-0">Kakatte Koi yo </h5>

(52)

49

</div>

<h5 class="mt-0">Fate Grand Order - Absolute Demonic Front Babylonia Trailer 3

</h5>

<a href="Fate Grand Order - Absolute Demonic Front Babylonia Trailer 3.html"

class="stretched-link"></a>

</div>

<img src="../FYP1/thumbnail/game-of-thrones-season-8-social.jpeg" class="mr-3 "

alt="Game of Thrones Season 8 Official Trailer (HBO)">

<h5 class="mt-0">Game of Thrones Season 8 Official Trailer (HBO) </h5>

</div>

<h5 class="mt-0">American History X - Curb Stomping Scene </h5>

</div>