Für die Videos, die nicht direkt geladen werden sollen, verwendest du das Attribut "preload='none'". Das "autoplay"-Attribut muss dann natürlich auch raus. Das "controls"-Attribut rein, damit der Besucher das Video auch manuell starten kann.

<video class="vid" preload="none" controls  loop>
   <source src="/vids/1.webm" type="video/webm" /> 
   <source src="/vids/1.mp4" type="video/mp4" /> 
   <source src="/vids/1.ogv" type="video/ogg" /> 
</video>
...zur Antwort

Hier eine etwas ausführlichere Anleitung:

Zunächst das HTML:

<img src="//lorempixel.com/output/city-q-c-200-200-9.jpg" class="small pic1" />
<img src="//lorempixel.com/output/city-q-c-200-200-8.jpg" class="small pic2" />
<img src="//lorempixel.com/output/city-q-c-200-200-7.jpg" class="small pic3" />
<img src="//lorempixel.com/output/city-q-c-200-200-6.jpg" class="small pic4" />

Jedes Bild bekommt standardmäßig die Klasse "small". In dieser steht dann:

img.small {
    position: absolute;
    width: 100px;
    height: auto;
    z-index: 1;
}

Jetzt bekommt jedes Bild seine individuelle Klasse um es zu positionieren:

.pic1 {
    top: 100px;
    left: 200px;
}

.pic2 {
    top: 100px;
    left: 300px;
}

usw.

Anstatt inline-JavaScript in jedem Bild zu verwenden, geben wir jedem Bild mit der Klasse "small" ein Event mittels "addEventListener". Wir benötigen ein Event für "mouseover" und einen für "mouseout"

    var images = document.getElementsByClassName('small') || document.querySelectorAll('small'); //Selektiert alle HTML-Elemente mit der Klasse "small"
for (var i = 0; i < images.length; i++) { //Durchläuft alle Elemente
    images[i].addEventListener('mouseover', function () { //Gibt jedem Element ein mouseOver Event
        this.className += ' big'; //Bei Mouseover wird dem Element die Klasse "big" zugewiesen
    });

    images[i].addEventListener('mouseout', function () { //Wenn man das Bild verlässt
        this.className = this.className.replace(/ big/g, ''); //Wird die Klasse "big" wieder entfernt
    });
}

Jetzt noch die Klasse "big" im CSS definieren

img.big {
    width: 150px;
    height: auto;
    z-index: 100;
}

Damit das ganze etwas ansprechender ausschaut, nutzen wir CSS3 und erweitern die Klassen "small" und "big" etwas:

img.small {
    position: absolute;
    width: 100px;
    height: auto;
    z-index: 1;
    transition: all 0.5s; /* Kontrolliert die Animationsgeschwindigkeit, Bild soll langsam größer werden*/
}

img.big {
    width: 150px;
    height: auto;
    z-index: 100;
    box-shadow: 5px 5px 5px #333333; /* Schatten hinzufügen, wenn das Bild hervorgehoben wird */
}

Und so sieht das ganze dann aus: http://fiddle.jshell.net/Pisi2012/LsDXD/

...zur Antwort

Versuch mal das hier.

<input type="text" id="search" />

<div class="ergebnis" id="ergebnis1">Max Mustermann</div>
<div class="ergebnis" id="ergebnis2">Manfred Mustermann</div>
<div class="ergebnis" id="ergebnis3">Erika Mustermann</div>

<script>
$('#search').on('keyup', function(){ removeBoxes(this.value) } );
function removeBoxes(value){
    var ergebnisse = $('.ergebnis');
    $.each(ergebnisse, function( key, value ) {
        var inhalt = value.innerHTML;
        var suche = new RegExp(value,'i');
        if(!inhalt.match(suche)){
            $(value).hide();
        }else{
            $(value).show();
        }
    }); 
}
</script>

Hier gibts die DEMO: http://fiddle.jshell.net/Pisi2012/5HjeF/

...zur Antwort

In 70 Stunden kannst du nicht so aufwendige Dinge umsetzen. Es muss auch realistisch sein. Vor allem wird in diesen Prüfungen immer sehr auf die Doku geschaut. Das Programm ist fast Nebensache.

Bau doch einfach einen kleinen Login. Dazu nutzt du HTML als Template, Javascript (AJAX) für den Request und PHP für die Datenbankanbindung. Wenn du das Ganze richtig ordentlich machst (Rückgabe usw in HTML, ErrorHandling,...) und eine Doku erstellst, dann sollte das reichen.

Mach bloß nicht zu viel zu, sonst stehst du da am Ende mit einem halben Programm und einer halben Doku. Außerdem musst du doch bestimmt noch eine Präsentation vorbereiten, oder? Das musste ich damals machen.

...zur Antwort
Weitere Inhalte können nur Nutzer sehen, die bei uns eingeloggt sind.