...
| Code Block |
|---|
| borderColor | grey |
|---|
| bgColor | #eeeeee |
|---|
| borderStyle | solid |
|---|
| lang | html |
|---|
|
<html>
<head>
<title>spring sensors</title>
<script src="springstreams.js"></script>
</head>
<body onunload="unload();">
<SCRIPT type="text/javascript">
if(-1 != navigator.userAgent.indexOf("MSIE"))
{
document.write('<OBJECT id="wmplayer" width="435" height="326" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-ms-wmp">');
document.write(' <param name="URL" value="http://wstreaming.zdf.de/zdf/veryhigh/070912_iaa_mim.asx">');
document.write(' <param name="AutoStart" VALUE="1">');
document.write(' <param name="ShowStatusBar" VALUE="1">');
document.write('</object>');
}
else {
document.write('<OBJECT id="wmplayer" width="435" height="326" type="application/x-ms-wmp">');
document.write(' <param name="URL" value="http://wstreaming.zdf.de/zdf/veryhigh/070912_iaa_mim.asx">');
document.write(' <param name="AutoStart" VALUE="1">');
document.write(' <param name="ShowStatusBar" VALUE="1">');
document.write(' </object>');
}
</SCRIPT>
<script type="text/javascript">
// "test" is the name of the tracked website
var sensors = new SpringStreams("test");
// wmplayer is the id of the stream above
sensors.track(wmplayer, {"stream":"videos/teststream"});
// uncomment for debugging
//sensors.debug = function(v) {
// window.status = v;
//}
function unload() {
sensors.unload();
// give time for submission
var start= new Date(); var now = null; do now = new Date();
while(now-start < 100);
}
</script>
</body>
|
Einbau mit HTML5
Vor Benutzung der springStreams-Funktionen muss die Javascript-Bibiliothek geladen werden. Dies geschieht über den folgenden Script-Tag:
| Code Block |
|---|
| borderColor | grey |
|---|
| bgColor | #eeeeee |
|---|
| borderStyle | solid |
|---|
| lang | html |
|---|
|
<script src=".../springstreams.js"></script>
|
Die springStreams-Funktionen stehen über die Klasse SpringStreams zur Verfügung. Bei der Erzeugung eines Objektes dieser Klasse wird die Websitekennung übergeben:
| Code Block |
|---|
| borderColor | grey |
|---|
| bgColor | #eeeeee |
|---|
| borderStyle | solid |
|---|
| lang | javascript |
|---|
|
var sensors = new SpringStreams("test");
|
test ist in diesem Fall die Kennung der Website. Diese Kennung muss durch die eigene, von spring zur Verfügung gestellte Kennung ersetzt werden.
Ein in die Website eingebettetes video- oder audio Element (siehe: http://www.w3schools.com/tags/ref_av_dom.asp) kann nun direkt gemessen werden. Um die Messung durchzuführen, wird das zu messende Objekt benötigt. Dies ist idR. durch die id des Object-Tag verfügbar. In diesem Beispiel wird das Objekt mit der ID video5 mit einer Referenz auf ein HTML video Element verwendet.
| Code Block |
|---|
| borderColor | grey |
|---|
| bgColor | #eeeeee |
|---|
| borderStyle | solid |
|---|
| lang | javascript |
|---|
|
sensors.track(video5, {});
|
Neben der ID des zu messenden Objektes können beschreibende Informationen zu diesem Objekt in Form eines Javascript-Objektes angegeben werden:
| Code Block |
|---|
| borderColor | grey |
|---|
| bgColor | #eeeeee |
|---|
| borderStyle | solid |
|---|
| lang | javascript |
|---|
|
var description = {
"stream": "videos/teststream"
"desc": "some additional description"
};
sensors.track(wmplayer, description);
|
Es ist möglich, mehrere zusätzliche Attribute zu der Beschreibung hinzuzufügen. Erwartet wird mindestens die Angabe von stream mit dem Namen/der Hierarchie des Streams.
Beispiel HTML5 video
| Code Block |
|---|
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Video Example</title>
<script src="./springstreams.js"></script>
</head>
<body onunload="unload()">
<script type="text/javascript">
var sensors = new SpringStreams("test");
</script>
<div align="center">
<video id='video' controls preload='none' >
<source id='mp4' src="./wetter.ard.20101209.mp4" type='video/mp4; codecs="avc1, mp4a"'></source>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>
<script type="text/javascript">
var description = {
"stream":"videos/news/wetter.ard.20101209.mp4"
};
var handle = sensors.track(video, description, sensors.HTML5Adapter);
function unload() {
sensors.unload();
}
</script>
</body>
</html> |
Einbau in Adobe Flash
Der Einbau in Adobe Flash erfolgt ähnlich dem in Javascript. Zur Benutzung der springStreams-Funktionen wird die Bibiliothek springstreams.as3.swc (bzw. springstreams.as2.swc für Actionscript2) in die Applikation eingebunden.
...