Entwicklung multimedialer Anwendungen

Größe: px

Ab Seite anzeigen:

Download "Entwicklung multimedialer Anwendungen"

Inge Hella Bach
vor 6 Jahren
Abrufe

1 Entwicklung multimedialer Anwendungen Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik Raum Tel / Fachbereich AI, Entwicklung multimedialer Anwendungen 1 Inhalt 1. Einleitung 2. Auszeichnungs-Tags / Semantische Elemente 3. Multimedia (Audio, Video) 4. CSS3 (Design) 5. SVG / Canvas 6. Tablet Ansteuerung (jquery) 7. Geolocation Fachbereich AI, Entwicklung multimedialer Anwendungen 2 1

2 Videos Videoformate AAC Advanced Audio Coding AVI Audio Video Interleaved AVCHD Advanced Video Codec FLV Flash Video WMV Windows Media Video MKV Matroska Video File MOV Movie MPEG I und II Moving Pictures Experts Group MPEG IV Moving Pictures Experts Group M4V internes Format von Apple OGV Ogg Video RM Real Media Fachbereich AI, Entwicklung multimedialer Anwendungen html5\html5_bsp1.xhtml 3 Videos Videoformate DLNA Digital Living Network Alliance MOD internes Format von Canon MTS/M2TS Multichannel Television Sound TOD internes Format von Panasonic VOB Video Object File Fachbereich AI, Entwicklung multimedialer Anwendungen 4 2

3 Videos Videos abspielen im Browser Proprietäre Plug-ins Windows Media Player Quick Time Player Flash Player Format flv (Quasi Standard) Keine Unterstützung der Firma Apple Thoughts on Flash Native Video Fachbereich AI, Entwicklung multimedialer Anwendungen 5 Videos Proprietäre Videoformate Flash Video AVCHD Kameraformat Quick Time Video (MOV) Kameraformat Window-Video (WMV) Window-Video (AVI) Kameraformat RealMedia (RM) Weitere native Videoformate Theora (OGV, Ogg Video), Open Source.h264 (MP4), MS und Apple WebM (WEBM), Open Source Alle drei sind sinnvolle Varianten Fachbereich AI, Entwicklung multimedialer Anwendungen 6 3

4 Probleme mit Videos Abspielgeräte Kamera Desktop-PC Handy Smartphone Unterschiedliche Browservarianten auf dem Desktop auf mobilen Geräte (kein IE!) Fachbereich AI, Entwicklung multimedialer Anwendungen 7 Tag <video> Attribute width height controls="controls" autoplay="autoplay" immer mit mute (sound) muted="muted loop="loop" poster= "poster.png" preload= "metadata" Autor, Links, Sprache Sub-Element source src type Fachbereich AI, Entwicklung multimedialer Anwendungen 8 4

5 Video in Firefox: Steuerelemente per Popup Fachbereich AI, Entwicklung multimedialer Anwendungen 9 Video in Opera: Steuerelemente per Popup Fachbereich AI, Entwicklung multimedialer Anwendungen 10 5

6 Video in Chrome: Steuerelemente per Popup Fachbereich AI, Entwicklung multimedialer Anwendungen 11 Video in IExplorer: Keine Steuerelemente Fachbereich AI, Entwicklung multimedialer Anwendungen 12 6

7 Video in IExplorer: Steuerelemente <video controls="controls" > Fachbereich AI, Entwicklung multimedialer Anwendungen 13 HTML mit CSS Fachbereich AI, Entwicklung multimedialer Anwendungen 14 7

8 video { border: white dashed thick; padding-left: 30px; padding-right:30px; background-color:black; margin:25px; float:right; } Der Text ist nach <video> <video controls="controls" > <source src="small.mp4" type="video/mp4"/> <source src="small.ogv" type="video/ogg"/> </video> Natürlich kann man auch mit CSS-Styles arbeiten. Diese Seite verwendet einen video-selector, der einen weißen Rand, einen Außen- und Innenrand und einen schwarzen Hintergrund definiert. Fachbereich AI, Entwicklung multimedialer Anwendungen 15 Video mit allen Attributen <video controls="controls" autoplay="autoplay" muted="muted" loop="loop" poster= "poster.png" preload= "metadata" > <source src="small.mp4" type="video/mp4"/> <source src="small.ogv" type="video/ogg"/> </video> Fachbereich AI, Entwicklung multimedialer Anwendungen 16 8

9 Fachbereich AI, Entwicklung multimedialer Anwendungen 17 Video mit allen separaten Schaltern Fachbereich AI, Entwicklung multimedialer Anwendungen 18 9

10 Track in Tag <video>, Symbol default enabled kind subtitles captions ev. Übersetzungen, Musik, Text (no sound) descriptions Text (Barrierefrei) chapters metadata Nicht sichtbar label Beschriftung des Tracks src URL des Tracks srclang Tracks können für leistungsstärkere Suche verwendet werden. Die Untertitel werden in einer Textdatei gespeichert. Quellen Fachbereich AI, Entwicklung multimedialer Anwendungen 19 Trackdatei (Web Video Text Tracks): english-subtitles.vtt WEBVTT 1 00:00: > 00:00: a:start <v Proog>At the left we can see...</v> 2 00:00: > 00:00: At the right we can see the :00: > 00:00: the head-snarlers</v> Fachbereich AI, Entwicklung multimedialer Anwendungen 20 10

