SlideShare una empresa de Scribd logo
1 de 10
Descargar para leer sin conexión
HTML5 
<media elements> 
</@alexandercg @javierhumaran>
HTML5 features 
multimedia 
Audio and video became first 
citizens on the Web with HTML5 
the same way that other media 
types like images did in the past. 
With the coming additions to the APIs you will be able to read and write raw 
data to audio files (Audio Data API) or manipulate captions in vídeos (Timed 
Track API). 
For instance, you can build a DJ mixer table 
app where you show several controls to 
fade and mix audio tracks. 
html5 media elements
html5 media elements 
new4 
media elements in html 
there are 
<audio><video><source><track>
<audio> 
ELEMENT 
The <audio> tag is new to HTML, like the <video> tag, 
and allows developers to embed music on their 
websites. 
the markup: 
That's all you need to embed a simple audio on your page and show the basic controls 
so that a user can play, pause or otherwise control the audio. 
html5 media elements
html5 media elements 
<audio> browsers compatibility
<video> 
ELEMENT 
In modern browsers, adding a video to your page is 
as easy as adding an image. No longer do you need 
to deal with special plug-ins or require crazy markup, 
you can do it with a single element. 
the markup: 
That's all you need to embed a simple video on your page and show the basic controls 
so that a user can play, pause or otherwise control the video. 
html5 media elements
html5 media elements 
<video> browsers compatibility
<source> 
ELEMENT 
You can specify multiple source files by using the 
<source> element. The source element lets you 
specify multiple formats as a fallback in case the 
user's browser doesn't support one of them. For 
example: 
html5 media elements 
To improve performance, you should always include the type attribute in 
the source element. Otherwise the browser will need to load each video file 
until it can find one that it can play!
<track> 
ELEMENT 
The <track> element provides a simple, standardized 
way to add subtitles, captions, screen reader 
descriptions and chapters to your video, which 
improves accessibility but also makes it possible for 
search engines to understand what's in the video. 
html5 media elements 
The <track> element functions like a <source> element within the 
<video> element, and has a src attribute that points to a file in WebVTT 
format. You can specify the label that will be displayed in the UI to the 
user, as well as the source language (srclang) and if there are multiple 
track elements, which one should be used as the default.
</@alexandercg @javierhumaran> html5 media elements

Más contenido relacionado

La actualidad más candente

Introduction to XML
Introduction to XMLIntroduction to XML
Introduction to XML
yht4ever
 

La actualidad más candente (20)

Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Introduction to PHP
Introduction to PHPIntroduction to PHP
Introduction to PHP
 
Html forms
Html formsHtml forms
Html forms
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic Tags
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
 
HTML
HTMLHTML
HTML
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Introduction to XML
Introduction to XMLIntroduction to XML
Introduction to XML
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
Web Page Designing
Web Page DesigningWeb Page Designing
Web Page Designing
 
Html presentation
Html presentationHtml presentation
Html presentation
 
JavaScript - Chapter 11 - Events
 JavaScript - Chapter 11 - Events  JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Dom(document object model)
Dom(document object model)Dom(document object model)
Dom(document object model)
 
Html5 Basics
Html5 BasicsHtml5 Basics
Html5 Basics
 
Html forms
Html formsHtml forms
Html forms
 
Web Page Designing Using HTML
Web Page Designing Using HTMLWeb Page Designing Using HTML
Web Page Designing Using HTML
 

Destacado

Padrão Arquitetural MVC e suas aplicações para WEB
Padrão Arquitetural MVC e suas aplicações para WEBPadrão Arquitetural MVC e suas aplicações para WEB
Padrão Arquitetural MVC e suas aplicações para WEB
Rafael França
 

Destacado (13)

Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
 
HTML - Media Elements
HTML - Media ElementsHTML - Media Elements
HTML - Media Elements
 
MVC 1.0 / JSR 371
MVC 1.0 / JSR 371MVC 1.0 / JSR 371
MVC 1.0 / JSR 371
 
