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, player) {
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', function (err) {
88 // Hack to "simulate" src link in video.js
>=
6
89 // If no, we can't play the video after pausing it
90 // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
91 player.src = function () { return true }
98 var urlParts = window.location.href.split('/')
99 var videoId = urlParts[urlParts.length -
1]
101 loadVideoInfos(videoId, function (videoInfos) {
102 var magnetUri = videoInfos.magnetUri
103 var videoContainer = document.getElementById('video-container')
104 var previewUrl = window.location.origin + videoInfos.previewPath
105 videoContainer.poster = previewUrl
107 videojs('video-container', { controls: true, autoplay: false }, function () {
110 var Button = videojs.getComponent('Button')
111 var peertubeLinkButton = videojs.extend(Button, {
112 constructor: function () {
113 Button.apply(this, arguments)
116 createEl: function () {
117 var link = document.createElement('a')
118 link.href = window.location.href.replace('embed', 'watch')
119 link.innerHTML = 'PeerTube'
120 link.title = 'Go to the video page'
121 link.className = 'vjs-peertube-link'
122 link.target = '_blank'
127 handleClick: function () {
131 videojs.registerComponent('PeerTubeLinkButton', peertubeLinkButton)
133 var controlBar = player.getChild('controlBar')
134 var addedLink = controlBar.addChild('PeerTubeLinkButton', {})
135 controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el())
138 title: videoInfos.name
141 document.querySelector('.vjs-big-play-button').addEventListener('click', function () {
142 loadVideoTorrent(magnetUri, player)