Webtor.io Embed SDK

https://github.com/webtor-io/embed-sdk-js
Admin
A JavaScript SDK by Webtor.io for embedding online torrent streaming capabilities directly into...
Tokens:3,035
Snippets:7
Trust Score:8.6
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Initialize and Play Video with Webtor SDK (JavaScript)

Source: https://github.com/webtor-io/embed-sdk-js/blob/master/example/streaming/advanced2.html

This snippet initializes the Webtor player upon a button click. It manages the visibility of the button, loading indicator, and the player itself. The player is configured with a magnet link and plays automatically once initialized. Dependencies include the Webtor SDK and DOM elements with specific IDs ('button', 'player', 'loading').

```javascript
var button = document.getElementById('button');
var player = document.getElementById('player');
var loading = document.getElementById('loading');

player.style.display = 'none';
loading.style.display = 'none';

button.addEventListener('click', function () {
    button.style.display = 'none';
    loading.style.display = 'block';
    initPlayer();
});

function initPlayer() {
    window.webtor = window.webtor || [];
    window.webtor.push({
        id: 'player',
        width: '100%',
        magnet: 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel',
        on: function (e) {
            if (e.name == window.webtor.INITED) {
                e.player.play();
                player.style.display = 'block';
                loading.style.display = 'none';
            }
        },
    });
}
```

--------------------------------

### Initialize Webtor Player with External Controls (JavaScript)

Source: https://github.com/webtor-io/embed-sdk-js/blob/master/example/streaming/advanced.html

Initializes the Webtor player with a given magnet link and configures external HTML controls for playback. It also sets up event listeners for various player states, including torrent fetching, errors, initialization, player status, and time updates. Dependencies include the Webtor SDK and standard HTML elements for player and controls. Outputs player status and time to specific HTML elements.

```javascript
var el = document.getElementById('player');
window.webtor = window.webtor || [];
window.webtor.push({
    id: 'player',
    magnet: 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel',
    title: 'Example Movie',
    subtitles: [],
    width: '100%',
    height: '100%',
    features: {
        autoSubtitles: true,
        continue: false,
        settings: false
    },
    on: function(e) {
        if (e.name == window.webtor.TORRENT_FETCHED) {
            console.log('Torrent fetched!', e.data.files);
            var p = e.player;
            var files = document.getElementById('files');
            for (const f of e.data.files) {
                if (!f.name.endsWith('.mp4')) continue;
                var a = document.createElement('a');
                a.setAttribute('href', f.path);
                a.innerText = f.name;
                files.appendChild(a);
                a.addEventListener('click', function(e) {
                    e.preventDefault();
                    p.open(e.target.getAttribute('href'));
                    return false;
                });
            }
        }
        if (e.name == window.webtor.TORRENT_ERROR) {
            console.log('Torrent error!')
        }
        if (e.name == window.webtor.INITED) {
            var p = e.player;
            document.getElementById('play').addEventListener('click', function(ev) {
                p.play();
            });
            document.getElementById('pause').addEventListener('click', function(ev) {
                p.pause();
            });
            document.getElementById('moveto1min').addEventListener('click', function(ev) {
                p.setPosition(60);
            });
            document.getElementById('movetostart').addEventListener('click', function(ev) {
                p.setPosition(0);
            });
        }
        if (e.name == window.webtor.PLAYER_STATUS) {
            document.getElementById('player-status').innerHTML = e.data;
        }
        if (e.name == window.webtor.OPEN) {
            console.log(e.data);
        }
        if (e.name == window.webtor.CURRENT_TIME) {
            document.getElementById('current-time').innerHTML = parseInt(e.data);
        }
        if (e.name == window.webtor.DURATION) {
            document.getElementById('duration').innerHTML = parseInt(e.data);
        }
        if (e.name == window.webtor.OPEN_SUBTITLES) {
            console.log(e.data);
        }
    }
});
```

--------------------------------

### Advanced JavaScript Initialization for Video Player

Source: https://github.com/webtor-io/embed-sdk-js/blob/master/README.md

Initializes a video player using JavaScript for more dynamic control. This method allows configuration of magnet URI, poster, subtitles, and other player settings through a configuration object pushed to the `window.webtor` array.

```javascript
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 src="https://cdn.jsdelivr.net/npm/@webtor/embed-sdk-js/dist/index.min.js" charset="utf-8" async></script>
```

--------------------------------

### Basic HTML Embed for Video Player

Source: https://github.com/webtor-io/embed-sdk-js/blob/master/README.md

Generates an embed for a video player using a magnet URI. This is the simplest way to integrate Webtor.io into your site, requiring only a video tag and the SDK script.

```html
<video controls src="magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel"></video>
<script src="https://cdn.jsdelivr.net/npm/@webtor/embed-sdk-js/dist/index.min.js" charset="utf-8" async></script>
```

--------------------------------

### Advanced Embed with JavaScript Configuration

Source: https://github.com/webtor-io/embed-sdk-js/blob/master/README.md

Embed a video player using JavaScript initialization for more complex configurations, including multiple subtitles and custom settings.