11 Track in Tag <video>: Beispiel <video controls="controls" > <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="samplecaptions.srt" srclang="en"> <track kind="descriptions" src="sampledesciptions.srt" srclang="en"> <track kind="chapters" src="samplechapters.srt" srclang="en"> <track kind="subtitles" src="samplesubtitles_de.srt" srclang="de"> <track kind="subtitles" src="samplesubtitles_en.srt" srclang="en"> <track kind="subtitles" src="samplesubtitles_ja.srt" srclang="ja"> <track kind="subtitles" src="samplesubtitles_oz.srt" srclang="oz"> <track kind="metadata" src="keystage1.srt" srclang="en" label="key Stage 1"> <track kind="metadata" src="keystage2.srt" srclang="en" label="key Stage 2"> <track kind="metadata" src="keystage3.srt" srclang="en" label="key Stage 3"> </video> Fachbereich AI, Entwicklung multimedialer Anwendungen 21 Javascript und Tracks var videoelement = document.queryselector("video"); var texttracks = videoelement.texttracks; // one for each track element var texttrack = texttracks[0]; // corresponds to the first track element var kind = texttrack.kind // e.g. "subtitles" var mode = texttrack.mode 0 = TextTrack.OFF in spec, TextTrack.DISABLED in Chrome 1 = TextTrack.HIDDEN 2 = TextTrack.SHOWING Fachbereich AI, Entwicklung multimedialer Anwendungen 22 11

12 Javascript und Tracks var cues = texttrack.cues; var cue = cues[0]; // corresponds to the first cue in a track src file var cueid = cue.id // cue.id corresponds to the cue id set in the WebVTT file var cuetext = cue.text; // "The Web is always changing", for example (or some JSON!) var trackelements = document.queryselectorall("track"); // for each track element for (var i = 0; i < trackelements.length; i++) { trackelements[i].addeventlistener("load", function() { var texttrack = this.track; // gotcha: "this" is an HTMLTrackElement, not a TextTrack object var issubtitles = texttrack.kind === "subtitles"; // for example... // for each cue for (var j = 0; j < texttrack.cues.length; ++j) { var cue = texttrack.cues[j]; // do something } } Fachbereich AI, Entwicklung multimedialer Anwendungen 23 Events: Javascript und Tracks cue.onenter = function(){ // do something }; cue.onexit = function(){ // do something else }; texttrack.oncuechange = function (){ // "this" is a texttrack var cue = this.activecues[0]; // assuming there is only one active cue var obj = JSON.parse(cue.text); // do something } Fachbereich AI, Entwicklung multimedialer Anwendungen 24 12

Beispiel eines Tracks-Videos in Chrome http://www.iandevlin.com/html5/webvtt-example.

liegen: poster="http://miwilhelm.de//track/elephants-dream.title.jpg" <source src="http://miwilhelm.de/track/elephants-dreammedium.

13 Beispiel eines Tracks-Videos in Chrome Fachbereich AI, Entwicklung multimedialer Anwendungen 25 Track in Tag <video>, Symbol src URL des Tracks Track funktionieren nur, wenn alle Dateien auf dem Server liegen: poster=" <source src=" type="video/webm"> Der Link zur vtt-datei kann einen Server-Pfad haben. src="english-subtitles.vtt" src="/vtt/english-subtitles.vtt" ::cue { color: black; background: white; } Fachbereich AI, Entwicklung multimedialer Anwendungen 26 13

14 Audio Wichtige Audioformate aac Advanced Audio Coding (komprimiert, besser als mp3) Sollte der Nachfolger von mp3 werden Neue Endungen: mp4, m4a Verlustfrei flac, fla Free Lossless Audio Codec (192 khz, 24 Bit) komprimiert verlustfrei mp3 MPEG-1 Audio Layer 3 (komprimiert) ogg Ogg Video / Audio rm Real Media (komprimiert) wav Wave form audio wma Windows Media Audio wma Lossless Verlustfrei vom MS Fachbereich AI, Entwicklung multimedialer Anwendungen 27 Tag <audio> Attribute controls="controls" sollte immer vorhanden sein autoplay="autoplay" immer mit mute (sound) muted="muted loop="loop" preload= "metadata" Autor, Links, Sprache Sub-Element source src type Fachbereich AI, Entwicklung multimedialer Anwendungen 28 14

15 Audio in Firefox Fachbereich AI, Entwicklung multimedialer Anwendungen 29 Audio in Opera Fachbereich AI, Entwicklung multimedialer Anwendungen 30 15

16 Audio in Chrome Fachbereich AI, Entwicklung multimedialer Anwendungen 31 Audio in IExplorer Fachbereich AI, Entwicklung multimedialer Anwendungen 32 16

17 Track in Tag <audio> default enabled kind subtitles captions ev. Übersetzungen, Musik, Text (no sound) descriptions Text (Barrierefrei) chapters metadata Nicht sichtbar label Beschriftung des Tracks src URL des Tracks srclang Tracks können für leistungsstärkere Suche verwendet werden. Die Untertitel werden in einer Textdatei gespeichert. Quellen Fachbereich AI, Entwicklung multimedialer Anwendungen 33 Track in Tag <audio> Fachbereich AI, Entwicklung multimedialer Anwendungen 34 17

Ähnliche Dokumente

YouTube ist nicht alles!

YouTube ist nicht alles! Über Videopodcasts, HTML5, webm, Matroska und den ganzen anderen modernen Kram. Referent: Fabio Bacigalupo Videocamp, 20. Juni 2010 Der Begriff des Podcasts Was sind, sollen und