Page 3 of 3
Re: bestimmte Stelle anspringen: HTML5/Flash media player CP
Posted: Fri 22. May 2020, 20:04
by Oliver Georgi
Wichtig: Film von externer Quelle einbinden. Da muss ich mal an die Streamfunktionalität im System heran, sodass eben der Download des Films an Position X ansetzen kann.
Hier das Template:
Code: Select all
[ATTR_CLASS]<div class="{ATTR_CLASS}"[ATTR_ID] id="{ATTR_ID}"[/ATTR_ID]>[/ATTR_CLASS][ATTR_CLASS_ELSE][ATTR_ID]<div id="{ATTR_ID}">[/ATTR_ID][/ATTR_CLASS_ELSE]
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[PLAYER]
<div id="player-{ID}" class="video-player">
{PLAYER}
</div>
<!-- CSS: {TEMPLATE}lib/videojs-markers/dist/videojs.markers.min.css -->
<!-- JS: {TEMPLATE}lib/videojs-markers/dist/videojs-markers.min.js -->
<script>
if(typeof videoJS_{ID}_marker !== 'undefined' && videoJS_{ID}_marker.length) {
videoJS_{ID}.markers({
markers: videoJS_{ID}_marker,
breakOverlay: {
display: true
}
});
}
</script>
[/PLAYER]
[CAPTION]
<p class="video-player-caption">
{CAPTION}
</p>
[/CAPTION]
[LINK]
<p class="video-player-link">
<a href="{LINK}"[TARGET] target="{TARGET}"[/TARGET]>
@@More@@
</a>
</p>
[/LINK]
[ATTR_CLASS]</div>[/ATTR_CLASS][ATTR_CLASS_ELSE][ATTR_ID]</div>[/ATTR_ID][/ATTR_CLASS_ELSE]
Die Eingabe im CMS:
Und das Ergebnis:
Hier alles zusammengefasst:
Re: bestimmte Stelle anspringen: HTML5/Flash media player CP
Posted: Wed 27. May 2020, 20:58
by update
So, ich habe es jetzt hinbekommen, dass die Marker erscheinen und auch Text dazu. Vielen Dank dafür
Wie ich allerdings
Marker 1:
anchor #fmp1-20.5, #fmp1-m1
URL parameter fmp=1-20.5, fmp=1-m1
Marker 2:
anchor #fmp1-90, #fmp1-m2
URL parameter fmp=1-90, fmp=1-m2
zu einer Regung bekomme, erschließt sich mir noch in keinster Weise. Auch nicht, wie ich das automatisch in eine Klick-Liste bekomme. Ich habe mir die Beispieldateien angeschaut, aber auch nach etlichen Versuchen noch keinen Erfolg gehabt...
Re: bestimmte Stelle anspringen: HTML5/Flash media player CP
Posted: Thu 28. May 2020, 07:44
by Oliver Georgi
Dafür musst Du Dir zusätzliche Scripte schreiben.
Hier der Ansatz für die Anker-Variante und die direkte Übergabe der Zeit beim Lade der Seite:
Code: Select all
<script>
if(window.location.hash && window.location.hash.substr(0, 4) === '#fmp') {
var jumpToFmp = window.location.hash.substr(4).split('-');
if(jumpToFmp.length === 2) {
var videoJsPlayerId = 'videoJS_fmp' + jumpToFmp[0];
jumpToFmp[1] = parseFloat(jumpToFmp[1]);
if(jumpToFmp[1] !== NaN && typeof window.hasOwnProperty(videoJsPlayerId)) {
window[videoJsPlayerId].ready(function(){
this.currentTime(jumpToFmp[1]);
//console.log(this.currentTime());
});
}
}
}
</script>
Wenn das über Links realisiert werden soll, müsste man das umschreiben bzw. erweitern und an einen Clickhandler binden.
Code: Select all
<a href="#fmp1-90" class="videojs-click">Hüpfe zu Sekunde 90</a>
Code: Select all
<script>
function videoJsGoToByHash() {
if(window.location.hash && window.location.hash.substr(0, 4) === '#fmp') {
var jumpToFmp = window.location.hash.substr(4).split('-');
if(jumpToFmp.length === 2) {
var videoJsPlayerId = 'videoJS_fmp' + jumpToFmp[0];
jumpToFmp[1] = parseFloat(jumpToFmp[1]);
if(jumpToFmp[1] !== NaN && typeof window.hasOwnProperty(videoJsPlayerId)) {
window[videoJsPlayerId].ready(function(){
this.currentTime(jumpToFmp[1]);
//console.log(this.currentTime());
});
}
}
}
}
// jQuery
$(function() {
var videoJsGoToHashLinks = $('a.videojs-click');
if(videoJsGoToHashLinks.length) {
videoJsGoToHashLinks.on('click', function(event) {
event.preventDefault();
event.stopPropagation();
videoJsGoToByHash();
return false;
});
}
// Check Hash on Load
$(window).on('load', function() {
videoJsGoToByHash();
});
});
</script>
Da sind noch mehr Optionen möglich. Dazu muss man aber wissen, was man möchte und wie es realisiert werden soll. Aufwand, Zeit…
Re: bestimmte Stelle anspringen: HTML5/Flash media player CP
Posted: Sun 7. Jun 2020, 18:43
by update
So, nach gefühlten Tagen nonstop an diesem Thema habe ich:
Marker im Video, auch mit Text!
Was ich nicht habe:
Klick und Sprung zum Marker. Es will einfach nicht...
Ich erkenne die Schönheit und Olivers Bemühung, habe aber keinen Schimmer, wie alles funktionieren kann.
Ich bin durchaus gewillt, eine Rechnung zu empfangen, wenn das dann funktioniert: Per Hand geschriebene Liste, Klick -> Marker, los geht's. Oder/und Automatikliste aller Marker, Klickklick -> Marker, los geht's.
Bin echt am Ende. Kriege es einfach nicht hin.
Re: bestimmte Stelle anspringen: HTML5/Flash media player CP
Posted: Sun 7. Jun 2020, 18:45
by Oliver Georgi
update wrote: ↑Sun 7. Jun 2020, 18:43
Ich erkenne die Schönheit und Olivers Bemühung, habe aber keinen Schimmer, wie alles funktionieren kann.
Du weißt, wie Du mich erreichst
Re: bestimmte Stelle anspringen: HTML5/Flash media player CP
Posted: Sun 7. Jun 2020, 18:48
by update
Es gibt eine Fehlermeldung:
TypeError: window[videoJsPlayerId] is undefined
ReferenceError: $ is not defined
Achso: Der Sprung zu einem (einzelnen) Marker geht jetzt (habe die Scriptreihenfolge geändert), aber immer nur zum ersten Marker, nicht zum zweiten usw. Beim Klick auf den zweiten wird auch immer der erste angefahren...
Re: bestimmte Stelle anspringen: HTML5/Flash media player CP
Posted: Sun 7. Jun 2020, 19:50
by update
Du weißt, wie Du mich erreichst
Du hast Post
Re: bestimmte Stelle anspringen: HTML5/Flash media player CP
Posted: Fri 26. Jun 2020, 17:19
by update
Ist eine prima Sache geworden, danke noch mal dafür
Re: bestimmte Stelle anspringen: HTML5/Flash media player CP
Posted: Sat 4. Jul 2020, 22:33
by update
Ha! Jetzt ist das noch mal besser geworden, genau so hatte ich mir das vorgestellt. Marker in den Videos, diverse links, die die Marker anspringen und aus längeren Fließtexten die Marker und das Video direkt anscrollen, auch über Seiten hinweg!
Super Sache das.
Vielen Dank noch mal, Oliver
Re: bestimmte Stelle anspringen: HTML5/Flash media player CP
Posted: Sun 5. Jul 2020, 00:24
by Old Boy
Jaaaa ... und wo sehen wir dein Beispiel ... das glaubt ja sonst "kein Mensch"
