2016-07-26 2 views
1

Ich mag eine Webseite mit einer Wand zum Anzeigen von sehr kurzen Videos:angezeigte mindestens 100 Videos auf einer einzigen Webseite

  • Die Videos sind 1-2s lang und alle die gleiche Größe (ca. 100 Pixel breit)
  • Sie sind Display in Form einer Matrix (zB 10x10)
  • Abspielen der Videos durch Interaktion mit dem Benutzer (Klick oder Hover ausgelöst wird)

Bisher habe ich versucht, das Einfügen Video-Tags mit jQuery aber wenn ich ungefähr 60 erreiche Videos, mein Browser (Chrome) hängt.

Meine Frage: Gibt es einen Trick, um eine so große Anzahl von Videos auf einer einzigen Webseite anzuzeigen und auf welches Problem ich achten sollte, um sicherzustellen, dass die Videos bereit sind, bevor der Benutzer zu interagieren beginnt.

EDIT: Ich verstehe, das ist nicht üblich, aber dieses Projekt ist eine Kunstinstallation und ich muss in der Lage sein, alle Videos (oder bewegte Bilder) auf Anfrage und ohne Verzögerung auszulösen. Auf der anderen Seite ist die anfängliche Ladezeit nicht so wichtig, da der Benutzer auf die schwere Last aufmerksam gemacht wird.

Thanks :)

+0

Sie können versuchen, nur eine Liste von Bildern zu zeigen, und wenn der Benutzer ein bestimmtes Bild anklickt, wird das Video geladen und abgespielt. – Christophvh

Antwort

0

IMO "Videos bereit sind, (...), bevor der Benutzer zu interagieren beginnt" im Widerspruch zu einem leightweight DOM. Du kannst nicht beides haben. Ich würde versuchen, Miniaturansichten anzuzeigen und das Video mit der Interaktion zu initialisieren.

+0

Ja, dem stimme ich generell zu. Aber dieser spezielle Fall ist eine Kunstinstallation, also brauche ich alle Videos ohne Verzögerung zu spielen. Die anfängliche Ladezeit spielt keine große Rolle. –

0

Sie könnten versuchen, innerhalb von html die

<video width="320" height="240" controls> 
    <source src="embed Link" type="video/mp4"> 
    Your browser does not support the video tag. 
</video> 

Tag der

verwenden zu verwenden. Dann können Sie auf jedes Objekt zugreifen, indem Sie ihm ein Tag geben

Verwandte Themen