Ergebnis 1 bis 8 von 8

Thema: Videostream mit SWF-Object

  1. #1
    TP-Special Mod Avatar von steffenk
    Registriert seit
    Feb 2005
    Ort
    Haan / NRW
    Beiträge
    12.869

    Videostream mit SWF-Object

    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)
    HTML-Code:
    <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:

    HTML-Code:
    <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:

    HTML-Code:
    <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.
    Code:
    var flashvars = {
    	file: "/video/SC006.m4v",
    	autostart: "false"
    };
    oder danach
    Code:
    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:
    HTML-Code:
    <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:
    HTML-Code:
    <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:

    HTML-Code:
    <!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!
    Angehängte Dateien Angehängte Dateien

    TYPO3 · MySQLDumper · dislabs
    ·
    manche Mühlen mahlen schneller ...
    "Ich habe Rücken"
    Horst Schlämmer

  2. #2
    TP-Insider TP-Sponsor Avatar von zulujaner
    Registriert seit
    Apr 2008
    Ort
    Naumburg
    Beiträge
    879
    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...

  3. #3
    TP-Specialist Avatar von phpBuddy
    Registriert seit
    Aug 2004
    Ort
    Kaiserslautern
    Beiträge
    4.678
    Zitat Zitat von zulujaner
    Gut gemacht und mal ein fettes Dankeschön von mir...
    Yep, dem schließe ich mich an. Danke Steffen!

  4. #4
    TP-Specialist Avatar von koenixblau
    Registriert seit
    Jul 2006
    Ort
    Berlin
    Beiträge
    2.633
    Dito, ...

    Danke, ...

    ps.:
    Ebenfalls sind hier auch keine Punkte möglich.
    Newsflash:
    "Enjoy The Silence" live im Traum-Projekt!


    koenixblau | Flickr

  5. #5
    TP-Moderator Avatar von Adromir
    Registriert seit
    Jun 2004
    Ort
    Hannover
    Beiträge
    4.821
    Dankeschön!
    Je größer der Deppenfaktor, desto gigantischer das Bescheidwissergefühl
    -Dieter Nuhr

  6. #6
    TP-Special Mod Avatar von steffenk
    Registriert seit
    Feb 2005
    Ort
    Haan / NRW
    Beiträge
    12.869
    Wow, soviel Danke Das freut mich, wenn das gut gefällt

    TYPO3 · MySQLDumper · dislabs
    ·
    manche Mühlen mahlen schneller ...
    "Ich habe Rücken"
    Horst Schlämmer

  7. #7
    TP-Junior Avatar von Flashping
    Registriert seit
    Sep 2007
    Ort
    Berlin
    Beiträge
    7
    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
    Geändert von Flashping (02.03.2012 um 12:14 Uhr) Grund: Rechtschreibfehler
    You can´t always get what you want
    But if you try sometimes you just might find
    You get what you need

  8. #8
    TP-Junior Avatar von Flashping
    Registriert seit
    Sep 2007
    Ort
    Berlin
    Beiträge
    7
    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?
    You can´t always get what you want
    But if you try sometimes you just might find
    You get what you need

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. Hilfe Videostream
    Von Lido im Forum Video & Fotografie
    Antworten: 0
    Letzter Beitrag: 04.12.2006, 16:47
  2. Audio/ Videostream
    Von FredTee im Forum Server & Provider
    Antworten: 0
    Letzter Beitrag: 08.02.2006, 00:14
  3. Videostream aufzeichnen: ASX Format
    Von Stefan im Forum Einfach so ...
    Antworten: 2
    Letzter Beitrag: 29.11.2005, 19:39
  4. Flash 8 Development Team - Videostream
    Von Madokan im Forum Flash & Multimedia
    Antworten: 0
    Letzter Beitrag: 28.09.2005, 09:54
  5. Videostream fürs Internet.
    Von satre im Forum GoLive
    Antworten: 10
    Letzter Beitrag: 19.08.2005, 20:04

Stichworte

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

     

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51