4 <title>PeerTube
</title>
7 <meta name=
"viewport" content=
"width=device-width, initial-scale=1">
9 <link rel=
"icon" type=
"image/png" href=
"/client/assets/favicon.png" />
11 <link rel=
"stylesheet" href=
"/client/assets/video-js/video-js.min.css">
12 <link rel=
"stylesheet" href=
"/client/assets/video-js/videojs-dock.css">
14 <script src=
"/client/assets/webtorrent/webtorrent.min.js"></script>
15 <script src=
"/client/assets/video-js/video.min.js"></script>
16 <script src=
"/client/assets/video-js/videojs-dock.min.js"></script>
23 /* fill the entire space */
35 background-size:
100% auto;
42 <video id=
"video-container" class=
"video-js vjs-default-skin vjs-big-play-centered">
47 function loadVideoInfos (videoId, callback) {
48 var xhttp = new XMLHttpRequest()
49 xhttp.onreadystatechange = function () {
50 if (this.readyState ===
4 && this.status ===
200) {
51 var json = JSON.parse(this.responseText)
56 var url = window.location.origin + '/api/v1/videos/' + videoId
57 xhttp.open('GET', url, true)
61 function loadVideoTorrent (magnetUri) {
62 console.log('Loading video ' + videoId)
63 var client = new window.WebTorrent()
65 console.log('Adding magnet ' + magnetUri)
66 client.add(magnetUri, function (torrent) {
67 var file = torrent.files[
0]
69 file.renderTo('video', { autoplay: true })
73 var urlParts = window.location.href.split('/')
74 var videoId = urlParts[urlParts.length -
1]
75 var videoContainer = document.getElementById('video-container')
77 loadVideoInfos(videoId, function (videoInfos) {
78 var magnetUri = videoInfos.magnetUri
79 var thumbnailUrl = 'http://' + videoInfos.podUrl + videoInfos.thumbnailPath
80 videoContainer.poster = thumbnailUrl
82 videojs('video-container', { controls: true, autoplay: false }, function () {
86 title: videoInfos.name
89 document.querySelector('.vjs-big-play-button').addEventListener('click', function () {
90 loadVideoTorrent(magnetUri)