@webtor/player-sdk-js

player-sdk-js

Player SDK for online torrent streaming on your site

Features

• Supports magnet-uri and external torrent-files
• Supports video (avi, mkv, mp4, m4v) with subtitles (vtt, srt)
• No additional plugins/extensions required

Basic usage

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

with subtitle tracks and poster:

    <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/player-sdk-js/dist/index.min.js" charset="utf-8" async></script>

Video element is replaced by wrapper div in this scenarios.

Element attributes

Attribute	Description
id	ID of wrapper div
class	Class of wrapper div
width	Width of an iframe (might be any css width value: 800px, 100%, etc... 800px by default)
height	Height of an iframe (might be any css width value: 800px, 100%, etc... optional)
src	Magnet url or url to torrent file (required)
poster	Url to the poster image (optional)
type	Use application/x-bittorrent for torrent file url in case if it has no .torrent extension
data-config	Additional player configuration in JSON (see Player configuration)
data-*	Set specific configuration value for a key (see Player configuration)

Advanced usage

...
    <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',
            on: function(e) {
                if (e.name == window.webtor.TORRENT_FETCHED) {
                    console.log('Torrent fetched!', e.data);
                }
                if (e.name == window.webtor.TORRENT_ERROR) {
                    console.log('Torrent error!');
                }
            },
            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',
            i18n: {
                en: {
                    common: {
                        "prepare to play": "Preparing Video Stream... Please Wait...",
                    },
                    stat: {
                        "seeding": "Seeding",
                        "waiting": "Client initialization",
                        "waiting for peers": "Waiting for peers",
                        "from": "from",
                    },
                },
            },
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/@webtor/player-sdk-js/dist/index.min.js" charset="utf-8" async></script>
...

Here is live example

Player configuration

Attribute	Description
id	Element id where player will be embedded
magnet	Magnet URI (torrentUrl ot magnet is required)
width	Width of an iframe (might be any css width value: 800px, 100%, etc... 800px by default)
height	Height of an iframe (might be any css width value: 800px, 100%, etc... optional)
torrentUrl	Url of the torrent-file (HTTP-server MUST include header "Access-Control-Allow-Origin: *" to allow torrent-file download on client-side)
poster	Url to the poster image (optional)
on	Callback-function to capture player events (optional)
subtitles	Array of subtitles (optional, see Subtitle configuration for more details)
title	Replaces original file name in a header with specific title (optional)
imdbId	Helps to find subtitles and additional metadata (example values 'tt0133093' or '0133093' or even '133093', optional)
header	Shows header with current progress and title (true/false, default: true)
pwd	Selected directory in torrent (optional)
file	Selected file in torrent (optional)
lang	Override language (optional)
i18n	Override i18n messages (optional)
features	enables or disables specific player features (optional)

Subtitle configuration

Attribute	Description
srclang	Two-letter language code
label	Subtitle label
src	url to the subtitle src, could be vtt, srt and m3u8. It should be direct link to subtitle.
default	If true this track will be selected by default (true/false, optional)

Player features

Name	Description
controls	enables all features by default
title	displays movie title
p2pProgress	displays p2p progress
subtitles	enables subtitles control
captions	enables showing captions for subtitles
settings	enables settings control (cog)
fullscreen	enables fullscreen control
playpause	enables plays/pause control
currentTime	displays current time
timeline	enables timeline control
duration	displays total duration
volume	enables volume control
chromecast	enables chromecast support
browse	enables file browser menu
download	enables download button

Player events

Event types:

Name	Description
TORRENT_FETCHED	Indicates that torrent has been fetched and also returns fetched torrent in data field
TORRENT_ERROR	Indicates if some error has occured during loading (timeout, wrong url, etc...)
INITED	Indicates if player can play content
OPEN	Indicates that specific file in torrent was opened
PLAYER_STATUS	Indicates current player status
CURRNET_TIME	Indicates current player time
DURATION	Indicates full content duration

Every event has following fields:

Name	Description
name	Name of the event
data	Specific data for this event
player	Player representation that can be used after initialization to control playback

Player methods:

Name	Description
play	starts playback (available only after first play-click in the player)
pause	pauses playback (available only after first play-click in the player)
setPosition	sets player position in seconds (available only after first play-click in the player)
open	opens another file in torrent, full file-path should be provided