Video PLayer #657

Edward-Stryfe · 2016-03-03T17:59:56Z

Browser name/version (if using WebTorrent in the browser): Chrome

I want to try and customize the video player so I am trying this code out


<head><script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script></head>
<body>
<script>
var client = new WebTorrent()

var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d'

client.add(torrentId, function (torrent) {
  // Torrents can contain many files. Let's use the first.
  var file = torrent.files[0]

  // Create a video element
  var video = document.createElement('video')
  video.controls = true
video.width = 640
video.height = 360
  document.body.appendChild(video)

  // Stream the video into the video tag
  file.createReadStream().pipe(video)
});
</script>
</body>

It doesn't seem to want to stream the video though. When I use a private torrent (ie with only one seed) I saw that the video downloads to the page but it doesn't stream or play it once it's done.

andyngdz · 2016-03-04T04:58:41Z

+1 same issue.

ndm13 · 2016-03-04T13:10:33Z

I find that most of the time it's best to simply use appendTo, as it generates everything you need without having to worry about what data is going to what element. appendTo has a callback method that gives you access to the element once it's added to the DOM.

file.appendTo(renderElement, function(err, element){
    if(err){
        console.log("Can't play media!  Maybe your browser doesn't support it.");
    }
    // Attach an ID so a stylesheet can render your special player
    element.id = "rendered";
    // If you want something specifically for video
    if(element.tagName.toLowerCase() == "video"){
        // Do special video configuration
    }
});

Edward-Stryfe · 2016-03-08T16:06:39Z

I'm sorry but I'm new to JS and this doesn't seem to be working for me. Is this a piece of blank code or does it have the needed attributes already applied? Thanks in advanced

Edward-Stryfe · 2016-03-08T20:57:48Z

I'm not sure what @itanhduy 's skin is in this game. But I am trying to operate the stream so that I can change the size(width length) of the video stream by using the 'file' as a src for the source element

feross · 2016-05-05T19:52:30Z

@Edward-Stryfe

You're using an old API that's since been removed. file.createReadStream().pipe(videoTag) no longer works. Use file.appendTo(containingElement) instead.

Here's a complete example:

<!doctype html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
</head>
<body>
<script>
  var client = new WebTorrent()

  var torrentId = 'https://webtorrent.io/torrents/sintel.torrent'

  client.add(torrentId, function (torrent) {
    // Torrents can contain many files. Let's use the first.
    var file = torrent.files[0]

    // Create a video element
    file.appendTo(document.body, function (err, elem) {
      elem.width = 640
      elem.height = 360
    })
  })
</script>
</body>
</html>

ghaiklor · 2016-05-13T12:20:46Z

@feross doesn't work on Google Chrome.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebTorrent Demo</title>
  </head>
  <body>
    <video id="video-container" controls="true"></video>
  </body>

  <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
  <script type="text/javascript">
  var client = new WebTorrent();
  var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4';

  client.add(torrentId, function (torrent) {
    var file = torrent.files[0];
    var container = document.getElementById('video-container');
    file.appendTo(container);
  });
  </script>
</html>

Triggers the following error:

Uncaught Error: Invalid video/audio node argument. Argument must be root element that video/audio tag will be appended to.

yciabaud · 2016-05-13T12:48:05Z

file.appendTo needs a container such as a div element, if you want to stream directly in a video elem, you need to use file.renderTo.

You can try this pen for a working example with renderTo: http://codepen.io/yciabaud/pen/XdOeWM

ghaiklor · 2016-05-13T14:17:53Z

@yciabaud thanks for the response. I've replaced with renderTo, getting:

Uncaught (in promise) DOMException: The element has no supported sources.

feross · 2016-05-13T19:50:54Z

@ghaiklor Your code example works fine if you just change appendTo to renderTo. You can see it working here: http://codepen.io/anon/pen/jqRLwK

Full code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebTorrent Demo</title>
  </head>
  <body>
    <video id="video-container" controls="true"></video>
  </body>

  <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
  <script type="text/javascript">
  var client = new WebTorrent();
  var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4';

  client.add(torrentId, function (torrent) {
    var file = torrent.files[0];
    var container = document.getElementById('video-container');
    file.renderTo(container);
  });
  </script>
</html>

lock · 2018-05-04T09:49:30Z

This thread has been automatically locked because it has not had recent activity. To discuss futher, please open a new issue.

feross closed this May 5, 2016

feross added the question label May 5, 2016

lock bot locked as resolved and limited conversation to collaborators May 4, 2018

webtorrent / webtorrent

Video PLayer #657

Video PLayer #657

Edward-Stryfe commented Mar 3, 2016

This comment has been minimized.

andyngdz commented Mar 4, 2016

This comment has been minimized.

ndm13 commented Mar 4, 2016

This comment has been minimized.

Edward-Stryfe commented Mar 8, 2016

This comment has been minimized.

Edward-Stryfe commented Mar 8, 2016

This comment has been minimized.

feross commented May 5, 2016 •

edited

This comment has been minimized.

ghaiklor commented May 13, 2016

This comment has been minimized.

yciabaud commented May 13, 2016

This comment has been minimized.

ghaiklor commented May 13, 2016 •

edited

This comment has been minimized.

feross commented May 13, 2016

This comment has been minimized.

lock bot commented May 4, 2018

webtorrent / webtorrent

Sponsor webtorrent/webtorrent

Join GitHub today

Video PLayer #657

Video PLayer #657

Comments

Edward-Stryfe commented Mar 3, 2016

This comment has been minimized.

andyngdz commented Mar 4, 2016

This comment has been minimized.

ndm13 commented Mar 4, 2016

This comment has been minimized.

Edward-Stryfe commented Mar 8, 2016

This comment has been minimized.

Edward-Stryfe commented Mar 8, 2016

This comment has been minimized.

feross commented May 5, 2016 • edited

This comment has been minimized.

ghaiklor commented May 13, 2016

This comment has been minimized.

yciabaud commented May 13, 2016

This comment has been minimized.

ghaiklor commented May 13, 2016 • edited

This comment has been minimized.

feross commented May 13, 2016

This comment has been minimized.

lock bot commented May 4, 2018

feross commented May 5, 2016 •

edited

ghaiklor commented May 13, 2016 •

edited