aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/standalone/videos/embed.html
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-11-07 22:35:37 +0100
committerChocobozzz <florian.bigard@gmail.com>2016-11-07 22:35:37 +0100
commit3bb2c7f99dd495adac8e486e98f135c183642381 (patch)
tree9e5d72adc1cc667c96e1c955dfe2048b3d6e2eeb /client/src/standalone/videos/embed.html
parent81ca2cd3f4f4ff2808fce512b38d735c9f550218 (diff)
downloadPeerTube-3bb2c7f99dd495adac8e486e98f135c183642381.tar.gz
PeerTube-3bb2c7f99dd495adac8e486e98f135c183642381.tar.zst
PeerTube-3bb2c7f99dd495adac8e486e98f135c183642381.zip
Prepare embed page
Diffstat (limited to 'client/src/standalone/videos/embed.html')
-rw-r--r--client/src/standalone/videos/embed.html99
1 files changed, 99 insertions, 0 deletions
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>