Videostream mit SWF-Object

[steffenk]

Die hier vorgestellte Möglichkeit ist eine sehr einfache, um Videostreams auf Webseiten einzubinden.
Die Einbindung erfolgt über Javascript, welches natürlich an sein muss.
Unterstützt werden u.a. folgende (Video)formate: MP3, MP4, M4V, SWF etc., also alles was der Player abspielen kann.
Zusätzlich hab ich noch ein kleines Script hinzugefügt, das die Einbindung von Quicktime (MOV) erlaubt.

Vorbereitung

Als erstes benötigen wir das angehängte Paket, wir entpacken es auf unserem Webspace, hier im Ordner /flashmedia

In den Header unserer Webseite binden wir nun die Basisskripte ein (2. nur für Quicktime-Videos)

<script type="text/javascript" src="/flashmedia/swfobject/swfobject.js"></script>
<script type="text/javascript" src="/flashmedia/qtobject/qtobject.js"></script>

Quicktime

Ich nehm die Einbindung von Quicktime mal vorweg, die ist recht simpel:

<div id="playerMOV">Hier steht alternativer Text, wenn z.B. kein Quicktime installiert ist.</div>
<script type="text/javascript">
	var myQTObject = new QTObject("/video/SC005.mov", "playerMOV", "400", "300");
	myQTObject.addParam("autostart", "false");
	myQTObject.addParam("controller", "true");
	myQTObject.write();
</script>

Das Objekt erwartet 4 Parameter:
* mov-file
* id des divs in das gerendert werden soll
* Breite
* Höhe

Flash Media

Kommen wir nun zu den anderen Inhalten, also Flash-Media.
Die Einbindung über SWF-Object ist sehr ähnlich, und auch komfortabel zu konfigurieren:

<div id="player123">Hier steht alternativer Text, wenn z.B. kein Flash installiert ist (oder Javascript deaktiviert ist)</div>
<script type="text/javascript">
	var flashvars = {};
	var params = {};
	var attributes = {};
	swfobject.embedSWF("/flashmedia/player.swf", "player125", "400", "300", "9", "/flashmedia/swfobject/expressInstall.swf", flashvars, params, attributes);
</script>

Wir sehen, es gibt 3 Variablen, die gefüllt werden müssen: flashvars, params, attributes

entweder man schreibt es direkt rein, z.B.

var flashvars = {
	file: "/video/SC006.m4v",
	autostart: "false"
};

oder danach

var flashvars = {};
flashvars.file = "/video/SC006.m4v";
flashvars.autostart = "false";

Ein zwingender Parameter für Videos ist zumeist
params.allowscriptaccess = "always";


flashvars ist eigentlich ein param, es ist nur ein Shortcut. Man könnte auch statt:
flashvars.file = "/video/SC006.m4v";
dieses schreiben:
params.flashvars.file = "/video/SC006.m4v";

daher unterscheiden sich flashvars und params auch nicht besonders, attributes beziehen sich auf die Ausgabe des Objektes, kann daher mit id,class,align etc. gefüllt werden
swfobject.embedSWF erwartet folgende Parameter:
swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvars, params, attributes)

swfUrlStr: media-file
replaceElemIdStr: id des divs was durch den Player ersetzt wird
widthStr: Breite in Pixel
heightStr: Höhe in Pixel
swfVersionStr: Flash-Version (8,9, etc)
xiSwfUrlStr: url zum installieren von Flash wenn es nicht vorhanden ist
flashvars, params, attributes: s.o.

Hier also ein Beispiel für die komplette Einbindung:

<h3>M4V</h3>
<div id="player125"></div>
<script type="text/javascript">
	var flashvars = {};
	flashvars.file = "/video/SC006.m4v";
	flashvars.autostart = "false";

	var params = {};
	params.allowscriptaccess = "always";

	var attributes = {};

	swfobject.embedSWF("/flashmedia/player.swf", "player125", "400", "300", "9.0.124", "/flashmedia/swfobject/expressInstall.swf", flashvars, params, attributes);

</script>

Als Bonbon nun die Einbindung von YouTube-Videos mit SWF-Object

Hier ein Beispiel:

<h3>YouTube</h3>
<div id="player128"></div>
<script type="text/javascript">
	var params = { allowScriptAccess: "always",allowfullscreen: "true" };
	var attributes = { id: "player128" };
	swfobject.embedSWF("http://www.youtube.com/v/UXvhH8XfTKI&enablejsapi=1&playerapiid=ytplayer&fs=1", "player128", "480", "385", "9", null, null, params, attributes);
</script>

Wir sehen kaum Unterschiede. Entscheidend ist natürlich der YouTube-Key, der als erstes hinter v in der Url steht: UXvhH8XfTKI

