SlideShare ist ein Scribd-Unternehmen logo
1 von 10
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrapMind IT Systems
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5Nir Elbaz
 
World wide web with multimedia
World wide web with multimediaWorld wide web with multimedia
World wide web with multimediaAfaq Siddiqui
 
An Introduction to the DOM
An Introduction to the DOMAn Introduction to the DOM
An Introduction to the DOMMindy McAdams
 
Creating your first web page
Creating your first web pageCreating your first web page
Creating your first web pagecachs_computing
 
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSDeepak Upadhyay
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptEdureka!
 
HTML Semantic Elements
HTML Semantic ElementsHTML Semantic Elements
HTML Semantic ElementsReema
 

Was ist angesagt? (20)

Html media
Html mediaHtml media
Html media
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrap
 
Cse html ppt
Cse html pptCse html ppt
Cse html ppt
 
Html5
Html5Html5
Html5
 
The Complete HTML
The Complete HTMLThe Complete HTML
The Complete HTML
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
World wide web with multimedia
World wide web with multimediaWorld wide web with multimedia
World wide web with multimedia
 
Intro to Dynamic Web Pages
Intro to Dynamic Web PagesIntro to Dynamic Web Pages
Intro to Dynamic Web Pages
 
An Introduction to the DOM
An Introduction to the DOMAn Introduction to the DOM
An Introduction to the DOM
 
Creating your first web page
Creating your first web pageCreating your first web page
Creating your first web page
 
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
 
Portfolio website
Portfolio websitePortfolio website
Portfolio website
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
 
HTML Semantic Elements
HTML Semantic ElementsHTML Semantic Elements
HTML Semantic Elements
 
HTML Media
HTML MediaHTML Media
HTML Media
 
Introduction to Html
Introduction to HtmlIntroduction to Html
Introduction to Html
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
Html
HtmlHtml
Html
 
Html basic
Html basicHtml basic
Html basic
 

Andere mochten auch

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
 

Andere mochten auch (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
 

Ähnlich wie 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
 

Ähnlich wie 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
 
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
 
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
 

Mehr von 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
 

Kürzlich hochgeladen

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfOverkill Security
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...apidays
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024The Digital Insurer
 
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
 
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
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024The Digital Insurer
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
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
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh
 
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
 
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
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbuapidays
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Zilliz
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 

Kürzlich hochgeladen (20)

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
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
 
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
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
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
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
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
 
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
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 

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.