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;
40 text-decoration: none;
46 .vjs-peertube-link:hover {
47 text-shadow:
0 0 1em #fff;
55 <video id=
"video-container" class=
"video-js vjs-default-skin vjs-big-play-centered">
60 function loadVideoInfos (videoId, callback) {
61 var xhttp = new XMLHttpRequest()
62 xhttp.onreadystatechange = function () {
63 if (this.readyState ===
4 && this.status ===
200) {
64 var json = JSON.parse(this.responseText)
69 var url = window.location.origin + '/api/v1/videos/' + videoId
70 xhttp.open('GET', url, true)
74 function loadVideoTorrent (magnetUri) {
75 console.log('Loading video ' + videoId)
76 var client = new window.WebTorrent()
78 console.log('Adding magnet ' + magnetUri)
79 client.add(magnetUri, function (torrent) {
80 var file = torrent.files[
0]
82 file.renderTo('video', { autoplay: true })
86 var urlParts = window.location.href.split('/')
87 var videoId = urlParts[urlParts.length -
1]
89 loadVideoInfos(videoId, function (videoInfos) {
90 var magnetUri = videoInfos.magnetUri
92 // var videoContainer = document.getElementById('video-container')
93 // var thumbnailUrl = 'http://' + videoInfos.podUrl + videoInfos.thumbnailPath
94 // videoContainer.poster = thumbnailUrl
96 videojs('video-container', { controls: true, autoplay: false }, function () {
99 var Button = videojs.getComponent('Button')
100 var peertubeLinkButton = videojs.extend(Button, {
101 constructor: function () {
102 Button.apply(this, arguments)
105 createEl: function () {
106 var link = document.createElement('a')
107 link.href = window.location.href.replace('embed', 'watch')
108 link.innerHTML = 'PeerTube'
109 link.title = 'Go to the video page'
110 link.className = 'vjs-peertube-link'
115 videojs.registerComponent('PeerTubeLinkButton', peertubeLinkButton)
117 var controlBar = player.getChild('controlBar')
118 var addedLink = controlBar.addChild('PeerTubeLinkButton', {})
119 controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el())
122 title: videoInfos.name
125 document.querySelector('.vjs-big-play-button').addEventListener('click', function () {
126 loadVideoTorrent(magnetUri)