bestimmte Stelle anspringen: HTML5/Flash media player CP

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: bestimmte Stelle anspringen: HTML5/Flash media player CP

Post 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:
Bildschirmfoto 2020-05-22 um 19.55.59.png

Und das Ergebnis:
Bildschirmfoto 2020-05-22 um 19.50.42.png

Hier alles zusammengefasst:
videojs-markers.zip
(251.88 KiB) Downloaded 129 times
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: bestimmte Stelle anspringen: HTML5/Flash media player CP

Post 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...
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: bestimmte Stelle anspringen: HTML5/Flash media player CP

Post 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…
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: bestimmte Stelle anspringen: HTML5/Flash media player CP

Post 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.
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: bestimmte Stelle anspringen: HTML5/Flash media player CP

Post 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
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: bestimmte Stelle anspringen: HTML5/Flash media player CP

Post 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...
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: bestimmte Stelle anspringen: HTML5/Flash media player CP

Post by update »


Du weißt, wie Du mich erreichst
Du hast Post :)
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: bestimmte Stelle anspringen: HTML5/Flash media player CP

Post by update »

Ist eine prima Sache geworden, danke noch mal dafür :)
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: bestimmte Stelle anspringen: HTML5/Flash media player CP

Post 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! :-D
Super Sache das.
Vielen Dank noch mal, Oliver :-)
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Old Boy
Posts: 1203
Joined: Fri 23. Nov 2012, 13:52

Re: bestimmte Stelle anspringen: HTML5/Flash media player CP

Post by Old Boy »

Jaaaa ... und wo sehen wir dein Beispiel ... das glaubt ja sonst "kein Mensch" :wink:
Post Reply