JavaScript
HTML5
Video
VideoJS
BitTorrent

WebTorrent + JavaScript media playersの使用法

More than 1 year has passed since last update.


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/