Slick.js und html5 videoautoplay und Pause auf Video

8

Ist es möglich, slick.js mit html5 selbst gehosteten Videos zu verwenden, um ein Video ohne Benutzerinteraktion abzuspielen und anzuhalten?

Ich habe derzeit den folgenden Code, um einen Doppelschieberegler mit einer vertikalen Slickshow und einen Hauptbereich zu haben, in dem das große Bild und das Video erscheinen und automatisch scrollen. Dies wird auf einem Fernseher gehostet, so dass es keine Benutzerinteraktion geben wird.

WelcomeTV-Bildschirmseite

Wie kann ich die Folie, die das Video enthält, vollständig wiedergeben, sobald sie angezeigt wird, und wenn sie beendet ist, die Diashow fortsetzen und unbegrenzt wiederholen. Die Videos können verschiedene Längen enthalten, so dass die Länge dynamisch ermittelt werden muss.

Ich habe versucht, den Code auf diese Frage zu implementieren, wie auch immer ich es getan habe nicht in der Lage, mein Beispiel zum Laufen zu bringen.

%Vor%

Demo

    
Matthew Johnson 20.07.2015, 16:35
quelle

1 Antwort

14

Ja, das kann mit JavaScript gemacht werden.
Wenn die Videofolie zum currentSlide wird, musst du:

  1. Halten Sie den Schieberegler
  2. gedrückt
  3. spiele das Video

Sie können dies mit dem slick.js-Ereignis afterChange :

tun %Vor%

Sie müssen außerdem einen Ereignis-Listener für den Zeitpunkt hinzufügen, an dem das Video endet, damit der Schieberegler fortgesetzt werden kann. Sie können dies folgendermaßen tun:

%Vor%

Wenn Sie Probleme damit haben, fügen Sie bitte ein JSFiddle hinzu und ich werde versuchen, Ihnen dabei zu helfen.

Bearbeiten: Hier ist ein funktionierender JSFiddle

%Vor% %Vor% %Vor%
    
Asaf David 20.07.2015, 17:58
quelle

Tags und Links