Entwicklung multimedialer Anwendungen

Größe: px

Ab Seite anzeigen:

Download "Entwicklung multimedialer Anwendungen"

Kevin Koenig
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

2 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

3 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

4 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

5 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

6 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

7 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

8 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

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

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

11 Video in Chrome: Steuerelemente per Popup Fachbereich AI, Entwicklung multimedialer Anwendungen 11

12 Video in IExplorer: Keine Steuerelemente Fachbereich AI, Entwicklung multimedialer Anwendungen 12

13 Video in IExplorer: Steuerelemente <video controls="controls" > Fachbereich AI, Entwicklung multimedialer Anwendungen 13

14 HTML mit CSS Fachbereich AI, Entwicklung multimedialer Anwendungen 14

15 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

16 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

17 Fachbereich AI, Entwicklung multimedialer Anwendungen 17

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

19 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

20 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

21 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

22 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

23 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

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

25 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="http://miwilhelm.de//track/elephants-dream.title.

26 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

27 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

28 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

29 Audio in Firefox Fachbereich AI, Entwicklung multimedialer Anwendungen 29

30 Audio in Opera Fachbereich AI, Entwicklung multimedialer Anwendungen 30

31 Audio in Chrome Fachbereich AI, Entwicklung multimedialer Anwendungen 31

32 Audio in IExplorer Fachbereich AI, Entwicklung multimedialer Anwendungen 32

33 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

34 Track in Tag <audio> Fachbereich AI, Entwicklung multimedialer Anwendungen 34

Ä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