0.2.17 • Published 3 years ago

@webtor/embed-sdk-js v0.2.17

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

embed-sdk-js

Webtor.io SDK for online torrent streaming/downloading on your site

Features

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

Basic usage

Generates embed for video player:

<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>

Generates embed for video player with subtitle tracks, poster, custom title and width:

<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>

Video element is replaced by wrapper div in this scenarios.

Generate embed to download full torrent as zip-archive:

<a href="magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel" download>Please make sure that JavaScript is enabled</a>
<script src="https://cdn.jsdelivr.net/npm/@webtor/embed-sdk-js/dist/index.min.js" charset="utf-8" async></script>

Video element attributes (streaming)

AttributeDescription
idID of wrapper div
classClass of wrapper div
widthWidth of an iframe (might be any css width value: 800px, 100%, etc... 800px by default)
heightHeight of an iframe (might be any css width value: 800px, 100%, etc... optional)
srcMagnet url or url to torrent file (required)
posterUrl to the poster image (optional)
typeUse application/x-bittorrent for torrent file url in case if it has no .torrent extension
controlsEnables all player features
data-configAdditional player configuration in JSON (see Player configuration)
data-*Set specific configuration value for a key (see Player configuration)

Anchor element attributes (download)

AttributeDescription
idID of wrapper div
classClass of wrapper div
hrefMagnet url or url to torrent file (required)
typeUse application/x-bittorrent for torrent file url in case if it has no .torrent extension
controlsEnables all player features
data-configAdditional player configuration in JSON (see Player configuration)
data-*Set specific configuration value for a key (see Player configuration)

Advanced usage

Generates embed for video player:

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

Here is live example

Generate embed to download full torrent as zip-archive:

    <div id="download" />
    <script>
        window.webtor = window.webtor || [];
        window.webtor.push({
            id: 'download',
            mode: 'download',
            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',
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/@webtor/embed-sdk-js/dist/index.min.js" charset="utf-8" async></script>

Embed configuration

AttributeDescription
idElement id where player will be embedded
magnetMagnet URI (torrentUrl ot magnet is required)
widthWidth of an iframe (might be any css width value: 800px, 100%, etc... 800px by default)
heightHeight of an iframe (might be any css width value: 800px, 100%, etc... optional)
torrentUrlUrl of the torrent-file (HTTP-server MUST include header "Access-Control-Allow-Origin: *" to allow torrent-file download on client-side)
modeSets embed mode (video/download, default: video)
posterUrl to the poster image (optional)
onCallback-function to capture player events (optional)
subtitlesArray of subtitles (optional, see Subtitle configuration for more details)
titleReplaces original file name in a header with specific title (optional)
imdbIdHelps to find subtitles and additional metadata (example values 'tt0133093' or '0133093' or even '133093', optional)
headerShows header with current progress and title (true/false, default: true)
pwdSelected directory in torrent (optional)
fileSelected file in torrent in selected directory (optional, by default selects first video file)
pathSelected file by full file path in torrent, can be used instead of pwd and file (optional)
langOverride language (optional)
i18nOverride i18n messages (optional)
controlsEnables all features (true/false, default: true)
featuresEnables or disables specific player features (optional)

Subtitle configuration

AttributeDescription
srclangTwo-letter language code
labelSubtitle label
srcurl to the subtitle src, could be vtt, srt and m3u8. It should be direct link to subtitle.
defaultIf true this track will be selected by default (true/false, optional)

Player features

NameDescription
titleDisplays movie title
p2pProgressDisplays p2p progress
subtitlesEnables subtitles control
captionsEnables showing captions for subtitles
settingsEnables settings control (cog)
fullscreenEnables fullscreen control
playpauseEnables plays/pause control
currentTimeDisplays current time
timelineEnables timeline control
durationDisplays total duration
volumeEnables volume control
chromecastEnables chromecast support
browseEnables file browser menu
downloadEnables download button
embedEnables embed button

Player events

Event types:

NameDescription
TORRENT_FETCHEDIndicates that torrent has been fetched and also returns fetched torrent in data field
TORRENT_ERRORIndicates if some error has occured during loading (timeout, wrong url, etc...)
INITEDIndicates if player can play content
OPENIndicates that specific file in torrent was opened
PLAYER_STATUSIndicates current player status (see player statuses below)
CURRNET_TIMEIndicates current player time
DURATIONIndicates full content duration

Player statuses:

NameDescription
PLAYThe media is ready to start playing
PLAYINGThe media actually has started playing
PAUSEThe media is paused either by the user or programmatically
ENDEDThe media has reach the end
SEEKINGThe seeking attribute is set to true indicating that seeking has started
SEEKEDThe seeking attribute is set to false indicating that seeking has ended
IDLEThe player is ready fot the first play

Every event has following fields:

NameDescription
nameName of the event
dataSpecific data for this event
playerPlayer representation that can be used after initialization to control playback

Player methods:

NameDescription
playStarts playback (available only after first play-click in the player)
pausePauses playback (available only after first play-click in the player)
setPositionSets player position in seconds (available only after first play-click in the player)
openOpens another file in torrent, full file-path should be provided