Videos und anderes darstellen

[beatovich]

hallo

Meine Aufgabe ist, eine Seite zu schreiben, auf der ich mehrere Videos mit Begleitmaterial präsentiere. Die Seite (der html-code) soll dabei den geringstmöglichen Pflege-Aufwand haben.

Die Videos sind auf youtube gehostet. Es sind keine separaten Seiten pro Video erwünscht. Die Videos sollen nur geladen werden, wenn sie explizit verlangt werden.

Ich habe es also mit Inhalt zu tun, wo nur eine Präsentation angezeigt wird, alle anderen Präsentationen sollen im Html verborgen gespeichert sein, und via Javascript soll die Präsentation ausgetauscht werden.

Die Frage ist, wie kann ich die mit der Video-Url verbundenen weiteren Daten (Links zu Noten im PDF-Format) im HTML am besten speichern. Die möglichen Anhänge zu jedem Video können sehr verschieden sein (also datenbankmässige Verwaltung ist hier nicht zielführend), und umfassen zum Beispiel Titel, Beschreibung, ev Lyrics, Downloadfiles oder weitere Links.

Welche Html Container-Elemente und Attribute sind da am Besten?

Optionen wären, in einem solchen Container-Element html zu notieren, oder aber JSON-Objecte zu notieren (in diesem Fall ein script Element).

Nach etwas nachdenken kam ich zum Schluss, dass iframes keine Lösung sind (nicht gut wartbar.) Für einmal muss also Javascript her, ohne einen klugen Ersatz zu haben.

danke für Ti[p]{1,2}s.

[Gunnar Bittersmann]

@@beatovich

Die Frage ist, wie kann ich die mit der Video-Url verbundenen weiteren Daten (Links zu Noten im PDF-Format) im HTML am besten speichern. Die möglichen Anhänge zu jedem Video können sehr verschieden sein (also datenbankmässige Verwaltung ist hier nicht zielführend), und umfassen zum Beispiel Titel, Beschreibung, ev Lyrics, Downloadfiles oder weitere Links.

Welche Html Container-Elemente und Attribute sind da am Besten?

<div>
  <iframe src="http://www.youtube.com/embed/…"></iframe>
  <dl>
    <dt>Titel:</dt>
    <dd>…</dd>
    <dt>Beschreibung:</dt>
    <dd>…</dd>
    ⋮
    <dt>weitere Links:</dt>
    <dd>
      <ul>
        <li><a href="…">…</a></li>
        ⋮
      </ul>
    </dd>
  </dl>
</div>
<div>
  ⋮
</div>
⋮

Was meinst du mit „welche Attribute“? Willst du das vielleicht noch noch mit Schema.org semantisch auszeichnen?

Optionen wären, in einem solchen Container-Element html zu notieren, oder aber JSON-Objecte zu notieren (in diesem Fall ein script Element).

Du kannst auch sowas wie

[
  {
     "embedUrl": "http://www.youtube.com/embed/…",
     "title": "…",
     "description": "…",
     ⋮
     "seeAlso": [
       {
         "url": "…",
         "title": "…"
       },
       ⋮
     ]
  },
  ⋮
]

verwenden und daraus die HTML-Elemente generieren.

Wenn nur jeweils eins der divs zu sehen sein soll, machst du Tabs draus.

LLAP 🖖

[beatovich]

hallo Gunnar

Das Entscheidende ist folgendes

<nav>
  <ul>
    <li><a href="video_001">Videotitel</a></li> <!-- JS-handler ergänzen -->  
  </ul>
</nav>

<section hidden id="video_001">
  <h3>Titel dieses Abschnitts</h3>
  <iframe class="video" width="480" height="270" 
	data-src="https://www.youtube.com/embed/dhU5BzZdG0I" 
	frameborder="0" allowfullscreen>
  </iframe>
  <div>
    <p>Beschreibung...</p>
	(möglicherweise komplexeres html hier.)
  </div>
  <ul>
    <li class="download"><a href="...">Ein PDF-Document</a></li>
    <li class="aside"><a href="...">Link zu weiterführendem Material</a></li>
  </ul>
</section>

Wichtig ist, dass ich keine src im Html angebe sonst wird das iframe sofort geladen. Deshalb hier data-src, das ich dann über Javascript behandeln lassen will.

Für mich ist dieser Code so gerade noch wartbar, aber angesichts der Tatsache dass ich diese Seite immer wieder mal ergänzen werde, würde ich etwas einfacheres wünschen.

Ich fürchte nur, wenn ich händisch JSON-Objecte beschreibe, dass ich da imer wieder Parsing-Fehler erzeuge.

BTW: siehst du im obigen Code gerade Stellen, die für ARIA Ergänzungen noch in Frage kommen?

[Gunnar Bittersmann]

@@beatovich

Wichtig ist, dass ich keine src im Html angebe sonst wird das iframe sofort geladen.

Ja, und? Was wäre daran schlimm? Im Iframe wird das Vorschaubild geladen, das Video erst, wenn der Nutzer auf ▶️ drückt.

LLAP 🖖

[beatovich]

hallo

Ja, und? Was wäre daran schlimm? Im Iframe wird das Vorschaubild geladen, das Video erst, wenn der Nutzer auf ▶️ drückt.

