- <html>
- <head>
- <script src="https://cdn.jsdelivr.net/npm/webtorrent@latest/webtorrent.min.js"></script>
- <style>
- /* Loading Animation */
- #loading {
- display: none;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- }
- </style>
- </head>
- <body>
- <form onsubmit="loadTorrent(event)">
- <label for="torrent-input">Enter Magnet or Torrent URL:</label>
- <input type="text" id="torrent-input" name="torrent-input">
- <input type="submit" value="Load Video">
- </form>
- <video id="videoPlayer" controls></video>
- <div id="loading">
- <img src="loading.gif" alt="Loading...">
- </div>
- <script>
- function loadTorrent(event) {
- event.preventDefault();
- document.getElementById("loading").style.display = "block";
- var torrentId = document.getElementById("torrent-input").value;
- var client = new WebTorrent();
- client.add(torrentId, function (torrent) {
- var file = torrent.files.find(function (file) {
- return file.name.endsWith('.mp4');
- });
- file.appendTo('#videoPlayer', function () {
- document.getElementById("loading").style.display = "none";
- });
- torrent.on('download', function (bytes) {
- console.log('just downloaded: ' + bytes);
- console.log('download speed: ' + torrent.downloadSpeed);
- console.log('progress: ' + (torrent.progress * 100).toFixed(1) + '%');
- });
- });
- }
- </script>
- </body>
- </html>