Wichtig ist der Parameter "enablejsapi=1", der die JavascriptApi erlaubt. Was können wir nun mit dem Javascript anfangen? Wir können uns den Player selber basteln

Ein Javascript YouTube Video Player

Der Player läd einen leeren YouTube-Player, den wir per Javascript bedienen können.

Hier ein Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>YouTube JS-Player</title>
<script type="text/javascript" src="/flashmedia/swfobject/swfobject.js"></script>
<style type="text/css">

	body {
		font-family: verdana, helvetica;
		background-color: #aaa;
		margin: 20px;
	}
	a {
		color:#3a3a3a;
	}
	a:hover {
		color:#6a6a6a;
	}

	.timedisplay, .bytesdisplay {
		border: solid 1px red;
		width: 580px;
		font-size: 9px;
		padding: 2px 4px;
	}
	div { 
	margin:5px 0;
	}
</style>
<script type="text/javascript">

	function switchControls(mode) {
		if (mode == 1) {
			document.getElementById("player_load").style.display = "none";
			document.getElementById("player_control").style.display = "block";
		} else {
			document.getElementById("player_control").style.display = "none";
			document.getElementById("player_load").style.display = "block";
		}
	}
	function updateHTML(elmId, value) {
		document.getElementById(elmId).innerHTML = value;
	}

	function setytplayerState(newState) {
		updateHTML("playerstate", newState);
	}

	function onYouTubePlayerReady(playerId) {
		ytplayer = document.getElementById("myytplayer");
		setInterval(updateytplayerInfo, 250);
		updateytplayerInfo();
		ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
		ytplayer.addEventListener("onError", "onPlayerError");
	}

	function onytplayerStateChange(newState) {
		setytplayerState(newState);
	}

	function onPlayerError(errorCode) {
		alert("An error occured: " + errorCode);
	}

	function updateytplayerInfo() {
		updateHTML("bytesloaded", getBytesLoaded());
		updateHTML("bytestotal", getBytesTotal());
		updateHTML("videoduration", getDuration());
		updateHTML("videotime", getCurrentTime());
		updateHTML("startbytes", getStartBytes());
		updateHTML("volume", getVolume());
	}

	// functions for the api calls
	function loadNewVideo(id, startSeconds) {
		if (ytplayer) {
			ytplayer.loadVideoById(id, parseInt(startSeconds));
			switchControls(1); 
		}
	}

	function cueNewVideo(id, startSeconds) {
		if (ytplayer) {
			ytplayer.cueVideoById(id, startSeconds);
			switchControls(1);
		}
	}

	function play() {
		if (ytplayer) {
			ytplayer.playVideo();
		}
	}

	function pause() {
		if (ytplayer) {
			ytplayer.pauseVideo();
		}
	}

	function stop() {
		if (ytplayer) {
			ytplayer.stopVideo();
		}
	}

	function getPlayerState() {
		if (ytplayer) {
			return ytplayer.getPlayerState();
		}
	}

	function seekTo(seconds) {
		if (ytplayer) {
			ytplayer.seekTo(seconds, true);
		}
	}

	function getBytesLoaded() {
		if (ytplayer) {
			return ytplayer.getVideoBytesLoaded();
		}
	}

	function getBytesTotal() {
		if (ytplayer) {
			return ytplayer.getVideoBytesTotal();
		}
	}

	function getCurrentTime() {
		if (ytplayer) {
			return ytplayer.getCurrentTime();
		}
	}

	function getDuration() {
		if (ytplayer) {
			return ytplayer.getDuration();
		}
	}

	function getStartBytes() {
		if (ytplayer) {
			return ytplayer.getVideoStartBytes();
		}
	}

	function mute() {
		if (ytplayer) {
			ytplayer.mute();
		}
	}

	function unMute() {
		if (ytplayer) {
			ytplayer.unMute();
		}
	}

	function getEmbedCode() {
		alert(ytplayer.getVideoEmbedCode());
	}

	function getVideoUrl() {
		alert(ytplayer.getVideoUrl());
	}

	function setVolume(newVolume) {
		if (ytplayer) {
			ytplayer.setVolume(newVolume);
		}
	}

	function getVolume() {
		if (ytplayer) {
			return ytplayer.getVolume();
		}
	}

	function clearVideo() {
		if (ytplayer) {
			ytplayer.stopVideo();
			ytplayer.clearVideo();
			switchControls(0);
		}
	}

</script>

</head>
<body>
<h1>YouTube Javascript Player</h1> 

 <div id="ytapiplayer">
      You need Flash player 8+ and JavaScript enabled to view this video.
</div>

<script type="text/javascript">
	// <![CDATA[

	// allowScriptAccess must be set to allow the Javascript from one 
	// domain to access the swf on the youtube domain
	var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
	// this sets the id of the object or embed tag to 'myytplayer'.
	// You then use this id to access the swf and make calls to the player's API
	var atts = { id: "myytplayer" };
	swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", 
						"ytapiplayer", "600", "400", "8", null, null, params, atts);
	//]]>
