Page Comparison

Version	1.57
Datum	0208.1105.20102013
Author	Christopher Wirtz

Versionshistorie

Version	Author	Datum	Bemerkungen
0.1	23.05.2005	Christopher Wirtz	initial
0.5	26.05.2005	Christopher Wirtz	Changes
1.0	02.06.2005	Christopher Wirtz	Release
1.1	12.03.2007	Christopher Wirtz	Flash added
1.2	06.07.2009	Christopher Wirtz	Review/Changes
1.3	14.07.2009	Christopher Wirtz	Added Example to set the „duration" „duration“ manually in ActionScript
1.4	29.06.2010	Christopher Wirtz	Unload delay
1.5	02.11.2010	Frank Kammann	Add Example using a NetStreamAdapter, streaming segments and parallel streams
1.615	14.03.2011 23.03.2011	Frank Kammannadd more Ralf Cornehl	Description of the general operation (API) and information on the security settings for Flash Review/Changes
1.7	08.05.2013	Frank Kammann	Add documentation for the default HTML5 Adapter.

Inhaltsverzeichnis

Table of Contents

Einleitung

Ob Nachrichtensendungen, Produkt-Präsentationen oder Online-Radioprogramme - – alle setzen mittlerweile Audio- und Video-Streams als Kommunikationsmittel ein.

...

Das vorliegende Dokument beschreibt die Integration der Streamingmessung für verschiedene Anwendungsfälle.

Funktionsbeschreibung der Messung

Gliffy

size	L
name	sensor
align	left
version	5

...

Include Page

	Konzept Streamingmessung
	Konzept Streamingmessung

Einbau über Javascript für beliebige Player (auch proprietäre)

...

Code Block

borderStyle

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	html	solid


<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	borderStyle	solid

	
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.

...

Code Block

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	javascript
borderStyle	solid


var myAdapter = {

	"getMeta" : function(id) {
		return {
			"pl" :"own player",
			"pvplv" :"version1",
			"sx" : screen.width,
			"sy" : screen.height
		}
	},
	"getDuration" : function(id) {
		return 0;
	},
	"getPosition" : function(id) {
		return new Date().getTime() / 1000;
	}
};

1. Die Funktion getMeta wird verwendet um eine Beschreibung des Players und des verfügbaren Bildschirms zu beziehen. Bei Aufruf dieser Funktion wird als Rückgabe ein Objekt mit den folgenden Attributen erwartet:

`pl`	eine kurze Beschreibung des Players
`pvplv`	die Version des Players
`sx`	die Breite des Bildschirms in Pixel
`sy`	die Höhe des Bildschirms in Pixel

2. Die Funktion getDuration wird verwendet um die Gesamtlänge des Streams zu ermitteln, sie liefert die Gesamtdauer des Streams in Sekunden. Sollte die Dauer des Streams nicht zu ermitteln sein, so sollte diese Funktion 0 liefern.

3. Die Funktion getPosition wird verwendet, um die aktuelle Position im Stream zu ermitteln. Sie liefert die aktuelle Abspielposition in Sekunden. Diese Funktion dient zur Ermittlung der jeweiligen Abspiel-, Stop- und Spulintervalle.

Allen Funktionen wird beim Aufruf das zu messende Objekt (aus dem ersten Parameter des Aufrufs von sensors.track(...…)) übergeben.

Der selbst erstellte Adapter kann nun zur Messung verwendet werden:

Code Block

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	javascript	borderStyle	solid


sensors.track(someObject, desc, myAdapter);

Die Ausführung der Messung kann überwacht werden, indem die Methode debug auf dem SpringStreams-Objekt belegt wird:

Code Block

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	javascript
borderStyle	solid


sensors.debug = function(v) {
        window.status = " " + v;
}

Bei jeder Übermittlung des Sensors an die Zählsysteme wird diese Methode mit dem aufgerufenen URL als Parameter (String) aufgerufen.

SpringStreams verwendet keine Eingriffe in das Event-Model des umgebenden Dokuments, daher ist es notwendig das Verlassen oder Beenden der Wiedergabe des Streams durch Ereignisse ausserhalb des Players den an die Sensoren mitzuteilenzu übermitteln. Die einfachste Variante ist das einfügen Einfügen einer unload-Funktion mit Aufruf der Methode sensors.unload() beim Verlassen der Webseite:

Code Block

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	javascript	borderStyle	solid