JSR 375 Segurança em Java EE 8
JSR 375 Segurança em Java EE 8JSR 375 Segurança em Java EE 8
JSR 375 Segurança em Java EE 8
 
Java EE 8 Adopt a JSR : JSON-P 1.1 & MVC 1.0
Java EE 8 Adopt a JSR : JSON-P 1.1 & MVC 1.0Java EE 8 Adopt a JSR : JSON-P 1.1 & MVC 1.0
Java EE 8 Adopt a JSR : JSON-P 1.1 & MVC 1.0
 
Gráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGGráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVG
 
New MVC 1.0 JavaEE 8 API
New MVC 1.0 JavaEE 8 APINew MVC 1.0 JavaEE 8 API
New MVC 1.0 JavaEE 8 API
 
Java EE 8 Recipes
Java EE 8 RecipesJava EE 8 Recipes
Java EE 8 Recipes
 
Java EE 8 - February 2017 update
Java EE 8 - February 2017 updateJava EE 8 - February 2017 update
Java EE 8 - February 2017 update
 
Java EE 8 Web Frameworks: A Look at JSF vs MVC
Java EE 8 Web Frameworks: A Look at JSF vs MVCJava EE 8 Web Frameworks: A Look at JSF vs MVC
Java EE 8 Web Frameworks: A Look at JSF vs MVC
 
Padrão Arquitetural MVC e suas aplicações para WEB
Padrão Arquitetural MVC e suas aplicações para WEBPadrão Arquitetural MVC e suas aplicações para WEB
Padrão Arquitetural MVC e suas aplicações para WEB
 
Model View Controller (MVC)
Model View Controller (MVC)Model View Controller (MVC)
Model View Controller (MVC)
 
media system theory
media system theorymedia system theory
media system theory
 

Similar a HTML5 Media Elements

HTML5-Tutorial-For-Beginn.6202488.pptx
HTML5-Tutorial-For-Beginn.6202488.pptxHTML5-Tutorial-For-Beginn.6202488.pptx
HTML5-Tutorial-For-Beginn.6202488.pptx
BCAGen
 
Introduction of html5
Introduction of html5Introduction of html5
Introduction of html5
kokila T
 

Similar a HTML5 Media Elements (20)

HTML Multimedia.pptx
HTML Multimedia.pptxHTML Multimedia.pptx
HTML Multimedia.pptx
 
Html 5 few Features and Elements
Html 5 few Features and ElementsHtml 5 few Features and Elements
Html 5 few Features and Elements
 
Replacing flash with HTML5 and CSS3
Replacing flash with HTML5 and CSS3Replacing flash with HTML5 and CSS3
Replacing flash with HTML5 and CSS3
 
Lecture9 web design and development
Lecture9 web design and developmentLecture9 web design and development
Lecture9 web design and development
 
INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html 5 Features And Benefits
Html 5 Features And Benefits  Html 5 Features And Benefits
Html 5 Features And Benefits
 
HTML5-Tutorial-For-Beginn.6202488.pptx
HTML5-Tutorial-For-Beginn.6202488.pptxHTML5-Tutorial-For-Beginn.6202488.pptx
HTML5-Tutorial-For-Beginn.6202488.pptx
 
M02 un08 p01
M02 un08 p01M02 un08 p01
M02 un08 p01
 
Basics of HTML5 for Phonegap
Basics of HTML5 for PhonegapBasics of HTML5 for Phonegap
Basics of HTML5 for Phonegap
 
Introduction of html5
Introduction of html5Introduction of html5
Introduction of html5
 
Everything That You Need To Know About HTML5
Everything That You Need To Know About HTML5Everything That You Need To Know About HTML5
Everything That You Need To Know About HTML5
 
Working with Video and Audio
Working with Video and AudioWorking with Video and Audio
Working with Video and Audio
 
HTML5_3.ppt
HTML5_3.pptHTML5_3.ppt
HTML5_3.ppt
 
HTML5 and DHTML
HTML5 and DHTMLHTML5 and DHTML
HTML5 and DHTML
 
