Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
/**
* Gadget-MakerTube.js
* ============================================================================
* Bettet Videos von makertube.net ein (eine PeerTube-Instanz).
*
* ZWEI-KLICK-SPERRE
* Der Player liegt auf makertube.net. Beim Laden erfährt der Server die
* IP-Adresse des Besuchers. PeerTube verteilt Videos zusätzlich per
* Peer-to-Peer (WebTorrent): dabei sieht nicht nur der Server, sondern auch
* jeder andere Zuschauer desselben Videos die IP-Adresse. Dieses Gadget
* schaltet P2P deshalb standardmäßig ab (p2p=0) und weist in der
* Vorschaubox darauf hin, wenn es per data-p2p="1" doch erlaubt wird.
*
* EINBINDUNG AUF EINER SEITE
* <div class="makertube-embed" data-video="a1b2c3d4-…"></div>
*
* data-Attribute:
* data-video Pflicht. UUID oder Kurzkennung aus der Adresse des Videos
* (der Teil hinter /w/ bzw. /videos/watch/).
* data-width Breite in Pixeln (Standard 560). "100%" ist erlaubt.
* data-height Höhe in Pixeln (Standard 315).
* data-titel Überschrift der Vorschaubox (Standard: "Video").
* data-p2p "1" => Peer-to-Peer-Verteilung zulassen (Standard: aus).
* data-start Startzeit in Sekunden.
* ============================================================================
*/
( function () {
'use strict';
var INSTANZ = 'https://makertube.net';
var STD_BREITE = 560;
var STD_HOEHE = 315;
var SPEICHER = 'wiki-freigabe-makertube';
var DATENSCHUTZ = 'https://makertube.net/about/instance';
var wartende = [];
function freigegeben() {
try {
return window.sessionStorage.getItem( SPEICHER ) === 'ja';
} catch ( e ) {
return false;
}
}
function setzeFreigabe( ja ) {
try {
if ( ja ) {
window.sessionStorage.setItem( SPEICHER, 'ja' );
} else {
window.sessionStorage.removeItem( SPEICHER );
}
} catch ( e ) {}
}
function gibAlleFrei() {
var liste = wartende.slice();
wartende.length = 0;
liste.forEach( function ( fn ) {
fn();
} );
}
function stil( el, regeln ) {
var name;
for ( name in regeln ) {
el.style[ name ] = regeln[ name ];
}
return el;
}
function masszahl( wert, standard ) {
if ( !wert ) {
return standard + 'px';
}
wert = String( wert ).trim();
return /^\d+$/.test( wert ) ? wert + 'px' : wert;
}
function baueUrl( cfg ) {
var url = INSTANZ + '/videos/embed/' + encodeURIComponent( cfg.id ) +
'?p2p=' + ( cfg.p2p ? '1' : '0' ) +
'&warningTitle=0';
if ( cfg.start ) {
url += '&start=' + encodeURIComponent( cfg.start );
}
return url;
}
/* --- Vorschaubox ---------------------------------------------------- */
function sperre( container, cfg ) {
var erledigt = false;
container.textContent = '';
var box = stil( document.createElement( 'div' ), {
border: '1px solid #a2a9b1',
borderRadius: '2px',
background: '#f8f9fa',
padding: '1em',
maxWidth: '42em',
boxSizing: 'border-box'
} );
box.className = 'makertube-embed-sperre';
var kopf = stil( document.createElement( 'div' ), {
fontWeight: 'bold',
fontSize: '108%',
marginBottom: '0.4em'
} );
kopf.textContent = cfg.titel + ' auf MakerTube';
box.appendChild( kopf );
var text = stil( document.createElement( 'p' ), { margin: '0.4em 0' } );
text.textContent = 'Das Video liegt auf makertube.net, einer unabhängigen ' +
'PeerTube-Instanz. Beim Abspielen erfährt dieser Server deine ' +
'IP-Adresse und welches Video du ansiehst. Vor deinem Klick wird ' +
'nichts dorthin übertragen.';
box.appendChild( text );
var p2pText = stil( document.createElement( 'p' ), { margin: '0.4em 0' } );
if ( cfg.p2p ) {
p2pText.style.color = '#b32424';
p2pText.textContent = 'Achtung: Für dieses Video ist die ' +
'Peer-to-Peer-Verteilung eingeschaltet. Dann tauschst du ' +
'Videodaten direkt mit anderen Zuschauern aus – und deine ' +
'IP-Adresse wird für diese sichtbar.';
} else {
p2pText.style.color = '#54595d';
p2pText.style.fontSize = '92%';
p2pText.textContent = 'Die Peer-to-Peer-Verteilung ist abgeschaltet: ' +
'du lädst ausschließlich vom Server, andere Zuschauer sehen ' +
'deine IP-Adresse nicht.';
}
box.appendChild( p2pText );
var haken = document.createElement( 'input' );
haken.type = 'checkbox';
var hakenLabel = stil( document.createElement( 'label' ), {
display: 'block',
margin: '0.7em 0',
fontSize: '92%'
} );
hakenLabel.appendChild( haken );
hakenLabel.appendChild( document.createTextNode(
' Für diese Sitzung merken – gilt dann für alle MakerTube-Videos im ' +
'Wiki und endet, sobald du den Browser schließt. Es wird kein ' +
'Cookie gesetzt.'
) );
box.appendChild( hakenLabel );
var knopf = stil( document.createElement( 'button' ), {
cursor: 'pointer',
padding: '0.4em 0.9em',
fontWeight: 'bold'
} );
knopf.type = 'button';
knopf.textContent = 'Video laden und abspielen';
box.appendChild( stil( document.createElement( 'div' ),
{ margin: '0.7em 0' } ) ).appendChild( knopf );
var fuss = stil( document.createElement( 'div' ), {
fontSize: '85%',
color: '#54595d',
marginTop: '0.6em'
} );
var dsLink = document.createElement( 'a' );
dsLink.href = DATENSCHUTZ;
dsLink.target = '_blank';
dsLink.rel = 'noopener';
dsLink.textContent = 'Über die Instanz makertube.net';
fuss.appendChild( dsLink );
fuss.appendChild( document.createTextNode( ' · ' ) );
var direkt = document.createElement( 'a' );
direkt.href = INSTANZ + '/w/' + cfg.id;
direkt.target = '_blank';
direkt.rel = 'noopener';
direkt.textContent = 'Stattdessen direkt auf MakerTube ansehen';
fuss.appendChild( direkt );
box.appendChild( fuss );
container.appendChild( box );
function freigeben() {
if ( erledigt ) {
return;
}
erledigt = true;
lade( container, cfg );
}
wartende.push( freigeben );
knopf.addEventListener( 'click', function () {
if ( haken.checked ) {
setzeFreigabe( true );
gibAlleFrei();
} else {
freigeben();
}
} );
}
/* --- Geladener Player ----------------------------------------------- */
function lade( container, cfg ) {
container.textContent = '';
var iframe = document.createElement( 'iframe' );
iframe.src = baueUrl( cfg );
iframe.setAttribute( 'frameborder', '0' );
iframe.setAttribute( 'allowfullscreen', 'allowfullscreen' );
iframe.setAttribute( 'allow', 'fullscreen; picture-in-picture' );
iframe.setAttribute( 'sandbox',
'allow-same-origin allow-scripts allow-popups allow-forms' );
iframe.setAttribute( 'referrerpolicy', 'no-referrer' );
iframe.title = cfg.titel;
iframe.style.width = cfg.breite;
iframe.style.height = cfg.hoehe;
iframe.style.border = '0';
container.appendChild( iframe );
var fuss = stil( document.createElement( 'div' ), {
fontSize: '85%',
color: '#54595d',
marginTop: '0.4em'
} );
var zurueck = document.createElement( 'a' );
zurueck.href = '#';
zurueck.textContent = 'Verbindung zu makertube.net wieder sperren';
zurueck.addEventListener( 'click', function ( e ) {
e.preventDefault();
setzeFreigabe( false );
sperre( container, cfg );
} );
fuss.appendChild( zurueck );
container.appendChild( fuss );
}
/* --- Einstieg -------------------------------------------------------- */
function baueEinbettung( container ) {
var $c = $( container );
var id = $.trim( String( $c.data( 'video' ) || '' ) );
if ( !id ) {
container.textContent = 'MakerTube-Einbettung: kein data-video angegeben.';
return;
}
var cfg = {
id: id,
titel: $.trim( String( $c.data( 'titel' ) || '' ) ) || 'Video',
breite: masszahl( $c.data( 'width' ), STD_BREITE ),
hoehe: masszahl( $c.data( 'height' ), STD_HOEHE ),
p2p: String( $c.data( 'p2p' ) || '' ) === '1',
start: $.trim( String( $c.data( 'start' ) || '' ) )
};
if ( freigegeben() ) {
lade( container, cfg );
} else {
sperre( container, cfg );
}
}
$( function () {
$( '.makertube-embed' ).each( function () {
try {
baueEinbettung( this );
} catch ( e ) {
this.textContent = 'MakerTube-Video konnte nicht geladen werden.';
if ( window.mw && mw.log ) {
mw.log.error( e );
}
}
} );
} );
}() );