Webtor.io Embed SDK for JavaScript

For more complex configurations, you can use the window.webtor array pattern. This allows you to define the player configuration in a script block before the SDK is loaded. This method is useful for passing complex objects like subtitle arrays or specific player settings.

1. Create a container element (e.g., a <div>) with a specific id and the class webtor.
2. Push a configuration object to window.webtor.
3. Load the SDK script.

<div id="player" class="webtor" />
<script>
    window.webtor = window.webtor || [];
    window.webtor.push({
        id: 'player',
        magnet: 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F',
        poster: 'https://via.placeholder.com/150/0000FF/808080',
        subtitles: [
            {
                srclang: 'en',
                label: 'test',
                src: 'https://raw.githubusercontent.com/andreyvit/subtitle-tools/master/sample.srt',
                default: true,
            }
        ],
        lang: 'en',
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/@webtor/embed-sdk-js/dist/index.min.js" charset="utf-8" async></script>

To embed a Webtor player, call the default export of the SDK with a configuration object. You must provide either a magnet link or a torrentUrl. You must also specify a target element via id (the ID of an existing DOM element) or by passing the element itself via the el property.

Common configuration options include:

• baseUrl: The Webtor instance URL (defaults to https://webtor.io).
• width: The width of the iframe (e.g., '800px').
• height: The height of the iframe. If not provided, the SDK uses an iframe resizer.
• mode: The embed mode (defaults to 'video').
• subtitles: An array of subtitle configurations.
• poster: URL for the video poster image.
• header: Boolean to show/hide the header (defaults to true).
• title: The title to display.
• imdbId: IMDB ID for the content.
• path: The path to the file within the torrent.
• on: A callback function that receives event data from the player.

import webtor from '@webtor/embed-sdk-js';

webtor({
  id: 'player-container',
  magnet: 'magnet:?xt=urn:btih:...
  width: '100%',
  height: '500px',
  on: (event) => {
    console.log('Player event:', event.name, event.data);
  }
});

The SDK automatically scans the document for <video> elements and <a> tags with a download attribute to transform them into Webtor players.

Automatic Detection

1. <video> elements: The SDK looks for src or href attributes containing magnet links (magnet:.*) or .torrent files. It also respects the data-torrent attribute for specifying torrent sources.
2. <a> elements: Links with the download attribute are converted into download-mode players.

Configuration via Data Attributes

You can configure the player directly on the HTML element using data-* attributes. These attributes are automatically parsed and passed to the player. For example:

• data-width: Sets the player width.
• data-height: Sets the player height.
• data-poster: Sets the video poster image.
• data-controls: Enables/disables controls.
• data-torrent: Explicitly provides a .torrent URL.
• data-config: A JSON string used to pass complex configuration objects.

Subtitles

Subtitles are automatically extracted from <track> elements inside the <video> tag. The SDK collects srclang, label, default, and src attributes and includes them in the player configuration.

<!-- Example: Video with magnet link and custom config -->
<video 
  src="magnet:?xt=urn:btih:..." 
  width="800" 
  height="450" 
  data-controls="true"
  data-config='{"someOption": true}'>
  <track srclang="en" label="English" src="subs_en.vtt" default>
</video>

<!-- Example: Download link converted to player -->
<a href="https://example.com/file.torrent" download>Download Torrent</a>

When using the advanced window.webtor.push method or the data-* attributes on a video element, you can configure the player using the following keys: