LoginSignup
13
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@mehdiinアイレット株式会社

WebTorrent + JavaScript media playersの使用法

Posted at

#WebTorrent + JavaScript media playersの使用法

##はじめに

こんにちは streampack チームのメディです。
https://cloudpack.jp/service/option/streampack.html

##Copyrights of video
Sintel
© copyright Blender Foundation | www.sintel.org

##What is WebTorrent ・ WebTorrentとは
Screen Shot 2018-03-30 at 9.59.30.png

WebTorrent is the first torrent client that works in the browser.
WebTorrentは、ブラウザで動作する最初のトレントクライアントです。

BitTorrent (BT) is a communication protocol for peer-to-peer file sharing ("P2P") which is used to distribute data and electronic files over the Internet.
© Wikipedia

BitTorrent（ビットトレント）は、Peer to Peerを用いたファイル転送用プロトコル及びその通信を行うソフトウェアです。
© Wikipedia

N.B : WebTorrent is based on the WebRTC protocol. Safari does not support WebTorrent yet.
注意 ：WebTorrentはWebRTCプロトコルに基づいています。 Safari はまだWebTorrentをサポートしていません。

N.B It takes a few seconds to initialize WebTorrent.
注意 WebTorrentを初期化するには数秒かかります。

##Objective・目的
Learning how to use WebTorrent through simple examples.
WebTorrent の簡単な例を学ぶこと。

##Default HTML5 player ・ デフォルトのHTML5プレーヤー
Screen Shot 2018-03-23 at 11.33.26.png

###Implementation・実装

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

  <script src="//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.find(function(file) {
       return file.name.endsWith('.mp4');
     });
    var container = document.getElementById('video-container');
    file.renderTo(container);
  });
  </script>
</html>

##Videojs
Screen Shot 2018-04-03 at 16.21.37.png

videojs is an open sources javascript media player.
videojs はオープンソースのjavascriptメディアプレーヤーです。

Screen Shot 2018-03-23 at 13.55.32.png

###Implementation・実装

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>WebTorrent & videojs demo</title>
</head>

<body>
  <video class="video-js" id="video-container" controls preload="auto" autoplay></video>
</body>

<script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>

<link href="//vjs.zencdn.net/5.19.1/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.19.1/video.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';

  var player = videojs("video-container");
  player.fluid(true);

  client.add(torrentId, function(torrent) {
    var file = torrent.files.find(function(file) {
         return file.name.endsWith('.mp4')
       });
    file.renderTo('video#video-container_html5_api', {}, function callback() {
      console.log("ready to play!");
    });
  });
</script>

</html>

##Clappr
10685859.png

Clappr is an open sources javascript media player.
Clappr はオープンソースのjavascriptメディアプレーヤーです。
If you are interested in Clappr, I wrote a more detailed article.
Clappr に興味がある場合は、より詳細な記事にあります。

Screen Shot 2018-04-05 at 10.50.03.png

###Implementation・実装

Before using WebTorrent with Clappr, you need to initialize the player with a valid video file.
Clapprプレーヤーを初期化するには、有効なビデオファイルが必要です。

If you don't have a test file, you can generate one with FFMPEG.
ビデオファイルがない場合は、FFMPEGで、作ることができます。

ffmpeg -f lavfi -i color=red -frames:v 200 dummyfile.mp4

<!DOCTYPE html>
<html>


<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
  <!-- Player -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/clappr/0.2.90/clappr.min.js"></script>
</head>

<body>
  <div id="player">
  </div>
  <script>
    Clappr.Log.setLevel(0);
    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.find(function(file) {
        return file.name.endsWith('.mp4')
      });

      var player = new Clappr.Player({
        source: "dummyfile.mp4", //You need a valid video file to initialize the player !!!
        preload: 'metadata',
        height: 360,
        width: 640
      });

      player.attachTo("#player");
      file.renderTo('video', {
        autoplay: true,
        muted: true
      }, function callback() {
        console.log("ready to play!");
      });
    });
  </script>
</body>
</html>

##Dplayer
68747470733a2f2f7773342e73696e61696d672e636e2f6c617267652f303036744b665463677931666875303179397579376a3330356b3034733379632e6a7067.jpeg

