embed-sdk-js
embed-sdk-js copied to clipboard
webtor-io
Webtor.io embed SDK for online torrent streaming and download on your site
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)
| 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 |
| controls | Enables all player features |
| data-config | Additional player configuration in JSON (see Player configuration) |
| data-* | Set specific configuration value for a key (see Player configuration) |
Anchor element attributes (download)
| Attribute | Description |
|---|---|
| id | ID of wrapper div |
| class | Class of wrapper div |
| href | Magnet url or url to torrent file (required) |
| type | Use application/x-bittorrent for torrent file url in case if it has no .torrent extension |
| controls | Enables all player features |
| data-config | Additional 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>
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
| 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) |
| mode | Sets embed mode (video/download, default: video) |
| 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 in selected directory (optional, by default selects first video file) |
| path | Selected file by full file path in torrent, can be used instead of pwd and file (optional) |
| lang | Override ui language (optional) |
| userLang | Override user language (optional) |
| i18n | Override i18n messages (optional) |
| controls | Enables all features (true/false, default: true) |
| features | Enables or disables specific player features (optional) |
| baseUrl | Url of Webtor instance (By default: https://webtor.io) |
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 |
|---|---|
| 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 |
| embed | Enables embed button |
| autoSubtitles | Enables automatic subtitle loading |
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 (see player statuses below) |
| CURRNET_TIME | Indicates current player time |
| DURATION | Indicates full content duration |
Player statuses:
| Name | Description |
|---|---|
| PLAY | The media is ready to start playing |
| PLAYING | The media actually has started playing |
| PAUSE | The media is paused either by the user or programmatically |
| ENDED | The media has reach the end |
| SEEKING | The seeking attribute is set to true indicating that seeking has started |
| SEEKED | The seeking attribute is set to false indicating that seeking has ended |
| IDLE | The player is ready for the first play |
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 |
| pause | Pauses playback |
| 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 |
Using with your own Webtor instance
After installing Webtor instance according to the instruction just switch baseUrl configuration attribute to your own.
webtor-io