```APIDOC
## Advanced Embed with JavaScript Configuration

### Description
Embed a video player by providing configuration options directly in a JavaScript array. This method allows for detailed control over player settings, subtitles, and initial state.

### Method
JavaScript API

### Endpoint
N/A

### Parameters
#### `window.webtor` Array Elements (Objects)
- **id** (string) - Required - The ID of the HTML element (e.g., a `<div>`) where the player will be embedded.
- **magnet** (string) - Required - Magnet URI for the torrent. `magnet` or `torrentUrl` is mandatory.
- **torrentUrl** (string) - Required - URL to a `.torrent` file. Requires CORS headers `Access-Control-Allow-Origin: *` on the server.
- **poster** (string) - Optional - URL to a poster image to display before playback starts.
- **subtitles** (Array<Object>) - Optional - An array of subtitle track configurations.
  - **srclang** (string) - Required - Language code (e.g., 'en').
  - **label** (string) - Required - Display label for the subtitle track.
  - **src** (string) - Required - URL to the subtitle file.
  - **default** (boolean) - Optional - Set to `true` if this should be the default subtitle.
- **title** (string) - Optional - A custom title to display in the player header, overriding the filename.
- **imdbId** (string) - Optional - IMDb ID to help find metadata and subtitles.
- **lang** (string) - Optional - Override the UI language of the player.
- **userLang** (string) - Optional - Override the user's detected language.
- **width** (string) - Optional - CSS width value for the player. Defaults to '800px'.
- **height** (string) - Optional - CSS height value for the player.
- **header** (boolean) - Optional - Show or hide the player header (progress and title). Defaults to `true`.
- **pwd** (string) - Optional - Path to the directory within the torrent to select.
- **file** (string) - Optional - Name of the file within the specified directory to select. Defaults to the first video file.
- **path** (string) - Optional - Full path to the file within the torrent, can be used instead of `pwd` and `file`.
- **baseUrl** (string) - Optional - URL of the Webtor instance. Defaults to 'https://webtor.io'.
- **controls** (boolean) - Optional - Enables all player features. Defaults to `true`.
- **features** (Object) - Optional - Object to enable/disable specific player features.
- **on** (Function) - Optional - Callback function to capture player events.

### Request Example
```javascript
window.webtor = window.webtor || [];
window.webtor.push({
    id: 'player',
    magnet: 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel',
    poster: 'https://via.placeholder.com/150/0000FF/808080',
    subtitles: [
        {
            srclang: 'en',
            label: 'English',
            src: 'https://raw.githubusercontent.com/andreyvit/subtitle-tools/master/sample.srt',
            default: true,
        }
    ],
    lang: 'en',
    title: 'My Custom Video Title'
});
</script>
<script src="https://cdn.jsdelivr.net/npm/@webtor/embed-sdk-js/dist/index.min.js" charset="utf-8" async></script>
```

### Response
#### Success Response
- The specified HTML element (e.g., `<div id="player"></div>`) is replaced by the Webtor player.

#### Response Example
(No direct response, the DOM is updated with the player.
```

--------------------------------

### Basic Video Embed

Source: https://github.com/webtor-io/embed-sdk-js/blob/master/README.md

Embed a video player using a magnet URI or a torrent file URL directly within the HTML video tag.

```APIDOC
## Basic Video Embed

### Description
Embed a video player using a magnet URI or a torrent file URL directly within the HTML video tag. The SDK will automatically enhance the video element for streaming capabilities.

### Method
HTML embed

### Endpoint
N/A

### Parameters
#### HTML Attributes for `<video>` tag
- **src** (string) - Required - Magnet URI or URL to a torrent file.
- **controls** (boolean) - Optional - Enables all player features.
- **poster** (string) - Optional - URL to the poster image.
- **width** (string) - Optional - CSS width value for the player (e.g., '100%', '800px'). Defaults to '800px'.
- **height** (string) - Optional - CSS height value for the player.
- **data-title** (string) - Optional - Custom title to display for the video.
- **type** (string) - Optional - Use `application/x-bittorrent` if the torrent file URL does not have a `.torrent` extension.

#### `<track>` element attributes for subtitles
- **srclang** (string) - Required - Language of the subtitle track.
- **label** (string) - Required - Label for the subtitle track.
- **src** (string) - Required - URL to the subtitle file (e.g., .srt, .vtt).
- **default** (boolean) - Optional - Marks this track as the default subtitle.

### Request Example
```html
<video controls src="magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel" poster="https://via.placeholder.com/150/0000FF/808080" width="100%" data-title="Sintel">
    <track srclang="en" label="English" default src="https://raw.githubusercontent.com/andreyvit/subtitle-tools/master/sample.srt">
</video>
<script src="https://cdn.jsdelivr.net/npm/@webtor/embed-sdk-js/dist/index.min.js" charset="utf-8" async></script>
```

### Response
#### Success Response
- The `<video>` element is replaced by a Webtor player `<div>`.

#### Response Example
(No direct response, the HTML element is transformed in the DOM)
```

--------------------------------

### HTML Embed with Subtitles, Poster, and Custom Title

Source: https://github.com/webtor-io/embed-sdk-js/blob/master/README.md

Embeds a video player with advanced options like subtitle tracks, a poster image, and a custom title. The video element is replaced by a wrapper div when these advanced attributes are used.

```html
<video controls src="magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel" poster="https://via.placeholder.com/150/0000FF/808080" width="100%" data-title="Sintel">
    <track srclang="en" label="test" default src="https://raw.githubusercontent.com/andreyvit/subtitle-tools/master/sample.srt">
</video>
<script src="https://cdn.jsdelivr.net/npm/@webtor/embed-sdk-js/dist/index.min.js" charset="utf-8" async></script>
```
Tokens:
Raw