Dplayer is an open sources javascript media player.
Dplayer はオープンソースのjavascriptメディアプレーヤーです。
If you are interested in Dplayer, I wrote a more detailed article.
Dplayer に興味がある場合は、より詳細な記事にあります。

Screen Shot 2018-04-06 at 11.11.36.png

###Implementation・実装

<!DOCTYPE html>
<html>

<head>
  <title>Dplayer</title>
  <meta charset="UTF-8">
  <!-- Player Style -->
  <link rel=stylesheet type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.css"></link>
  <!-- WebTorrent  -->
  <script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
  <!-- Player -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dplayer/1.22.2/DPlayer.min.js"></script>
</head>

<body>
  <div id="dplayer"></div>
  <script>
  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';
  const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    screenshot:true,
    video: {
        url: `${torrentId}`,
        type: 'customWebTorrent',
        customType: {
            'customWebTorrent': function (video, player) {
                player.container.classList.add('dplayer-loading');
                const client = new WebTorrent();
                const torrentId = video.src;
                client.add(torrentId, (torrent) => {
                    const file = torrent.files.find((file) => file.name.endsWith('.mp4'));
                    file.renderTo(video, {
                        autoplay: player.options.autoplay
                    }, () => {
                        player.container.classList.remove('dplayer-loading');
                    });
                });
            }
        }
    }
});
  </script>
</body>
</html>

##Plyr
Screen Shot 2018-04-05 at 11.39.57.png

Plyr is an open sources javascript media player.
Plyr はオープンソースのjavascriptメディアプレーヤーです。

Screen Shot 2018-04-05 at 16.51.21.png

###Implementation・実装

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>WebTorrent & Plyr demo</title>
  <!-- WebTorrent -->
  <script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>

  <!-- Plyr-->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/plyr/3.1.0/plyr.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/plyr/3.1.0/plyr.min.js"></script>
</head>

<body>
  <video id="player" controls></video>
</body>

<script type="text/javascript">
  var client = new WebTorrent();
  var torrentId =
    '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&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent';

  const player = new Plyr('#player', {
    debug: true
  });

  client.add(torrentId, function(torrent) {
    var file = torrent.files.find(function(file) {
      return file.name.endsWith('.mp4')
    });
    file.renderTo('video', {
      autoplay: false,
      muted: true
    }, function callback() {
      console.log("ready to play!");
    });
  });
</script>

</html>

##MediaElement
Screen Shot 2018-04-05 at 11.42.12.png

MediaElement is an open sources javascript media player.
MediaElement はオープンソースのjavascriptメディアプレーヤーです。

Screen Shot 2018-04-06 at 10.21.44.png 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>WebTorrent & MediaElement</title>
  <!-- WebTorrent -->
  <script src="//cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
  <!-- MediaElements---->
  <script src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.js"></script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelementplayer.css" />
</head>

<body>
  <video id="player" width="640" height="360" src="dummyfile.mp4" type="video/mp4">
</body>
<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 player = new MediaElementPlayer('player', {
        success: function(mediaElement, originalNode) {
          console.log("Player initialised");
        }
      });

      var file = torrent.files.find(function (file) {
          return file.name.endsWith('.mp4')
        })
      file.renderTo('video', {autoplay:false,muted:false,}, function callback() {
        console.log("WebTorrent is rendering");
      });
    });
</script>

</html>

##Information sources ・ 情報源

###Webtorrent
https://github.com/webtorrent/
https://webtorrent.io/

###Magnet link checker
https://checker.openwebtorrent.com/

###Bitorrent
https://ja.wikipedia.org/wiki/BitTorrent

###Clappr
https://github.com/clappr/clappr
http://clappr.io/

###Videojs
https://videojs.com/
https://github.com/videojs

###Dplayer
https://github.com/MoePlayer/DPlayer
http://dplayer.js.org/#/

###MediaElements
https://www.mediaelementjs.com/
https://github.com/mediaelement/mediaelement-plugins

###Plyr
https://github.com/sampotts/plyr
https://plyr.io/

13
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
13
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?