aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.ts3
-rw-r--r--client/src/standalone/videos/embed.html99
2 files changed, 102 insertions, 0 deletions
diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
index e705fa555..1d5fd45ee 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -62,6 +62,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
62 } 62 }
63 63
64 loadVideo() { 64 loadVideo() {
65
66 console.log('<iframe width="560" height="315" src="' + window.location.origin + '/videos/embed/' + this.video.id + '" frameborder="0" allowfullscreen></iframe>');
67
65 // Reset the error 68 // Reset the error
66 this.error = false; 69 this.error = false;
67 // We are loading the video 70 // We are loading the video
diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html
new file mode 100644
index 000000000..5b0541df3
--- /dev/null
+++ b/client/src/standalone/videos/embed.html
@@ -0,0 +1,99 @@
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>PeerTube</title>
5
6 <meta charset="UTF-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8
9 <link rel="icon" type="image/png" href="/client/assets/favicon.png" />
10
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">
13
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>
17
18 <style>
19 video {
20 width: 99%;
21 }
22
23 /* fill the entire space */
24 html, body {
25 height: 100%;
26 margin: 0;
27 }
28
29 .video-js {
30 width: 100%;
31 height: 100%;
32 }
33
34 .vjs-poster {
35 background-size: 100% auto;
36 }
37 </style>
38 </head>
39
40 <body>
41
42 <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered">
43 </video>
44
45
46 <script>
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)
52 return callback(json)
53 }
54 }
55
56 var url = window.location.origin + '/api/v1/videos/' + videoId
57 xhttp.open('GET', url, true)
58 xhttp.send()
59 }
60
61 function loadVideoTorrent (magnetUri) {
62 console.log('Loading video ' + videoId)
63 var client = new window.WebTorrent()
64
65 console.log('Adding magnet ' + magnetUri)
66 client.add(magnetUri, function (torrent) {
67 var file = torrent.files[0]
68
69 file.renderTo('video', { autoplay: true })
70 })
71 }
72
73 var urlParts = window.location.href.split('/')
74 var videoId = urlParts[urlParts.length - 1]
75 var videoContainer = document.getElementById('video-container')
76
77 loadVideoInfos(videoId, function (videoInfos) {
78 var magnetUri = videoInfos.magnetUri
79 var thumbnailUrl = 'http://' + videoInfos.podUrl + videoInfos.thumbnailPath
80 videoContainer.poster = thumbnailUrl
81
82 videojs('video-container', { controls: true, autoplay: false }, function () {
83 var player = this
84
85 player.dock({
86 title: videoInfos.name
87 })
88
89 document.querySelector('.vjs-big-play-button').addEventListener('click', function () {
90 loadVideoTorrent(magnetUri)
91
92 player.play()
93 }, false)
94 })
95 })
96
97 </script>
98 </body>
99</html>