</script>

<div>
	Player Status: <span id="playerstate">--</span>
</div>
<div id="player_load">
	<div id="loadvideokey">
		<input type="text" size="11" id="loadvideoid" value="u1zgFlCw8Aw" />
		<a href="javascript:void(0)" onclick="loadNewVideo(document.getElementById('loadvideoid').value, document.getElementById('startseconds').value)">&lt;-
		Load video</a> | Start at: <input type="text" size="4" id="startseconds" value="0" />
	</div>
	<div id="cuevideokey">
		<input type="text" size="11" id="cuevideoid" value="u1zgFlCw8Aw" />
		<a href="javascript:void(0)" onclick="cueNewVideo(document.getElementById('cuevideoid').value, document.getElementById('startseconds2').value)">&lt;- 
		Cue video </a> | Start at: <input type="text" size="4" id="startseconds2" value="0" />
	</div>
</div>
	
<div id="player_control" style="display:none;">
	<div class="timedisplay">
		Duration: <span id="videoduration">--:--</span> | Current Time: <span id="videotime">--:--</span>
	</div>

	<div class="bytesdisplay">
		  Bytes Total: <span id="bytestotal">--</span> | Start Bytes: <span id="startbytes">--</span> | Bytes Loaded: <span id="bytesloaded">--</span>
	</div>
	
	<div>
		<a href="javascript:void(0);" onclick="play();">Play</a> | 
		<a href="javascript:void(0);" onclick="pause();">Pause</a> | 
		<a href="javascript:void(0);" onclick="stop();">Stop</a> | 
		<a href="javascript:void(0);" onclick="mute();">Mute</a> | 
		<a href="javascript:void(0);" onclick="unMute();">Unmute</a>
	</div>

	<form action="" onsubmit="seekTo(document.getElementById('seekto').value); return false;">
		<div>
			<input id="seekto" type="text" size="4" /><input type="submit" value="Seek to" />
		</div>
	</form>

	<div>
		<input id="vol" type="text" size="2" /> 
		<a href="javascript:void(0)" onclick="setVolume(document.getElementById('vol').value)">&lt;- Set Volume</a>  | Volume: <span id="volume">--</span>
	</div>



	<div>
		<a href="javascript:void(0)" onclick="getEmbedCode()">Get Embed Code</a> | 
		<a href="javascript:void(0)" onclick="getVideoUrl()">Get Video URL</a> | 
		<a href="javascript:void(0);" onclick="clearVideo()">Clear Video</a>  
	</div>
</div>

</body>
</html>

LINKS:

[1] http://blog.powerflasher.de/swfobject2/
[2] http://blog.deconcept.com/code/qtobject/qtobject.html
[3] http://code.google.com/intl/de-DE/ap...reference.html

Viel Spass damit!

[zulujaner]

So schnell geht's und ein Tutorial ist fertig.

Spitzenzeit...

Sieht großartig aus. Werde heut abend in Ruhe die Sache mal ausgiebig testen.

Das Problem mit Flashvideos einbinden hatten wir ja schon öfter im TP. Also ein Tutorial was wir öfters an den Mann bringen können.

Gut gemacht und mal ein fettes Dankeschön von mir...

[phpBuddy]

Gut gemacht und mal ein fettes Dankeschön von mir...

Yep, dem schließe ich mich an. Danke Steffen!

[koenixblau]

Dito, ...

Danke, ...

ps.:
Ebenfalls sind hier auch keine Punkte möglich.

[Adromir]

Dankeschön!

[steffenk]

Wow, soviel Danke Das freut mich, wenn das gut gefällt

[Flashping]

Hallo aus Berlin und erstmal Danke und ein ganz großes (!!!) Lob für das hilfreiche Tutorial Ein Problem bzw 2 Fragen habe ich a) zur Bestimmung der Hintergrundfarbe und b) zu der Bestimmung der Größenangaben width und height, die offenbar mit bzw über <div id player125> bestimmt werden bin mir zwar nicht ganz sicher aber zumindest gehe ich davon aus. Also wenn ja... kann ich die div id player125 im CSS selbst bestimmen? Und wenn nicht, wie kann ich sonst die Größenverhältnisse meiner flv (Breite 640 px/ Höhe 360 px) und im Idealfall auch die Hintergrundfarbe anpassen? Wäre sehr dankbar über eine Antwort. Viele Grüße, Steffi

[Flashping]

Die Frage mit Höhe und Breite hat sich geklärt, mittels div id ist jetzt alles bestens. Was mich noch beschäftigt, wie kann ich Hintergrundfarbe und auch die Gestaltung des Skins individuell anpassen?