bestimmte Stelle anspringen: HTML5/Flash media player CP

[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:

videojs-markers.zip

(251.88 KiB) Downloaded 162 times

[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...

[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…

[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.

[Oliver Georgi]

Ich erkenne die Schönheit und Olivers Bemühung, habe aber keinen Schimmer, wie alles funktionieren kann.

Du weißt, wie Du mich erreichst

[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...

[update]

Du weißt, wie Du mich erreichst

Du hast Post

[update]

Ist eine prima Sache geworden, danke noch mal dafür

[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

[Old Boy]

Jaaaa ... und wo sehen wir dein Beispiel ... das glaubt ja sonst "kein Mensch"