Intro to Branding SharePoint 2013
Intro to Branding SharePoint 2013Intro to Branding SharePoint 2013
Intro to Branding SharePoint 2013
 
Html 5
Html 5Html 5
Html 5
 
Adobe Max 2009 - Learnings
Adobe Max 2009 -  LearningsAdobe Max 2009 -  Learnings
Adobe Max 2009 - Learnings
 

Más de Javier Antonio Humarán Peñuñuri

Más de Javier Antonio Humarán Peñuñuri (9)

Buenas Prácticas para el uso de una Base de Datos
Buenas Prácticas para el uso de una Base de DatosBuenas Prácticas para el uso de una Base de Datos
Buenas Prácticas para el uso de una Base de Datos
 
XML, Webservice e RSS
XML, Webservice e RSSXML, Webservice e RSS
XML, Webservice e RSS
 
Segurança Em Computaçao Na Nuvem
Segurança Em Computaçao Na NuvemSegurança Em Computaçao Na Nuvem
Segurança Em Computaçao Na Nuvem
 
Java Server Pages
Java Server PagesJava Server Pages
Java Server Pages
 
Cuantificación de las necesidades de un producto o servicio
Cuantificación de las necesidades de un producto o servicioCuantificación de las necesidades de un producto o servicio
Cuantificación de las necesidades de un producto o servicio
 
Bici Tour, Proyecto de Desarrollo Emprendedor
Bici Tour, Proyecto de Desarrollo EmprendedorBici Tour, Proyecto de Desarrollo Emprendedor
Bici Tour, Proyecto de Desarrollo Emprendedor
 
Proceso de RUP
Proceso de RUPProceso de RUP
Proceso de RUP
 
Plan de Costos
Plan de CostosPlan de Costos
Plan de Costos
 
CPM, PERT Y GANTT
CPM, PERT Y GANTTCPM, PERT Y GANTT
CPM, PERT Y GANTT
 

Último

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 

Último (20)

08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 

HTML5 Media Elements

  • 1. HTML5 <media elements> </@alexandercg @javierhumaran>
  • 2. HTML5 features multimedia Audio and video became first citizens on the Web with HTML5 the same way that other media types like images did in the past. With the coming additions to the APIs you will be able to read and write raw data to audio files (Audio Data API) or manipulate captions in vídeos (Timed Track API). For instance, you can build a DJ mixer table app where you show several controls to fade and mix audio tracks. html5 media elements
  • 3. html5 media elements new4 media elements in html there are <audio><video><source><track>
  • 4. <audio> ELEMENT The <audio> tag is new to HTML, like the <video> tag, and allows developers to embed music on their websites. the markup: That's all you need to embed a simple audio on your page and show the basic controls so that a user can play, pause or otherwise control the audio. html5 media elements
  • 5. html5 media elements <audio> browsers compatibility
  • 6. <video> ELEMENT In modern browsers, adding a video to your page is as easy as adding an image. No longer do you need to deal with special plug-ins or require crazy markup, you can do it with a single element. the markup: That's all you need to embed a simple video on your page and show the basic controls so that a user can play, pause or otherwise control the video. html5 media elements
  • 7. html5 media elements <video> browsers compatibility
  • 8. <source> ELEMENT You can specify multiple source files by using the <source> element. The source element lets you specify multiple formats as a fallback in case the user's browser doesn't support one of them. For example: html5 media elements To improve performance, you should always include the type attribute in the source element. Otherwise the browser will need to load each video file until it can find one that it can play!
  • 9. <track> ELEMENT The <track> element provides a simple, standardized way to add subtitles, captions, screen reader descriptions and chapters to your video, which improves accessibility but also makes it possible for search engines to understand what's in the video. html5 media elements The <track> element functions like a <source> element within the <video> element, and has a src attribute that points to a file in WebVTT format. You can specify the label that will be displayed in the UI to the user, as well as the source language (srclang) and if there are multiple track elements, which one should be used as the default.