diff --git a/video.html b/video.html
index e44e4a6..70fe78a 100644
--- a/video.html
+++ b/video.html
@@ -26,6 +26,12 @@
1. Pick a video:
+
2. Join using your phones by typing this URL:
@@ -64,6 +70,21 @@ 3. Click the "fullscreen" button
return youtubeLoaded;
}
+// Load PeerTube API
+var peertubePromise = undefined;
+function loadPeertube() {
+ if(!peertubePromise) {
+ peertubePromise = new Promise(function(resolve, reject) {
+ var peertubeJs = document.createElement("script");
+ peertubeJs.src = "https://unpkg.com/@peertube/embed-api/build/player.min.js";
+ peertubeJs.addEventListener("error", reject);
+ peertubeJs.addEventListener("load", resolve);
+ document.body.appendChild(peertubeJs);
+ });
+ }
+ return peertubePromise;
+}
+
var currentPath = window.location.pathname; // "/video/1234"
var videoId = currentPath.substring(7); // "1234"
@@ -106,6 +127,33 @@ 3. Click the "fullscreen" button
});
}
+function showPeertubeVideo(peertubeHost, peertubeId) {
+ // Replace existing element with an iframe
+ var oldVideo = document.getElementById("video");
+ var newVideo = document.createElement("iframe");
+ newVideo.setAttribute("id", "video");
+ newVideo.setAttribute("src", "https://" + peertubeHost + "/videos/embed/" + peertubeId + "?api=1&peertubeLink=0");
+ newVideo.setAttribute("width", "100%");
+ newVideo.setAttribute("height", "100%");
+ newVideo.setAttribute("frameborder", "0");
+ oldVideo.parentNode.replaceChild(newVideo, oldVideo);
+
+ // Load video, set videoPlayer when done
+ return loadPeertube().then(function() {
+ var player = new PeerTubePlayer(document.getElementById("video"));
+ player.ready.then(function() {
+ videoPlayer = {
+ play: function() {
+ player.play();
+ },
+ pause: function() {
+ player.pause();
+ },
+ };
+ });
+ });
+}
+
// Show a video file
function showVideoFile(file) {
var videoType = file.type;
@@ -149,6 +197,15 @@ 3. Click the "fullscreen" button
}
});
+var peertubeSelector = document.getElementById("peertube-selector");
+document.getElementById("peertube-selector-form").addEventListener("submit", function(e) {
+ e.preventDefault();
+ var m = peertubeSelector.value.match(new RegExp("(?:https?://)?([^/]+)/w/([^/]+)(?:\\?.*)?$"));
+ if(m) {
+ showPeertubeVideo(m[1], m[2]);
+ }
+});
+
// Go fullscreen
fullscreenButton.addEventListener("click", function() {
videoContainer.requestFullscreen();