Wenn du mal beachtest, wieviel Inhalt da in den Frame durch Youtube geladen wird, dann möchte ich doch gerne diesen Verkehr vermeiden, wenn er nicht wirklich gefragt ist.

[Gunnar Bittersmann]

@@beatovich

Wenn du mal beachtest, wieviel Inhalt da in den Frame durch Youtube geladen wird, dann möchte ich doch gerne diesen Verkehr vermeiden, wenn er nicht wirklich gefragt ist.

Die üblichen Ausschnüffeleien der Nutzer durch Google. Wenn du die nicht willst, solltest du die Videos woanders hosten.

LLAP 🖖

[beatovich]

hallo

Die üblichen Ausschnüffeleien der Nutzer durch Google. Wenn du die nicht willst, solltest du die Videos woanders hosten.

Ja das ist vielleicht ein Punkt. Aber nicht der einzige. Aber ich habe mir deinen Vorschlag auch schon überlegt. Ich habe nur schon seit langer Zeit einen YT-Kanal, und arbeite testweise damit.

Hast du einen Vorschlag für einen kostenlosen Video-Hoster, der mir einbinden von Videos gestattet die er gleichzeitig nicht in seinen Suchergebnissen listet?

[Matthias Apsel]

Hallo beatovich,

Hast du einen Vorschlag für einen kostenlosen Video-Hoster, der mir einbinden von Videos gestattet die er gleichzeitig nicht in seinen Suchergebnissen listet?

Spricht etwas dagegen, die 20 Videos selbst zu hosten?

Bis demnächst
Matthias

[beatovich]

hallo

Hast du einen Vorschlag für einen kostenlosen Video-Hoster, der mir einbinden von Videos gestattet die er gleichzeitig nicht in seinen Suchergebnissen listet?

Spricht etwas dagegen, die 20 Videos selbst zu hosten?

Meine Inkompetenz 😉 Namentlich:

Ich habe gestern VLC installiert, und versucht mein Video von vfl nach webm zu konvertieren, was nicht funzte. Problem kann sein, dass ich bei der VLC installation halt doch bei DirectX den Haken hätte setzen müssen.

Bei 1.5GB kann ich mir leisten, eventuell eine Stunde Videos zu hosten. Das sollte also für meine Bedürfnisse hier reichen.

Ich müsste aber auch in der Lage sein, jeden Client zu bedienen. Das ist ja etwas was Video-Dienste vorzüglich können.

Vielleicht noch etwas zum Thema "kostenlos": Was mich stört sind weniger Kosten (falls angemessen), sondern dass es einen weiteren buchhalterischen Punkt gibt, der jährlich betreut werden muss.

[Matthias Apsel]

Hallo beatovich,

Ich habe gestern VLC installiert, und versucht mein Video von vfl nach webm zu konvertieren, was nicht funzte.

Nimm MP4 und das video-Element. WebM und ogg haben eine geringere Unterstützung. Wer MP4 nicht kann, hat Pech gehabt (natürlich abhängig vom Auftraggeber).

Edit: Dem bietest du einen Link, wo er sich das Video runterladen kann.

Bis demnächst
Matthias

[beatovich]

hallo

Nimm MP4 und das video-Element. WebM und ogg haben eine geringere Unterstützung. Wer MP4 nicht kann, hat Pech gehabt (natürlich abhängig vom Auftraggeber).

Edit: Dem bietest du einen Link, wo er sich das Video runterladen kann.

Si, ich habe vlc nochmals neu instaliert. Jetzt klappt's auch mit mp4.

Danke

[Gunnar Bittersmann]

@@Matthias Apsel

Nimm MP4 und das video-Element. […] Wer MP4 nicht kann, hat Pech gehabt

Man kann im video-Element mehrere source-Elemente mit Verweisen zu unterschiedlichen Videoformaten haben. Braucht man natürlich ein Mehrfaches an Speicherplatz auf dem Server.

Edit: Dem bietest du einen Link, wo er sich das Video runterladen kann.

Der sollte als Grundfunktionalität da sein. Der Videoplayer direkt auf der Seite ist progressive enhancement.

LLAP 🖖

[Gunnar Bittersmann]

@@beatovich

Hast du einen Vorschlag für einen kostenlosen Video-Hoster, der mir einbinden von Videos gestattet die er gleichzeitig nicht in seinen Suchergebnissen listet?

Nein. Und vermutlich auch kein anderer, weil es einen solchen Service nicht gibt. Nicht geben kann. Warum sollte jemand seine Rechnerkapazität (für die er bezahlt) anderen kostenlos zur Verfügung stellen?

Wer auch immer einen Video-Hosting-Dienst anbietet, tut dies aus anderen Motiven als dir einen Gefallen tun, sei es um sich durch Werbeeinbindung zu finanzieren oder gar wie Google die Weltherrschaft anzustreben.

LLAP 🖖

[beatovich]

hallo

Wenn nur jeweils eins der divs zu sehen sein soll, machst du Tabs draus.

hm... ich habe wohl ein sehr flxibles Kartenreiter System unter meinen Entwürfen, aber keines, dass mir 20 verschiedene Label von unterschiedlicher Länge gut anzeigt. Deshalb lieber eine davon abgesonderte Navigation.