Entwicklung multimedialer Anwendungen Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik mwilhelm@hs-harz.de http://www.miwilhelm.de Raum 2.202 Tel. 03943 / 659 338 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
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
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
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
Video in Firefox: Steuerelemente per Popup Fachbereich AI, Entwicklung multimedialer Anwendungen 9
Video in Opera: Steuerelemente per Popup Fachbereich AI, Entwicklung multimedialer Anwendungen 10
Video in Chrome: Steuerelemente per Popup Fachbereich AI, Entwicklung multimedialer Anwendungen 11
Video in IExplorer: Keine Steuerelemente Fachbereich AI, Entwicklung multimedialer Anwendungen 12
Video in IExplorer: Steuerelemente <video controls="controls" > Fachbereich AI, Entwicklung multimedialer Anwendungen 13
HTML mit CSS Fachbereich AI, Entwicklung multimedialer Anwendungen 14
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
Fachbereich AI, Entwicklung multimedialer Anwendungen 17
Video mit allen separaten Schaltern Fachbereich AI, Entwicklung multimedialer Anwendungen 18
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 https://developer.mozilla.org/de/docs/web/html/element/track http://www.drweb.de/magazin/html5-tracks-untertitel-fuer-videos-ausgeben-47829/ Fachbereich AI, Entwicklung multimedialer Anwendungen 19
Trackdatei (Web Video Text Tracks): english-subtitles.vtt WEBVTT 1 00:00:15.000 --> 00:00:18.000 a:start <v Proog>At the <i>left</i> we can see...</v> 2 00:00:18.167 --> 00:00:20.083 At the <i>right</i> we can <u>see</u> the... 3 00:00:20.083 --> 00:00:22.000...the <b>head-snarlers</b></v> Fachbereich AI, Entwicklung multimedialer Anwendungen 20
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
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
Beispiel eines Tracks-Videos in Chrome http://www.iandevlin.com/html5/webvtt-example.html 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="http://miwilhelm.de//track/elephants-dream.title.jpg" <source src="http://miwilhelm.de/track/elephants-dreammedium.webm" 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; } http://www.miwilhelm.de/track/track-server.html Fachbereich AI, Entwicklung multimedialer Anwendungen 26
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
Audio in Firefox Fachbereich AI, Entwicklung multimedialer Anwendungen 29
Audio in Opera Fachbereich AI, Entwicklung multimedialer Anwendungen 30
Audio in Chrome Fachbereich AI, Entwicklung multimedialer Anwendungen 31
Audio in IExplorer Fachbereich AI, Entwicklung multimedialer Anwendungen 32
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 https://developer.mozilla.org/de/docs/web/html/element/track http://www.drweb.de/magazin/html5-tracks-untertitel-fuer-videos-ausgeben-47829/ Fachbereich AI, Entwicklung multimedialer Anwendungen 33
Track in Tag <audio> Fachbereich AI, Entwicklung multimedialer Anwendungen 34