function unload() {
        sensors.unload();
}

...

Code Block

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	javascript	borderStyle	solid


function unload() {
	sensors.unload();
        // give time for submission
	var start= new Date(); var now = null; do now = new Date();  
        while(now-start < 100);
}

...

Code Block

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	html	borderStyle	solid


<body onunload="unload();">

...

Code Block

borderStyle

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	javascript	solid


var stream = sensors.track(someObject, desc, myAdapter);
...
stream.stop();

...

Code Block

borderStyle

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	javascript	solid


sensors.track(rvplayer, description, sensors.RVStreamAdapter);

...

Code Block

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	html	borderStyle	solid


<html>
<head>
<title>spring sensors</title>
<script src="springstreams.js"></script>
</head>
<body onunload="unload();">
<script type="text/javascript">

var sensors = new SpringStreams("test"); 
var adapter = {
	"getMeta" : function() {
		return {
			"pl" :"own player",
			"pvplv" :"version1",
			"sx" : screen.width,
			"sy" : screen.height
		}
	},
	"getDuration" : function() {
		return 1000;
	},
	"getPosition" : function() {
		return new Date().getTime() / 1000;
	}
};

var desc = {
	"stream": "videos/teststream"
}

sensors.track("someid", desc, adapter);

// 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>

...

Code Block

borderStyle

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	html	solid


<script src=".../springstreams.js"></script>

...

Code Block

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	javascript
borderStyle	solid


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.

...

Code Block

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	javascript	borderStyle	solid


sensors.track(wmplayer, {}, sensors.WMStreamAdapter);

Neben der ID des zu messenden Objektes können beschreibende Informationen zu diesem Objekt in Form eines Javascript-Objektes angegeben werden:

Code Block

borderStyle

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	javascript	solid


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.

...

Code Block

borderStyle

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	html	solid


<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 wird muss die Javascript-Bibiliothek springstreams.as3.swc (bzw. springstreams.as2.swc für Actionscript2) in die Applikation eingebunden. 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 Klasse SpringStreams" zur zur Verfügung. Bei der Erzeugung eines Objektes dieser Klasse wird die Websitekennung übergeben:

Code Block

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	javascript	borderStyle	solid


var sensors:SpringStreams = new SpringStreams("test");

