Goal	In this tutorial, we will make a simple video website that plays a video in sync with Handy using the Handy SDK and Handy Universal UI
Completion time	20 min
Skills needed	HTML+Javascript skills

Intro

Integrating the Handyfeeling platform into an existing video website is simple. The most used use case for Handy today is video synchronization. This tutorial will first make a simple website to mimic an existing video site. Then we will add Handy synchronization support with just six lines of code!

We will be using a demo graph video and the corresponding Script made by us to make fine adjustments to the synchronization. Feel free to use them in your test projects:

What will we make?

A super simple video website with Handy integration.

Initialize the project

Create the project

Create a folder and navigate into the folder (and open vscode with code .):

mkdir demo-video
cd demo-video
code .

Create a file index.html in the folder

Make the website

Let’s start with making a simple website with a video player. Add this code to your index.html file:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video sync demo</title>
</head>

<body>
    <h1>Video sync demo</h1>
    <video id="video-player" src="<https://sweettecheu.s3.eu-central-1.amazonaws.com/testsync/sync_video_2021.mp4>"
        width="50%" controls></video>
</body>
<script>
    const videoPlayer = document.getElementById("video-player");
</script>
</html>

<aside> 💡 Tips for vscode users: Type doc to get a boilerplate HTML website.

</aside>