Video JS - poster-Bild-cover/enthalten

VideoJS 4 verwendet verschiedene CSS-Verhalten aus, was ich verwendet, um für das Standbild von dem, was ich sehen kann. Ich habe mich verändert background-size CSS "cover" statt "enthalten", was bedeutet, dass selbst wenn die Proportionen von meinem Bild sind falsch, das Bild füllt das poster div. Aus irgendeinem Grund, jedoch, wenn Sie klicken Sie auf die poster, um ein video starten, das Standbild scheint zu gehen zurück zu "enthalten", während das video geladen wird. Ist diese änderung gemacht anderswo?

Der website ist http://jamhouse.com.au/.

Vielen Dank im Voraus!

InformationsquelleAutor Simon Watson | 2013-08-14
  1. 13

    Als Sie angegeben haben das Plakat als ein Attribut auf das video-element, Sie tatsächlich am Ende mit zwei poster-Bilder - eins in der video-element selbst, und andere, die video.js erstellt als ein div überlagert das video-element. CSS gilt .vjs-poster-div nur. Wenn Sie das video Abspielen, die video.js poster-div ist versteckt und man kurz sehen das video-element ist eigenen anders skaliert poster.

    Wenn Sie anstatt das poster-Attribut geben Sie als option in data-setup statt, das video-element selbst nicht erstellen ein Standbild, aber Sie haben immer noch die stylable video.js poster div.

    <video id="showcase" class="video-js vjs-default-skin"
  controls="controls" preload="none" width="500" height="250"
  data-setup='{"poster":"http://jamhouse.com.au/media/video/orchlapse.jpg"}'>

    Beispiel: http://jsfiddle.net/tjFyC/

    • Versucht, die oben und kein hintergrund sichtbar ist.
    • Die zweite Antwort hier: stackoverflow.com/questions/10826784/... für mich gearbeitet.
    • Eine Kombination aus: * verwenden Sie poster-Attribut mit einem transparenten Bild 1x1 Pixel transparent, zum Beispiel. * verwenden Sie Daten-setup mit poster als Antwort sagte * wenn Sie möchten, dass das Plakat füllt die gesamte div-Element verwenden vjs-poster-Klasse im video. * überschreiben Sie css-Klassen: .vjs-poster { background-size: cover!important; object-fit: cover!important; } video[poster] { object-fit: cover; background-color:transparent; }
    InformationsquelleAutor misterben
  2. 0

    Was für mich gearbeitet ist, eine Kombination der vorherigen Antworten. Diese behandelt sowohl Poster:

      video[poster]{
    object-fit: cover;
  }
  .vjs-poster {
    background-size: cover;
    background-position: inherit;
  }
    InformationsquelleAutor Dan Ochiana
  3. 0

    einfach 

    video{
 object-fit: cover; 
}

    war für mich ziemlich gut

    InformationsquelleAutor Gleb Dolzikov
Schreibe einen Kommentar