Contao-Camp 2024
Ergebnis 1 bis 11 von 11

Thema: Abspielbuttons im Videoplayer verkleinern

  1. #1
    Contao-Nutzer
    Registriert seit
    02.02.2015.
    Beiträge
    24

    Standard Abspielbuttons im Videoplayer verkleinern

    Hallo allerseits,

    auf meiner Seite erfolgreich-golfen.de möchte ich die Buttongröße der Videodateien auf der home
    verkleinern, da sie bei sehr großen oder auch mobilen Geräten zu groß wirken.

    Hat einer eine Idee?

    Danke!

  2. #2
    Gesperrt
    Registriert seit
    28.02.2016.
    Ort
    Kirchheim b. München
    Beiträge
    66

    Standard

    Das sind HTML5 Video Elemente. Meines Wissens nach kannst du diese nicht gestalten.
    Du meinst z.B den Play Button oder?

  3. #3
    Contao-Nutzer
    Registriert seit
    02.02.2015.
    Beiträge
    24

    Standard

    Ja, genau. Außerdem möchte ich ein Video davon automatisch starten, wenn die Seite aufgerufen wird. autostart=1
    Aber wo muss ich das einsetzen?

  4. #4
    Contao-Nutzer Avatar von Socki
    Registriert seit
    19.02.2015.
    Ort
    Wien
    Beiträge
    133

    Standard

    Wie bindest du das Video ein ?
    nicht über den Elementtyp Audio/Video, denn da gibts einen Hacken "Autoplay".

    EDIT: Hier bischen was zum einlesen https://developer.mozilla.org/de/doc.../Element/video, suche mal nach "autoplay".
    Geändert von Socki (16.03.2016 um 14:27 Uhr)

  5. #5
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Ort
    Tübingen
    Beiträge
    71

    Standard

    den Play Button kannst du mit CSS ändern

    .mejs-overlay-button {
    margin-top:2rem !important;
    top:0 !important;
    background-repeat: no-repeat;
    background-size: 3vw auto, contain;
    width:70px;
    height:40px
    }

    .mejs-overlay:hover .mejs-overlay-button {
    background-position: 0 -43px !important;
    }


    Video/Audio Element
    Player-Einstellungen

    Player-Größe Autoplay -> Haken setzen

    Das Video automatisch beim Laden der Seite abspielen.


    Schaust du: www.y2016.de

  6. #6
    Contao-Nutzer
    Registriert seit
    02.02.2015.
    Beiträge
    24

    Standard

    Hallo MAx, Danke für die Info.Und wo füge ich welchen Teil ein (oder alles)?

  7. #7
    Alter Contao-Hase
    Registriert seit
    20.03.2010.
    Ort
    Hannover
    Beiträge
    1.041

    Standard

    Zitat Zitat von Max Kittel Beitrag anzeigen
    .mejs-overlay-button {
    margin-top:2rem !important;
    top:0 !important;
    background-repeat: no-repeat;
    background-size: 3vw auto, contain;
    width:70px;
    height:40px
    }

    .mejs-overlay:hover .mejs-overlay-button {
    background-position: 0 -43px !important;
    }
    Dein Tip bringt nichts.
    Die unten genannte Seite enthält nur eine statische Tabelle mit 3 direkten Videoeinbindungen und einem Video (das zweite), bei dem man den rote Play-Icon beeinflussen könnte.

    Allerdings ist in wirklich keinem der Fälle derzeit der normale Videoplayer eingebunden, was bedeutet es gibt an KEINER Stelle eine der .mejs-Klassen.

  8. #8
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Ort
    Tübingen
    Beiträge
    71

    Standard

    Das Video ist mit dem Inhaltselement »Video/Audio« eingesetzt

    Kleine Korrektur da die vorige bei Größenänderungen den Button falsch anzeigte.
    :hover sollte auch noch angepasst werden, springt nach dem Ändern der Größe des Browserfensters

    Einfach in deine CSS schreiben

    .mejs-overlay-button{
    background-repeat: no-repeat;
    background-size: 3vw auto, contain;
    height: 5%;
    margin-top: 2rem !important;
    top: 0 !important;
    }

    @samuell

    Hier die erzeugte HTML. Warum sehe ich hier die mejs Klassen und warum funktioniert es bei mir im Firefox und Chrome?
    Was meinst du mit statischer Tabelle? Es ist auch nur ein Video, allerdings in drei Formaten (OGV, MP4 und WEBM)
    Was habe ich da falsch gemacht?

    div class="inside">
    <div id="index" class="mod_article first block">
    <div class="ce_player first last block">
    <span class="mejs-offscreen">Video Player</span>
    <div id="mep_0" class="mejs-container svg mejs-video" aria-label="Video Player" role="application" tabindex="0" style="width: 1216px; height: 684px;">
    <div class="mejs-inner">
    <div class="mejs-mediaelement">
    <div class="mejs-layers">
    <div class="mejs-poster mejs-layer" style="background-image: url("files/Videos/In-The-Clouds/Snapshots/In-The-Clouds.jpg"); width: 100%; height: 100%; display: none;">
    <div class="mejs-overlay mejs-layer" style="width: 100%; height: 100%; display: none;">
    <div class="mejs-overlay mejs-layer" style="display: none; width: 100%; height: 100%;">
    <div class="mejs-overlay mejs-layer mejs-overlay-play" style="width: 100%; height: 662px; display: block;">
    <div class="mejs-overlay-button" style="margin-top: -1.5px;"></div>
    </div>
    </div>
    <div class="mejs-controls" style="visibility: visible; display: block;">
    <div class="mejs-clear"></div>
    </div>
    </div>
    </div>
    </div>

  9. #9
    Alter Contao-Hase
    Registriert seit
    20.03.2010.
    Ort
    Hannover
    Beiträge
    1.041

    Standard

    Ich rede von Peters Seite, nicht von Deiner.

    Er hat das Problem und er hat Tabellen drin. Deine Lösung passt aber nicht zu SEINER Seite und SEINEM Problem.

  10. #10
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Ort
    Tübingen
    Beiträge
    71

    Standard

    @samuell

    da habe ich wohl etwas einfach falsch verstanden, bitte entschuldige.


    @Peter

    wenn du im Seitentemplate unter jQuery das j_mediaelement anklickst dann hast du auch die mejs Klassen

  11. #11
    Contao-Fan Avatar von Hoch-3
    Registriert seit
    16.11.2010.
    Ort
    Zürich
    Beiträge
    373
    Partner-ID
    7136

    Standard Abspielbuttons im Videoplayer ändern

    Mal wieder ich mit einer Frage...

    Im ce_player würd ich gerne die Abspielbuttons ändern. Also eine Lautsprecher und ein durchgestrichener Lautsprecher statt dem Start-Dreieck und den Pause-Doppelbalken. Geht das? Wenn ja, wie?

    Herzlichen Dank im Voraus.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •