Html comment 5 version

Read Previous post!
Read Next post!
Reading Time: 6 minutes

enc=tmq3GPpE5zoHafQ92yJSPoKDXlXx2VHA0HOErhfRlU1xGugHKFQ369_oxd3jJ9yup1Ejnyz4eooP
-bLt5RbnWiEb3X0LL_9IBuP9TKai8ncgZTe3w8aPFdERjzD3sOWHnBX9DA==
.pdf

Page – 1

1991

HTML5 MULTIMEDIA

S

FELTA PLUS

TAR )

DO1101011 0101010001010 10101101010100010

1010001010100100: 0101101010100010101001001 01010100010101010101 OODID

TAMZ 1

T

OTO OOOOOOO 100

UN

0110

Lab 9

DOLO10100100010101

DOD101101DOLO

DROID

0Page – 2

Old Days of HTML

Before HTML5, browsers could only natively display one type of multimedia – animated GIF

• < img src = ” omgcat. gif ” > Later, plugins appeared

1991: Apple Quicktime (. mov ) • 1994: MIDI ( background music ) • 1995: RealAudio (. ra,. ram ) • 1997: RealVideo ( H. 263 ) • 1998: Windows Media Player • 1999: Quicktime for Windows (. mov,. mp3,. mp4,. swf ) • 2002: Macromedia Shockwave Flash (. swf )

• < embed type = ” application / x – shockwave

flash ” src = ” flash. swf ” / > • 2007: Microsoft Silverlight ( flash, vid, etc. )Page – 3

HTML5 Multimedia

In HTML5, you can embed audio or video using native HTML tags audio and video, and if the browser supports the tags, it will give users controls to play the file.

No plugins needed • Better performance

Native, accessible controls • The audio element is used for embedding an audio player inside a page for a particular audio file.

< audio src = ” music. ogg “

controls = ” true ” preload = ” true ” > < / audio > • The video element embeds a video player for a particular video file.

< video src = ” movie. ogv ” controls width = ” 390 ” > < / video >Page – 4

Multimedia Codecs

• Audio – An audio track is compressed, stored, and decoded according to a codec. The most relevant audio codecs are:

. MP3: Patent – encumbered. • AAC ( Advanced Audio Coding ): Patent – encumbered. Used in

Apple products.. Ogg Vorbis: Free, open – source, patent – free Video file, like an “. avi ” file, is really a container for multiple related files that describe a video, like video track, one or more audio tracks with synchronization markers and metadata ( title, album art, etc ). The most popular video containers are: • MPEG4:. mp4,. m4v • Ogg:. ogv • WebM:. webmPage – 5

Audio Codec Browser Support

• There is no official codec for browsers to support

Browser

Operating system

• Ogg

Vorbis

WebM Opus

Formats supported by different web browsers WAV MP3 AAC

WebM, Ogg Vorbis Opus

25 ( since Yes Yes Yes

v31 in Windows )

Google Chrome

All supported

Yes

Internet Explorer

Windows

No

No

No

No

No

Mozilla Firefox

All supported

  1. 0
  2. 013 ] Windows Windows ( 21. 0 ), ( 21. 0 ) and Linux Linux ( 24. 0, ( 24. 0, needs a needs a gstreamer gstreamer codec ), os codec ) X ( 26. 0 ) only 14 14 3. 1 3. 1 Opera Safari I All supported osx
  3. 50 Yes
  4. 00 3. 1
  5. 60 No 14 No Yes No Source: wikipedia. orgPage – 6 Video Codec Browser Support Although the HTML5 specification initially mandated support for the Theora Ogg video codec, this requirement was dropped from the specification after it was challenged by Apple and Nokia. Browser Operating system Latest stable release • Video formats supported • H. 264 ( MP4 ). VPS ( WebM ). VP9 ( WebM ) Theora Android browser Android
  6. 2. 1 ” Jelly Bean ” ( November 27, 2012 25 marths ago ) ( 38
  7. 3101
  8. 401
  9. 31401 No Chromium All supported NA r182971413 Manual installate 2 ] r4775941 1172739441 Google Chrome
  10. 0! 4631471
  11. 0147 note 21
  12. 0 / 49501
  13. note al
  14. 0. 1750. 152 & 33. 0. 1750. 154 ( March 14, 2014: 16 days agos ), II v11. 0. 9600. 16521 ( 11. 0. 4 ) March Windows 2014 19 days ago ) Windows Phone
  15. 0 November 21, 2012 15 months ago Manual installinote 41
  16. 0154 Manual install note 51 Internet Explorer
  17. 0571 No NO Konqueror No Windows RT
  18. 0 All supported 4. 12. 3 ( 4 March 2014. 25 days agol 5 Windows 7 + Windows Vista
  19. 0 March 28, 2014, 12 days ago ) Linux ESR 24. 4. 0 ( March 18, 2014 12 days ago 621 ) [ + ] Android All other supported 16 for Android ( September 18, 2013. 6 months ago 12. 0. 22 for Symbian S60 ( une 24, 2012, 20 months ago 741 )
  20. 05 4. Inote 51 21. Inote 7
  21. 0170 ]
  22. 0 ( using GStreamer ) note 8 ]
  23. 07 ) NO Mozilla Firefox
  24. 56
  25. [ C [ 67 ]
  26. 09 ) No
  27. 50
  28. 0
  29. 0
  30. 0 for Windows Mobile March 25, 2010 4 years ago 5 ( 4 ) Opera ) ( 2 ) Windows, OS X
  31. 0. 1387. 82 ( March 20, 2014; 10 days ago Linux, FreeBSD
  32. 16 Oy 4. 2013, 8 months ago 77
  33. 5071
  34. 6017| ol ] Source: wikipedia. orgPage – 7 Multiple Media and Fallback Options

