Director
Hi, ich habe ein recht merkwürdiges Problem mit Ajax. Ich beschäftige mich das erste Mal damit, also vielleicht übersehe ich das Offensichtliche.
Was ich machen möchte:
Wenn meine Seite geladen wird, frage ich mit Modernizr ab, ob ein Touchgerät verwendet wird. Wenn nicht, lade ich ein Video in den Container mit der id "header-video". Erst wenn man dann auf einen Button klickt (.view-video), soll ein zweites Video in einem Overlay (#video-fullscreen) geladen werden.
Das Problem:
Wie man am Code sehen kann, befinden sich sowohl #video1, als auch #video2 in der gleichen Datei (videos.html). Sie enthält nur den Code für die Videos:
#video1 wird wie gewollt geladen, das Dumme ist nur, das #video2 gleich mit geladen wird, ohne dass der Button geklickt wurde. Ich höre dann den Ton des zweiten Videos im Hintergrund, es ist aber nicht sichtbar. Auch wenn ich #video2 in eine andere Datei auslagere, die nur den Code für das Video enthält, wird das Video weiterhin gleichzeitig mit #video1 aus der videos.html geladen.
Erst wenn ich #video2 in eine andere Datei packe und aus der videos.html entferne, kann ich beide Video unabhängig voneinander laden.
Mein Frage: Ist das das normale Verhalten von Ajax? Oder liegt es an der .load() Methode? Oder stimmt einfach irgendwas mit meinem Code nicht?
Der relevante Code:
Was ich machen möchte:
Wenn meine Seite geladen wird, frage ich mit Modernizr ab, ob ein Touchgerät verwendet wird. Wenn nicht, lade ich ein Video in den Container mit der id "header-video". Erst wenn man dann auf einen Button klickt (.view-video), soll ein zweites Video in einem Overlay (#video-fullscreen) geladen werden.
Das Problem:
Wie man am Code sehen kann, befinden sich sowohl #video1, als auch #video2 in der gleichen Datei (videos.html). Sie enthält nur den Code für die Videos:
HTML:
<video id="video1" class="video-teaser vjs-video video-js vjs-default-skin" autoplay loop muted>
<source src="videos/pageTestTeaser.mp4" type="video/mp4" />
</video>
<video id="video2" class="video-teaser vjs-video video-js vjs-default-skin" controls autoplay>
<source src="videos/pageTestFull.mp4" type="video/mp4" />
</video>
#video1 wird wie gewollt geladen, das Dumme ist nur, das #video2 gleich mit geladen wird, ohne dass der Button geklickt wurde. Ich höre dann den Ton des zweiten Videos im Hintergrund, es ist aber nicht sichtbar. Auch wenn ich #video2 in eine andere Datei auslagere, die nur den Code für das Video enthält, wird das Video weiterhin gleichzeitig mit #video1 aus der videos.html geladen.
Erst wenn ich #video2 in eine andere Datei packe und aus der videos.html entferne, kann ich beide Video unabhängig voneinander laden.
Mein Frage: Ist das das normale Verhalten von Ajax? Oder liegt es an der .load() Methode? Oder stimmt einfach irgendwas mit meinem Code nicht?
Der relevante Code:
Javascript:
function loadHeaderVid(){
var windowHeight = $(window).height();
if(!Modernizr.touch){
if(!(document.getElementById('video1'))){
$('#header-video').load('videos.html #video1', function(){
//hier steht noch einiges Zeug für die Initialisierung von video.js
});
}
}
}
function loadFullscreenVid(){
var windowHeight = $(window).height();
$('.view-video').click(function(){
//testen, ob video-Element exisiert
if(!(document.getElementById('video2'))){
$('#video-fullscreen').load('videos.html #video2', function(){
//hier steht noch einiges Zeug für die Initialisierung von video.js
$('#video-fullscreen').fadeIn(1000);
});
}
else{
$('#video-fullscreen').fadeIn(1000);
}
});
}