Hallo zusammen,
da ich - leider - nicht wirklich kompetent in JavaScript bin, habe ich mit dem folgenden Code Probleme. ich habe das Codeschnipsel im Internet gefunden und eingebaut. Es soll dazu führen, dass ein Video startet, sobald es auf dem Bildschirm beim Scrollen sichtbar wird. Leider funktioniert mein Code nicht - das Video startet nicht.
Ich muss gestehen, dass ich nicht mehr nachvollziehen kann, ob der Code generisches JavaScript ist oder zu JQuery oder einer anderen Sammlung gehört, vielleicht JS Bin. Ich habe sicherheitshalber JQuery eingebunden. Da ich die Funktion dringend für eine Auftragsarbeit benötige, wäre ich euch wahnsinnig dankbar dafür, wenn ihr mal einen Blick drauf werft. Noch besser wäre es, wenn ich von euch einen Code für JavaScript oder JQuery bekommen könnte, der diese Aufgabe erfüllt. Wäre das möglich? Hier der Code, zur besseren Übersicht gleich die ganze HTML-Seite:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="javascript/jquery-3.6.0.js" type="text/javascript"></script>.
<style>
#header{
/* height:500px;
background-color: #000; */
}
#video1 {
position: absolute;
left: 200px;
top: 1000px;
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
$(window).scroll(function(e)
{
var offsetRange = $(window).height() / 3,
offsetTop = $(window).scrollTop() + offsetRange + $("#header").outerHeight(true),
offsetBottom = offsetTop + offsetRange;
$("#video1").each(function () {
var y1 = $(this).offset().top;
var y2 = offsetTop;
if (y1 + $(this).outerHeight(true) < y2 || y1 > offsetBottom) {
this.pause();
} else {
this.play();
}
});
});
}
//-->
</script>
</head>
<body style="width: 4000px; height: 4000px;">
<div id="header"></div>
<div id="info"></div>
<div id="down">scroll down please...</div>
<div>
<video id="video1" source src="test1.mp4" width="30%"></video>
</div>
</body>
</html>
Alles anzeigen
Für eure Hilfe wäre ich sehr dankbar.