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とは
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.
© WikipediaBitTorrent（ビットトレント）は、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プレーヤー
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
videojs is an open sources javascript media player.
videojs はオープンソースのjavascriptメディアプレーヤーです。
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
Clappr is an open sources javascript media player.
Clappr はオープンソースのjavascriptメディアプレーヤーです。
If you are interested in Clappr, I wrote a more detailed article.
Clappr に興味がある場合は、より詳細な記事にあります。
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
Dplayer is an open sources javascript media player.
Dplayer はオープンソースのjavascriptメディアプレーヤーです。
If you are interested in Dplayer, I wrote a more detailed article.
Dplayer に興味がある場合は、より詳細な記事にあります。
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
Plyr is an open sources javascript media player.
Plyr はオープンソースのjavascriptメディアプレーヤーです。
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
MediaElement is an open sources javascript media player.
MediaElement はオープンソースのjavascriptメディアプレーヤーです。
<!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/