test ist ist in diesem Fall die Kennung der Website. Diese Diese Kennung muss durch die eigene, von spring zur Verfügung gestellte Kennung ersetzt werden.Die Messwerte werden über eine HTTP-Anfrage an die Zählsysteme übermittelt. Soll diese Anfrage über SSL (HTTPS) erfolgen, so kann dies dem Sensor übermittelt 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(video5, 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

	javascript
	javascript

<!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.

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:SpringStreams = 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.

Die Messwerte werden über eine HTTP-Anfrage an die Zählsysteme übermittelt. Soll diese Anfrage über SSL (HTTPS) erfolgen, so kann dies dem Sensor übermittelt werden:

Code Block

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	javascript

var sensors:SpringStreams = new SpringStreams("test", true);

Ein NetStream-Objekt kann nun direkt gemessen werden:

Code Block

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	javascript

sensors.track(ns,{});

Dem gemessenen Objekt können weitere, beschreibende Informationen mitgegeben werden:

Code Block

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	javascript

var description:Object = {
	"stream": "videos/teststream",
	"desc": "some additional infos",
	"sx": video.width,
	"sy": video.heigth,
};
sensors.track(ns, description);

Es ist möglich weitere Attribute hinzuzufügen. Erwartet werden hier mindestens stream mit dem Namen/der Hierarchie des Streams und sx bzw. sy mit der Grössenbeschreibung des sichtbaren Bereiches.

Anfragen an das Messsystem werden über die ActionScript-Funktion trace in der Debug-Umgebung protokolliert.

Die Klasse SpringStreams definiert eine Funktion SPRING_UNLOAD über die Flash-Klasse ExternalInterface, sofern diese verfügbar ist. Analog zu der Javascript-Implementation kann diese Funktion Verwendet werden um das Beenden der Laufzeitumgebung zu signalisieren. Beim Einbau in eine Webseite kann dies wie folgt geschehen:

Code Block

borderColor	grey
bgColor	#eeeeee
langborderStyle	javascriptsolid
borderStylelang	solidhtml


var sensors:SpringStreams = new SpringStreams("test", true);

Ein NetStream-Objekt kann nun direkt gemessen werden:

Code Block

borderColor	grey
bgColor	#eeeeee
lang	javascript
borderStyle	solid


sensors.track(ns,{});

...

<body onunload="unload()">
...
function unload() {
   FlexProject.SPRING_UNLOAD();
}

Da die Browser nach Abschluss der Unload-Sequenz die Seite beenden, wurde uU. das abschließende Signal noch nicht ausgelöst. Eine Verbesserung schafft der Einsatz einer kurzen, vom Benutzer nicht bemerkbaren Verzögerung am Ende der Unload-Sequenz:

Code Block

borderColor	grey
bgColor	#eeeeee
borderStyle	solid
lang	javascript
borderStyle	solid


var description:Object = {
	"stream": "videos/teststream",
	"desc": "some additional infos",
	"sx": video.width,
	"sy": video.heigth,
};
sensors.track(ns, description);

Es ist möglich weitere Attribute hinzuzufügen. Erwartet werden hier mindestens stream mit dem Namen/der Hierarchie des Streams und sx bzw. sy mit der Grössenbeschreibung des sichtbaren Bereiches.

Anfragen an das Messsystem werden über die ActionScript-Funktion trace in der Debug-Umgebung protokolliert.

...

function unload() {
	FlexProject.SPRING_UNLOAD();
        // give time for submission
	var start= new Date(); var now = null; do now = new Date();  
        while(now-start < 100);
}

Wobei FlexProject die ID des Flash-Objektes ist. Sollte bereits ein unload-Mechanismus in der Flash-Applikation vorhanden sein, so kann dieser die statische Funktion SpringStreams.unload() aufrufen.

Einsatz als Embedded Player und Security Einstellungen

Wenn der Player auf einer anderen Website als Embedded Player eingesetzt werden soll, müssen die Security-Einstellungen beachtet werden.

Folgende Einstellungen sind vorzunehmen (siehe: ExternalInterface#addCallback())

Legen Sie in der HTML-Seite im object-Tag der SWF-Datei den folgenden Parameter fest:
Code Block
borderColor grey
bgColor #eeeeee
borderStyle solid
lang html

...


<body onunload="unload()">
...
function unload() {
	FlexProject.SPRING_UNLOAD();
}

...

<param name="allowScriptAccess" value="always" />

Fügen Sie in der SWF-Datei den folgenden ActionScript-Code ein:
Code Block
borderColor grey
bgColor #eeeeee
borderStyle solid
lang javascript

...


function unload() {
	FlexProject.SPRING_UNLOAD();
        // give time for submission
	var start= new Date(); var now = null; do now = new Date();  
        while(now-start < 100);
}

...

flash.system.Security.allowDomain( sourceDomain )

Beim Fehlen dieser Einstellungen tritt in der API ein Securityfehler auf, weil der Versuch die SPRING_UNLOAD()-Funktion in der Webseite zu registrieren fehlschlägt. Dieser Fehler wird in der API behandelt und ignoriert und ist nicht zwingend erforderlich für das korrekte Funktionieren der Messung.
Des Weiteren ist für das korrekte Funktionieren auch der Eintrag des Attributes onunload="..." im body-Tag notwendig, um das Verlassen der Seite der API zu melden. Beim Fehlen dieser Einstellungen ist es möglich, dass am Ende der Messung das letzte Event nicht mehr an das Messsystem übermittel wird.

Beispiel Integration in Flash

Code Block

borderColor	grey
bgColor	#eeeeee
langborderStyle	actionscriptsolid
borderStylelang	solidjavascript

  var nsClient:Object = {};
 nsClient.onMetaData = ...
 nsClient.onCuePoint = ...  

 nc = new NetConnection();
 nc.connect(null);

 ns = new NetStream(nc);
 ns.play(streamlocation);
 ns.client = nsClient;

 video = new Video();
 video.attachNetStream(ns);
 
 addChild(video);
                
 var tracker:SpringStreams = new SpringStreams("test");
 tracker.track(ns,{"stream":"videos/teststream","sx":video.width,"sy":video.height});

...

Sollten die eingesetzten Streams diese Meta-Information nicht liefern, so kann die Länge des Streams auch "von aussen" “von aussen” angegeben werden. Das obige Beispiel ändert sich dann wie folgt:

...

Code Block

borderColor	grey
bgColor	#eeeeee
langborderStyle	actionscriptsolid
borderStylelang	solidjavascript


var nsClient:Object = {};
 nsClient.onMetaData = ...
 nsClient.onCuePoint = ...  

 nc = new NetConnection();
 nc.connect(null);

 ns = new NetStream(nc);
 ns.play(streamlocation);
 ns.client = nsClient;

 video = new Video();
 video.attachNetStream(ns);
 
 addChild(video);
                
 var tracker:SpringStreams = new SpringStreams("test");
 var stream:Stream = tracker.track(ns,{"stream":"videos/teststream","sx":video.width,"sy":video.height});

 stream.setDuration(600/*10 minutes*/);

...

Wie im letzten Kapitel beschrieben, benötigt die Bibliothek ein flash.net.NetStream-Objekt, um einen Streaming-Content zu messen. Im Inneren der Messung wird die aktuelle Position auf diesem Streamobjekt ausgelesen.

...

Code Block

borderColor	grey
bgColor	#eeeeee
langborderStyle	actionscriptsolid
borderStylelang	solidjavascript


var net:NetConnection = new NetConnection();
net.connect(null);
var ns:NetStream = new NetStream(net);
var currentPosition:Number = ns.time;

...

Code Block

borderColor	grey
bgColor	#eeeeee
langborderStyle	actionscriptsolid
borderStylelang	solidjavascript


package 
{
import flash.media.SoundChannel;
import flash.net.NetConnection;
import flash.net.NetStream;
	
public class SoundNetStreamAdapter extends NetStream
{
	private var channel:SoundChannel;
	
	public function SoundNetStreamAdapter(net:NetConnection, c:SoundChannel)
	{
		super(net);
		channel = c;
	}
		
	override public function get time():Number { 
            // return the position in seconds
		return channel.position/1000;
	}

}
}

...

Code Block

borderColor	grey
bgColor	#eeeeee
langborderStyle	actionscriptsolid
borderStylelang	solidjavascript


var tracker:SpringStreams = new SpringStreams("test");
			
var s:Sound = new Sound();
s.load(new URLRequest("file:///pathto/sound.mp3"));

var desc:Object = {
	"stream":"sounds/sound.mp3",
	"sx":0,"sy":0,
};
			
var nc:NetConnection = new NetConnection();
nc.connect(null);

var ns:NetStream = new SoundNetStreamAdapter(nc, s.play());
var stream:Stream = tracker.track(ns, desc);
stream.setDuration(s.length/1000); // duration in seconds

...

Code Block

borderColor	grey
bgColor	#eeeeee
langborderStyle	actionscriptsolid
borderStylelang	solidjavascript


 var nsClient:Object = {};
 nsClient.onMetaData = ...
 nsClient.onCuePoint = ...  

 nc = new NetConnection();
 nc.connect(null);

 ns = new NetStream(nc);
 ns.play(streamlocation);
 ns.client = nsClient;

 video = new Video();
 video.attachNetStream(ns);
 
 addChild(video);
                
// 20:00 - 20:15 Tagesschau
// 20:15 - 21:00 PlusMinus
var tracker:SpringStreams = new SpringStreams("test");
// 20:00
var stream:Stream = tracker.track(ns,     {"stream":"livestreams/ard/Tagesschau","sx":video.width,"sy":video.height});

// 20:15
stream.stop();
stream = tracker.track(ns,{"stream":"livestreams/ard/PlusMinus","sx":video.width,"sy":video.height});

...

Code Block

borderColor	grey
bgColor	#eeeeee
langborderStyle	actionscriptsolid
borderStylelang	solidjavascript


...
ns1 = new NetStream(...);
...
ns2 = new NetStream(...);
...
var tracker:SpringStreams = new SpringStreams("test");
var stream1:Stream = tracker.track(ns1,{"stream":"streams/stream1","sx":video.width,"sy":video.height});
var stream2:Stream = tracker.track(ns2,{"stream":"streams/stream2","sx":video.width,"sy":video.height});

Version	Old Version 10	New Version Current
Changes made by	Former user	Former user
Saved on	Mar 16, 2011	May 13, 2013

Versions Compared

Key

Inhaltsverzeichnis

Einleitung

Funktionsbeschreibung der Messung

Einbau über Javascript für beliebige Player (auch proprietäre)

Einbau

mit HTML5

Einbau in Adobe Flash

Einsatz als Embedded Player und Security Einstellungen