<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebTorrent video player</title>
<style>
#output video {
width: 100%;
}
#progressBar {
height: 5px;
width: 0%;
background-color: #35b44f;
transition: width .4s ease-in-out;
}
body.is-seed .show-seed {
display: inline;
}
body.is-seed .show-leech {
display: none;
}
.show-seed {
display: none;
}
#status code {
font-size: 90%;
font-weight: 700;
margin-left: 3px;
margin-right: 3px;
border-bottom: 1px dashed rgba(255,255,255,0.3);
}
.is-seed #hero {
background-color: #154820;
transition: .5s .5s background-color ease-in-out;
}
#hero {
background-color: #2a3749;
}
#status {
color: #fff;
font-size: 17px;
padding: 5px;
}
a:link, a:visited {
color: #30a247;
text-decoration: none;
}
</style>
</head>
<body>
<div id="hero">
<div id="output">
<div id="progressBar"></div>
<!-- The video player will be added here -->
</div>
<!-- Statistics -->
<div id="status">
<div>
<span class="show-leech">Downloading </span>
<span class="show-seed">Seeding </span>
<code>
<!-- Informative link to the torrent file -->
<a id="torrentLink" href="https://webtorrent.io/torrents/sintel.torrent">sintel.torrent</a>
</code>
<span class="show-leech"> from </span>
<span class="show-seed"> to </span>
<code id="numPeers">0 peers