### 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',
});
```
--------------------------------
### 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
```
--------------------------------
### 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 `
`) 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