Middleware ist eine der coolen neuen Funktionen, die Video.js in Version 6.0 erhält.
Mit der Middleware können Sie nun die Kommunikation zwischen dem Player und der Technologie beeinflussen und ändern. Die Technologie ist die Abstraktion von Video.js vom Player und trennt die Player-API von der Wiedergabetechnologie. Mit Technologien können wir Dinge wie einen Flash-Fallback oder eine Youtube-Einbettung in Video.js einfügen, ohne die externe API oder das Aussehen des Players zu ändern.
Video.js-Middleware ist wie Express-Middleware, aber die Routen basieren auf Video-MIME-Typen.
Viele Video.js-Benutzer sind vielleicht mit Middleware aus Projekten wie Express vertraut. Die Video.js-Middleware unterscheidet sich nicht wesentlich von diesen. In beiden Fällen registrieren Sie Ihre Middleware gegen eine bestimmte Route, um die Kette nach unten zu rufen, wenn die Route ausgelöst wird. In Express basieren die Routen auf den Url-Pfaden. In Video.js basieren diese Routen auf dem MIME-Typ des Videos. Und wie bei Express gibt es "Stern"-Routen (*
) Middleware, die allen Routen entspricht.
Bei Middleware gibt es zwei wichtige Punkte, die zu beachten sind:
- Dynamische Quellenbehandlung
- Abfangen der Interaktionen zwischen Spieler und Technik
Ein Video-Katalog
Mit der dynamischen Quellenbehandlung können Sie Videos mit einem benutzerdefinierten Typ und einer benutzerdefinierten Quelle laden und asynchron auflösen. Ein gutes Beispiel hierfür ist ein Videokatalogsystem. Die Seite kann mit einer bestimmten Katalog-ID und einem speziellen MIME-Typ gerendert werden, etwa so:
<video controls class="video-js">
<source src="123" type="video/my-catalog">
</video>
Dann könnten Sie eine Middleware für diese Route registrieren - der Typ video/my-catalog
.
// middleware methods get the player instance as an argument
videojs.use('video/my-catalog', function(player) {
// middleware are expected to return an object with the methods on it.
// It can be a plain object or an instance of something.
return {
// setSource allows you to tell Video.js whether you're going to be handling the source or not
setSource(srcObj, next) {
const id = srcObj.src;
videojs.xhr({
uri: '/getVideo?id=' + id
}, function(err, res, body) {
// pass null as the first argument to say everything is going fine and we can handle it.
next(null, {
src: body.sourceUrl,
type: body.sourceType
})
});
}
};
});
Wenn Video.js dann initialisiert wird, ruft es die Middleware auf, die für video/my-catalog
.
Server-seitige Werbeeinblendung
Server Side Ad Insertion (SSAI) eignet sich hervorragend für Middleware. Es zeigt die Fähigkeit, die Wiedergabe und die technischen Interaktionen abzufangen. Ein Beispiel: Sie haben in Ihrem HLS-Manifest eine 30 Sekunden lange Anzeige, gefolgt von einem fünfminütigen Video. Sie möchten, dass die Zeitleiste die Zeit der Anzeige und die Zeit des Inhalts anzeigt, wenn beide abgespielt werden. Im Moment wird die Dauer der kombinierten Dauer von fünf Minuten und 30 Sekunden angezeigt (5:30
). Die Lösung besteht darin, eine Middleware hinzuzufügen, die weiß, wann die Werbung abgespielt wird, und dem Player mitteilt, dass die Dauer 30 Sekunden beträgt und wenn der Inhalt abgespielt wird, dass die Dauer fünf Minuten beträgt.
// register a star-middleware because HLS has two mimetypes
videojs.use('*', function(player) {
return {
setSource(srcObj, next) {
const type = srcObj.type;
if (type !== 'application/x-mpegurl' && type !== 'application/vnd.apple.mpegurl') {
// call next with an error to signal you cannot handle the source
next(new Error('Source is not an HLS source'));
} else {
// in here we know we're playing back an HLS source.
// We don't want to do anything special for it, so, pass along the source along with a null.
next(null, srcObj);
}
},
// this method gets called on the tech and then up the middleware chain providing the values as you go along
duration(durationFromTech) {
if (areWeCurrentlyPlayingAnAd(durationFromTech)) {
// since we're now in an ad, return the ad duration
// in a real example you'd calculate this based on your playlist
// rather than hardcode a value in here
return 30;
} else {
// we're playing back content, so, return that duration
return 5 * 60;
}
}
}
});
Anpassung der Abspielrate - eine Fallstudie
Eine einfache, aber interessante Middleware, die man sich ansehen sollte, ist der Playbackrate-Adjuster. Diese Middleware ändert die Zeiten der Steuerelemente in Abhängigkeit von der aktuellen Rate. Wenn Sie zum Beispiel ein 20-minütiges Video abspielen und die Rate auf 2x ändern, werden die Steuerelemente so angepasst, dass 10 Minuten angezeigt werden. Werfen wir einen Blick auf den Code.
videojs.use('*', function(player) {
/* ... */
return {
setSource(srcObj, next) {
next(null, srcObj);
},
duration(dur) {
return dur / player.playbackRate();
},
/* ... */
};
});
Hier fügen wir also eine Stern-Middleware hinzu, weil wir sie auf jedes Video anwenden wollen, unabhängig vom MIME-Typ. In setSource
nennen wir auch next
direkt mit null
und die srcObj
weil wir diese Middleware mit allen Quellen verwenden wollen. Wir richten auch unsere duration
Methode, um die Dauer aus der vorherigen Middleware zu übernehmen und sie durch die Wiedergaberate zu teilen, die wir vom Player erhalten.
Wenn Sie sich die Code können Sie einige andere Methoden neben der Dauer sehen. Sie sollen sicherstellen, dass andere Methoden, die sich auf das Timing verlassen, aktualisiert werden. Die beiden folgenden Methoden sind zu beachten currentTime
und setCurrentTime
. currentTime
wird aufgerufen, wenn wir wissen wollen, wie die aktuelle Zeit ist. setCurrentTime
wird aufgerufen, wenn wir suchen. Da der Benutzer in der verschobenen Zeit sucht, wollen wir unsere Änderungsoperation umgekehrt anwenden. Anstatt zu dividieren, wollen wir sie multiplizieren.
currentTime(ct) {
return ct / player.playbackRate();
},
setCurrentTime(ct) {
return ct * player.playbackRate();
},
Wenn Sie das, was wir bisher gemacht haben, anwenden, werden Sie feststellen, dass sich nichts ändert, die Kontrollleiste zeigt immer noch eine Dauer von 20 Minuten an. Das liegt daran, dass sich, soweit Video.js weiß, nichts geändert hat. Wir müssen also Video.js mitteilen, dass sich die Dauer geändert hat. Das können wir tun, indem wir die Tech speichern, die Video.js uns nach Abschluss der Quellenauswahl liefert.
videojs.use('*', function(player) {
let tech;
return {
setTech(newTech) {
tech = newTech;
}
/* ... */
};
});
Und dann, wenn die ratechange
Ereignis auslöst, teilen wir Video.js mit, dass sich die Dauer geändert hat, und Video.js aktualisiert die Steuerelemente entsprechend:
videojs.use('*', function(player) {
let tech;
player.on('ratechange', function() {
tech.trigger('durationchange');
tech.trigger('timeupdate');
});
return {
/* ... */
}
});
Sehen Sie sich ein Live-Beispiel und den vollständigen Code an.
Dieser Artikel wurde ursprünglich im Video.js-Blog veröffentlicht.