#1

piotr

Forum-Sponsor  (133 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.tukhut.nl

hallo Forum-Mitglieder,

Für wen es interessiert: Ich habe für eine von mir betreuten Homepage
vor kurzem ein Video Dropdown-Box Script erstellt.
Das Script im Einsatz kann man sich hier anschauen.

Die wichtigsten Features sind:
-- Man kann über Dropdown aus einer Liste von Videos das gewünschte Video selektieren.
-- Jeden Tag in der Woche wird automatisch ein anderes Video als erstes gezeigt.
-- Auf Wunsch kann man auch Videos über eine rückwerts oder vorwärts Taste selektieren.
-- Youtube Matrix-Auswahl am Ende ist nicht eingeschaltet.

Würde mich freuen über evt. Verbesserungsvorschläge, Ergänzungen, usw.

<style>
 .txt3 {
 font-weight: normal;
 font-size: 100%;
 font-weight: bold;
 font-family: Verdana;   
 }
 .txt4 {
 font-weight: normal;
 font-size: 100%;
 font-weight: bold;
 font-family: Verdana;   
 margin-top: 2px;        
 margin-left: 0px;
 color:#000000;
 background: #F3FED0;
 border: 2px solid #92AD34;
 }
 .wrap {
     text-align:center
 }
 #div1 {
     display: inline-block;
     border: 2px solid red;
     float: left;
 }
 #div2 {
     display: inline-block;
     text-align: center;
     border: 0px solid green;
 }
 #div3 {
     display: inline-block;
     border: 2px solid blue;
     position: relative;
     float: right;
 }
 select.center {
 position: relative;
     display: inline-block;
 }
 input.right {
 position: relative;
     float: right;
 }
 </style>
 
 <script language=javascript>
 function setIframeSource() {
 //do whatever you're doing
 ;
 }
 function nextTiles(i) {
 var e = document.getElementById("overlaySelector");
 e.selectedIndex +=i ;
 //loop-around from the top or bottom depending on increment/decrement
 if(e.selectedIndex == -1) {
 if(i>0) e.selectedIndex = 0;
 else e.selectedIndex = e.length - 1;
 }
 setIframeSource(); //with the now updated selected option,
 //do whatever you were doing when the user manually chooses something in the dropdown
 }
 
 var theSelect,theIframe;
 var today = new Date(),
 
 number_of_day = today.getDay();
 $(document).ready(function() {
 //var today = new Date();
 //var n = today.getDay();
 theSelect = document.getElementById('overlaySelector');
 theIframe = document.getElementById('myIframe');
 theUrl = theSelect.options[number_of_day].value;
 theIframe.src = theUrl;
 });
 
 function setIframeSource() {
 var theUrl;
 if ( theSelect.selectedIndex > 0) {
  theUrl = theSelect.options[theSelect.selectedIndex].value;
      } else {
          theUrl = theSelect.options[number_of_day].value;
                 }
                theIframe.src = theUrl;
              }
 </script>
 
 <iframe id="myIframe" src="http://www.alumnei.nl/images/learninglane.jpg" frameborder="0" marginwidth="0" marginheight="0"  width="100%" height="373" related="0" allowfullscreen scrolling="no"></iframe>
 
 <div class="wrap">
 
 <div id="div1"><input type="button" value="vorige" onClick="nextTiles(-1)"></div>
 
 <div id="div2">
 <form id="form1" method="post">
 <label class="txt3"> De video-testimonial van:
 <select class="txt4" id="overlaySelector" onchange="setIframeSource()">
    <option value="http://www.alumnei.nl/images/learninglane.jpg">... maak hier je keuze ...</option>
    <option value="https://www.youtube.com/embed/tP4i7CiMHh4?rel=0&fs=0&autoplay=1&modestbranding=1">Monique van Neutegem</option>
    <option value="https://www.youtube.com/embed/Bx5Np1wIXYs?rel=0&fs=0&autoplay=1&modestbranding=1">Marjon Heintjes</option>
    <option value="https://www.youtube.com/embed/J-NChlqVAgY?rel=0&fs=0&autoplay=1&modestbranding=1">Els de Groot</option>
    <option value="https://www.youtube.com/embed/r_UB0rTH7SA?rel=0&fs=0&autoplay=1&modestbranding=1">Arthur Alferink</option>
    <option value="https://www.youtube.com/embed/t66K_g-fkFY?rel=0&fs=0&autoplay=1&modestbranding=1">Monique Fortuin</option>
    <option value="https://www.youtube.com/embed/8DC-3DiVL4A?rel=0&fs=0&autoplay=1&modestbranding=1">Erna Slangen</option>
    <option value="https://www.youtube.com/embed/8Gvu_lgZZAM?rel=0&fs=0&autoplay=1&modestbranding=1">Stephanie de Witte</option>
 </select>
 </label>
 </form>
 </div>
 
 <div id="div3"><input type="button" class="right" value="volgende" onClick="nextTiles(1)"></div>
 
 </div>
 
 

 


Dieser Beitrag wurde bereits 2 mal bearbeitet, zuletzt von »piotr« (28.04.2017, 13:28)
#2

Volker W.

Administrator  (7085 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Folgende Verbesserungstipps von mir:

  1. Der Code ist nicht HTML5-konform und sollte noch entsprechend validiert werden. Die im <iframe>-Tag von Dir verwendeten Attribute sind nämlich veraltet.
  2. CSS-mäßig kann man dies sicherlich weiter verfeinern. Die Buttons z.B. könnte man optisch noch etwas aufhübschen (bspw. so wie HIER).


Ansonsten nette Idee, obwohl ich persönlich keinen Bedarf daran habe. Das heißt natürlich nichts, denn andere mögen einen solchen Code durchaus gut gebrauchen können.


Viele Grüße,
Volker

Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#3

piotr

Forum-Sponsor  (133 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.tukhut.nl

hallo Volker,

danke für deine Tips. Werde ich in den nächsten Tagen umsetzen.
Bin aber ebenfalls noch dabei das Script etwas zu ändern.

Es sollte eigentlich mit 3 dynamischen Drop-Downs ausgestattet werden.
Erstes Dropdown enthält dan zB ein Auswahl aus Serien, wie:
- Feuerman Sam,
- Biene Maya
- Jonalu
- Wickie.

Das zweite Dropdown enthalt dann (dynamisch) die unterschiedlichen Saisons die es pro Serie gibt.

Das dritte Dropdown enthält letztendlich die jeweiligen Folgen die es dann in einem bestimmten Saison gibt.

Das ganze ist übrigens gedacht als eine Art Video Jukebox für Kinder in einem Kindergarten
die sich dann nur diese (vorab genehmigte) Serien, Saisons und Folgen anschauen können
anstatt über Youtube an falschen Orten zu geraten 😢

Die dynamische Darstellung in diesen 3 Drop-Down-Menus habe ich mittlerweile schon geschafft, das läuft einwandfrei.
Nur das dynamisch anzeigen von dem letztendlich selektierten Video im Iframe habe ich noch nicht ganz hingekriegt.

Viele Grüsse, Piotr

 

346 Aufrufe | 3 Beiträge