SlideShare a Scribd company logo
1 of 10
Download to read 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

More Related Content

What's hot (20)

Java script
Java scriptJava script
Java script
 
Html audio video
Html audio videoHtml audio video
Html audio video
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New Features
 
Event Handling in java
Event Handling in javaEvent Handling in java
Event Handling in java
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
jstl ( jsp standard tag library )
jstl ( jsp standard tag library )jstl ( jsp standard tag library )
jstl ( jsp standard tag library )
 
HTML5 audio & video
HTML5 audio & videoHTML5 audio & video
HTML5 audio & video
 
Files in php
Files in phpFiles in php
Files in php
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Xml ppt
Xml pptXml ppt
Xml ppt
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
 
Android Telephony Manager and SMS
Android Telephony Manager and SMSAndroid Telephony Manager and SMS
Android Telephony Manager and SMS
 
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
 
Xpath presentation
Xpath presentationXpath presentation
Xpath presentation
 
Php mysql ppt
Php mysql pptPhp mysql ppt
Php mysql ppt
 
Html 5
Html 5Html 5
Html 5
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 
Xhtml
XhtmlXhtml
Xhtml
 
Jquery
JqueryJquery
Jquery
 
PHP Cookies and Sessions
PHP Cookies and SessionsPHP Cookies and Sessions
PHP Cookies and Sessions
 

Viewers also liked

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
 

Viewers also liked (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 to 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
 
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
 

Similar to 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
 
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
 

More from 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
 

Recently uploaded

"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 

Recently uploaded (20)

"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 

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.