Weiter zum Inhalt

Beiträge mit Stichwort ‘JavaScript’

24
Aug

Livestreaming mit ffmpeg und HTML5

Update:

Ich bin nun auf eine Lösung der Wiedergabeprobleme unter Windows 10 gekommen. Anscheinend hat Microsoft etwas am Caching der Daten geändert.
Der Internet Explorer und Microsoft Edge versuchen aggressiver Daten zu cachen. So wurde das mpd-File nur einmal vom Server geladen und dann immer wieder gecacht. Dementsprechend wusste der Browser irgendwann nicht mehr, dass er neue Daten nachladen soll.

Die Lösung war den Apache Server einen Cache-Controll-Header mitzuschicken zu lassen. Das kann zum Beispiel so aussehen:

<Directory "D:/xampp/htdocs/chunks">
	<IfModule mod_headers.c>
		Header add Expires "Sun, 19 Nov 1978 05:00:00 GMT"
		Header add Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
	</IfModule>
</Directory>

Diese Konfiguration wird in die httpd.conf des Apaches eingefügt. Den Pfad zu euren Chunks muss im Directory-Tag natürlich angepasst werden.


 

Ich war in letzter Zeit auf der Suche nach einer Möglichkeit, Videoinhalte (z.B. Livebilder einer Webcam) über das Web zu streamen.

In diesem Bereich gibt es einige Lösungen, die Geld kosten (z.B. Wowza Media Streaming Server, Adobe Media Streaming Server) und auf das Browserplugin Adobe Flash Player setzen. Gerade in letzter Zeit gab es einige Sicherheitslücken im Flash Player, so dass ich ebenfalls darauf verzichten möchte.

Die meisten aktuellen Browser wie Mozilla Firefox, Google Chrome, Microsoft Internet Explorer unterstützt den vom W3 Konsortium festgelegten Standard der Media Source Extensions. Diese Schnittstelle ermöglicht es mittels JavaScript bzw. AJAX Video und Audio in Stücken (Chunks) vom Webserver zu laden und dem HTML5-Video-Element als Quelle zu übergeben. Weiterlesen »

18
Aug

JavaScript – JavaScript Check

Heute wollen wir auf unserer Webseite überprüfen, ob der Besucher JavaScript in seinem Browser aktiviert oder deaktiviert hat.

**adsenseBlockleft** Dies ist zum Beispiel nötig, wenn eure Seite zwingend JavaScript voraussetzt. In unserem Fall soll die Seite sowohl mit als auch ohne JavaScript geladen werden, jedoch wird das Absenden eines Formulars nur mit aktiviertem Script möglich sein.

Wir erstellen hierbei eine Seite mit Textfeld und Submitbutton, welcher beim Laden der Seite deaktiviert ist.

Dies geschieht mittels disabled=”disabled”. Man kann dem Button auch eine entsprechende Aufschrift geben: value=”Bitte JavaScript aktivieren!”.

Ist JavaScript beim Besucher aktiviert, so kann man beim Laden der Seite den Button aktivieren und dessen Value ändern:

<body onload=”document.order.submit.disabled=’ ‘; document.order.submit.value=’absenden’ “>

[html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Check</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<!– Überprüft ob JavaScript aktiviert ist, andernfalls ist der absenden-Button deaktiviert –>
<body onload="document.order.submit.disabled=”; document.order.submit.value=’absenden’">
<center>
<!– Eingabeformular Start –>
<form name="order" action="" method="post">
<table>
<tr><td>Geben Sie hier ihre E-Mail-Adresse ein:</td></tr>
<tr><td><input type="text" id="email" size="64" maxlength="64" /></td></tr>
<tr><td><input type="submit" name="submit" value="Bitte JavaScript aktivieren!" disabled="disabled"/></td></tr>
</table>
</form>
<!– Eingabeformular Ende –>
</center>
</body>
</html>
[/html]

Beispiel Vorschau

Das Schöne daran: Das Absenden mittels Eingabetaste ist ebenfalls gleich deaktiviert 🙂

29
Jul

JavaScript – Textfeld beim Laden fokussieren

Hier mal ein kleines Tutorial, in dem ich euch zeigen will, wie man den Fokus auf ein Texfeld setzt.

Es soll also nach dem Laden das Textfeld ausgewählt sein, sodass man gleich in das Textfeld schreiben kann ohne es vorher mit der Maus auswählen zu müssen. (Bsp. Google)

Zunächst benötigen wir also eine HTML-Datei mit einem Textfeld. Das könnte in etwa so aussehen:

[html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fokussiertes Textfeld</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<center>
<form action="">
<input type="text" id="textfeld" name="textfeld" size="32" />
</form>
</center>
</body>
</html>
[/html]

Jetzt kommt JavaScript ins Spiel:

Mit onload=”” erreichen wir, dass das ganze beim Laden der Seite passiert. Mit self.focus(); wird die aktuelle Seite und mit document.getElementById(‘feldID’).focus(); das entsprechende Feld, mit Hilfe dessen ID, fokussiert.

**adsenseBlock**

Da dies für die aktuelle Seite gelten soll, muss das ganze in den Body:

[html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fokussiertes Textfeld</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body onload="self.focus(); document.getElementById(‘textfeld’).focus();" >
<center>
<form action="">
<input type="text" id="textfeld" name="textfeld" size="32" />
</form>
</center>
</body>
</html>
[/html]

Wie ihr seht, mussten wir in unserem Beispiel nur die ID des zu fokusierenden Elements ändern. Also document.getElementById(‘textfeld’).focus(); .

Das wars auch schon 🙂