1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

WordPress: Sydney Video slides

Dieses Thema im Forum "Content Management Systeme (CMS)" wurde erstellt von elfi812, 21. September 2016.

  1. elfi812

    elfi812 Mitglied

    Hallo,

    da im WordPressForum irgendwie tote Hose ist, probier ichs mal hier:
    "Sydney" ist dieses populäre gratis WordPress theme. Da gibts standardmäßig einen Header-Bildslider, der gleich oben steht und immer 100% Höhe des Browserfensters hat. http://demo.athemes.com/sydney/

    Nun hab ich gesehen (im Code auch) dass jemand den Bildslider so bearbeitet hat, dass zwar im Code Bildpfade stehen, aber real Videoslides gezeigt werden. (Bilder dann nur bei mobil). Wie geht das?
    besagte Webseite: das-tonwerk.de

    (Hatte erst probiert das zu imitieren, indem ich den offiziellen Header-Slider oben ausschalte und einfach in den Contenbereich, dann nen Videoslider reintu. Aber das geht halt leider nicht 100% des Browsers. (der "Header-Bildslider" liegt übrigens im Code außerhalb des Bereichs "Content" daran liegts vielleicht irgendwie.
    Ich benötige nun einen Tipp, wie ich ENTWEDER in den standard Header-Slider Videoslides reinbekomme, ODER wie ich bei ausgeschaltetem Header-Slider, die erste Zeile Content 100% Browserhöhe bekomme.)
     
  2. elfi812

    elfi812 Mitglied

    Dann mal anders gefragt:
    Wenn online auf einer Webseite im Quellcode und im CSS nur Bilder liegen (durch Firebug abgecheckt)...wie geht das dann, dass man trotzdem anstelle des Bildes ein MP4 aufruft?

    Ich kenne Videotags die ein Fallback-Bild haben, aber das ist es hier nicht... es ist wie ein Bild das ein Video-Fallback hat und das Interessante: der Videofallback steht nicht mal irgendwo im Code??!
     
  3. sheel

    sheel I love Asm Administrator

    Firebug kann JS-Aktionen teilweise leider nicht wirklich anzeigen...
    und die besagte Seite funktioniert ohne JS überhaupt nicht, also vermute ich einfach mal, dass auch das JS ist.
     
  4. elfi812

    elfi812 Mitglied

    Ok, danke für das Feedback. Ist dann irgendwie bisschen zu knifflig für mich.
     
  5. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Firebug listet mir unter "Netzwerk -> Alles" zwei MP4-Dateien namens "tonwerk_background.mp4" und "tonwerk_showreel.mp4" auf, die sich im HTML-Code in den Zeilen 199 u. 228 wiederfinden:
    Code (HTML5):
    1. <!-- Zeile 199 --><video autoplay loop poster="http://www.das-tonwerk.de/wp-content/themes/DasTonwerk/vid/tonwerk_background/tonwerk_background.jpg" id="bgvid">
    2.     <source src="http://www.das-tonwerk.de/wp-content/themes/DasTonwerk/vid/tonwerk_background/tonwerk_background.mp4" type="video/mp4">
    3.  
    4. <!-- Zeile 228 --><video src="http://preview.das-tonwerk.de/wp-content/themes/DasTonwerk/vid/tonwerk_showreel/tonwerk_showreel.mp4" id="so_bgvideo_57e94ffa9a1db" class="so_video_bg jquery-background-video" poster="http://preview.das-tonwerk.de/wp-content/themes/DasTonwerk/vid/tonwerk_showreel/tonwerk_showreel.jpg" data-bgvideo-fade-in="0"  data-bgvideo-show-pause-play=true data-bgvideo-pause-play-x-pos="left" data-bgvideo-pause-play-y-pos="top">
    5.                     <source src="http://preview.das-tonwerk.de/wp-content/themes/DasTonwerk/vid/tonwerk_showreel/tonwerk_showreel.mp4" type="video/mp4">                                                    </video>
    6.          
    7.             <script type="text/javascript">
    8.             (function() {
    9.                 // Move the video and container into the row as the first child
    10.                 var video_tag = document.getElementById("so_bgvideo_57e94ffa9a1db");
    11.                 var video_overlay = document.getElementById("so_bgvideo_overlay_57e94ffa9a1db");
    12.                 var video_row = video_tag.previousSibling;
    13.                 while(video_row && video_row.nodeType != 1) {
    14.                    video_row = video_row.previousSibling;
    15.                 }
    16.                 var row_inner = video_row.firstChild;
    17.                 row_inner.insertBefore( video_tag, row_inner.firstChild );
    18.                 if( video_overlay ) {
    19.                     row_inner.insertBefore( video_overlay, video_tag.nextSibling);
    20.                 }
    21.                 row_inner.className += ' so_video_bg_row jquery-background-video-wrapper';
    22.                 // video_tag.play();
    23.             }());
    24.             </script>
    "tonwerk_background.mp4" füllt den Seitenhintergrund aus, "tonwerk_showreel.mp4" wird beim Klick auf die Bilder (unter "Tonwerke" http://www.das-tonwerk.de/#pg-6-1) gestartet. Für jedes Bild existiert eine Sprungmarke innerhalb des Videos, das alle einzelnen Trailer beinhaltet.

    Und welches Bild wird hier nun Deiner Meinung durch das Video ersetzt?
     
    sheel gefällt das.
  6. elfi812

    elfi812 Mitglied

    Aha ok, vielen Dank. Den Tab hab ich noch nie groß genutzt...hab immer nur bei "HTML" geguckt.
     
Die Seite wird geladen...