. HTML5 allows to specify multiple sources for the video and audio elements; browsers can use whichever works for them. • Example < video height = ” 200 ” controls = ” ” >

< source src = ” video. webm ” type = ” video / webm ” / > < source src = ” video. mp4 ” type = ” video / mp4 ” / >

< source src = ” video. ogv ” type = ” video / ogg ” / > < / video > Some browsers that don ‘ t support these new elements. In that case, you can provide a fallback option via a browser plug – in, like Java or Flash. < video src = ” video. ogv ” controls >

< object data = ” flvplayer. swf ” type = ” application / x

shockwave – flash ” > < param value = ” flvplayer. swf ” name = ” movie ” / >

< / object > < / video >Page – 8

API Attributes

Many of these attributes can be set via JS, and trigger events on change: duration •currentSrc

• playbackRate • autoplay

. network State • paused • loop preload

• ended • controls. buffered

width. muted. readyState

height. src. volume

poster Example var video = document. getElementsByTagName ( ” video ” ) [ 0 ]; alert ( video. currentTime ); video. playbackRate = video. playbackRate * 2;

https: / / developer. mozilla. org / en – US / docs / Web / HTML / Element / video # AttributesPage – 9

API Events

• loadstart • progress • suspend. abort

error. emptied • stalled loadedmetadata

• loadeddata. canplay •canplaythrough • playing

waiting •seeking

seeked ended

durationchange • timeupdate • play • pause •ratechange volumechange

Example < div id = ” time ” > 0 < / div > < script >

var video = document. getElementsByTagName ( ” video ” ) [ 0 ]; video. addEventListener ( ‘ timechange ‘, function ( ) {

document. getElementById ( ” time ” ). innerHTML = video. currentTime;

}, false ); < / script > http: / / www. whatwg. org / specs / web – apps / current – work / multipage / the – video – elemen t. html # mediaeventsPage – 10

API Functions

Basic functions

load ( ) • play ( )

pause ( ). canPlayType ( )

• Add TextTrack ( ) Example

< button id = ” play ” title = ” play ” onclick = ” pv ( ) ” > play < / button > < script > function pv ( ) {

var video = document. getElementsByTagName ( ” video ” ) [ 0 ]; video. play ( );

< / script >Page – 11

JavaScript Libraries / Players

https: / / github. com / videojs / video. js http: / / mediaelementjs. com / http: / / www. leanbackplayer. com / http: / / www. storiesinflight. com / js _ videosub / http: / / www. delphiki. com / html5 / playr / http: / / popcornjs. org / • https: / / github. com / cgiffard / CaptionatorPage – 12

Background playback example

function play ( sound ) {

if ( window. HTMLAudio Element ) { var snd = new Audio ( ” ); if ( snd. canPlayType ( ‘ audio / ogg ‘ ) ) {

snd = new Audio ( ‘ sounds / ‘ + sound + ‘. ogg ‘ ); } else if ( snd. canPlayType ( ‘ audio / mp3 ‘ ) ) {

snd = new Audio ( ‘ sounds / ‘ + sound + ‘. mp3 ‘ ); } else {

alert ( ‘ Audio support is present, but without ogg / mp3 ‘ ); return;

snd. play ( ); } else { alert ( ‘ Audio support is not present ‘ ); }

Note: Linux sound conversion may be done with: Sox < filename. ogg > < filename. mp3 >Page – 13

Task ( 1 point )

Add sound to • the game from previous lab ( in Quintus )

• You may use Quintus API directly, see:

http: / / html5quintus. com / docs / audio. html • The sounds will be

Background music Robot ate an item

• ( Attacker hit the robot ) • Audio files may be found at:

http: / / rpg. hamsterrepublic. com / ohrrpgce / Free _ Sound Effects • the clock from lab 7:

Sounds: ticking, 1 / 2h ( or 1 / 4h ) chimes, and full hour

chimes ( the number of chimes based on the hour ) Alternatively, create ” child audio box ” – touches to ( icon ) buttons start playing sounds ( 1 – 6 ), or start / stop playing loop.

Read Previous post!
Read Next post!