SlideShare uma empresa Scribd logo
1 de 10
Baixar para ler offline
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

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Web development using html 5
Web development using html 5Web development using html 5
Web development using html 5
 
Html
HtmlHtml
Html
 
Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
Php introduction
Php introductionPhp introduction
Php introduction
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
LINKING IN HTML
LINKING IN HTMLLINKING IN HTML
LINKING IN HTML
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
 
HTML: Tables and Forms
HTML: Tables and FormsHTML: Tables and Forms
HTML: Tables and Forms
 
HTML Tags
HTML TagsHTML Tags
HTML Tags
 
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
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyEye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
 
HTML.pdf
HTML.pdfHTML.pdf
HTML.pdf
 
Html Intro2
Html Intro2Html Intro2
Html Intro2
 
Html 5 Features And Benefits
Html 5 Features And Benefits  Html 5 Features And Benefits
Html 5 Features And Benefits
 

Destaque

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 8Helder da Rocha
 
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.0David Delabassee
 
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 SVGHelder da Rocha
 
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 APITrayan Iliev
 
Java EE 8 Recipes
Java EE 8 RecipesJava EE 8 Recipes
Java EE 8 RecipesJosh Juneau
 
Java EE 8 - February 2017 update
Java EE 8 - February 2017 updateJava EE 8 - February 2017 update
Java EE 8 - February 2017 updateDavid Delabassee
 
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 MVCJosh Juneau
 
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 WEBRafael França
 
media system theory
media system theorymedia system theory
media system theoryIrum Shekh
 

Destaque (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
 

Semelhante a HTML5 Media Elements

HTML 5: Audio And Video
HTML 5: Audio And VideoHTML 5: Audio And Video
HTML 5: Audio And VideoReema
 
HTML Multimedia.pptx
HTML Multimedia.pptxHTML Multimedia.pptx
HTML Multimedia.pptxssuser08ea44
 
Html 5 few Features and Elements
Html 5 few Features and ElementsHtml 5 few Features and Elements
Html 5 few Features and ElementsClark Davidson
 
Replacing flash with HTML5 and CSS3
Replacing flash with HTML5 and CSS3Replacing flash with HTML5 and CSS3
Replacing flash with HTML5 and CSS3Saurabh Kheni
 
Lecture9 web design and development
Lecture9 web design and developmentLecture9 web design and development
Lecture9 web design and developmentRafi Haidari
 
INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5reshmy12
 
HTML5-Tutorial-For-Beginn.6202488.pptx
HTML5-Tutorial-For-Beginn.6202488.pptxHTML5-Tutorial-For-Beginn.6202488.pptx
HTML5-Tutorial-For-Beginn.6202488.pptxBCAGen
 
Basics of HTML5 for Phonegap
Basics of HTML5 for PhonegapBasics of HTML5 for Phonegap
Basics of HTML5 for PhonegapRakesh Jha
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginnersSingsys Pte Ltd
 
Introduction of html5
Introduction of html5Introduction of html5
Introduction of html5kokila T
 
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 HTML5KaneJordy1
 
Working with Video and Audio
Working with Video and AudioWorking with Video and Audio
Working with Video and AudioNicole Ryan
 
Intro to Branding SharePoint 2013
Intro to Branding SharePoint 2013Intro to Branding SharePoint 2013
Intro to Branding SharePoint 2013Thomas Daly
 

Semelhante a HTML5 Media Elements (20)

HTML 5: Audio And Video
HTML 5: Audio And VideoHTML 5: Audio And Video
HTML 5: Audio And Video
 
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
 
Html audio video
Html audio videoHtml audio video
Html audio video
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
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
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
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
 

Mais 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

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 educationjfdjdjcjdnsjd
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityWSO2
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays
 
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 FresherRemote DBA Services
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Bhuvaneswari Subramani
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney
 
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 WorkerThousandEyes
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamUiPathCommunity
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 

Último (20)

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
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
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
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
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
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 

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.