SlideShare a Scribd company logo
HTML 5 Video
presented by Andrew Dibb
Video on the Web
•

Interactive

•

Visually interesting

•

Examples:
•

http://couleecreative.com/

•

http://www.ristorantebastimento.it/
F-ing Flash
•

2002 - Macromedia releases
Flash

•

2005 - YouTube is launched
making exclusive use of Flash

•

Users must all have Flash
installed on computer and
current versions

•

Apple v. Adobe Flash
HTML5 Video

•

Native to browser

•

One tag - multiple video types

•

No Javascript/Actionscript
Formats
.mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis
Browser Support
Works Cited
•

Wilcox, Mike. "HTML5 Video Explained." HTML5
Video Explained. N.p., n.d. Web. 25 Nov. 2013.

•

"HTML5 Video." HTML5 Video. W3 Schools, n.d.
Web. 25 Nov. 2013.

•

Delgado, Ernest. "HTML5 Rocks." - A Resource for
Open Web HTML5 Developers. HTML5 Rocks, 3
Aug. 2010. Web. 25 Nov. 2013.

More Related Content

Similar to Html5 video

Flash media technology
Flash media technologyFlash media technology
Flash media technology
Michael Dabydeen
 
HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014
RZasadzinski
 
HTML5 Trends + Cascade Server CMS by Uzo Okafor
HTML5 Trends + Cascade Server CMS by Uzo OkaforHTML5 Trends + Cascade Server CMS by Uzo Okafor
HTML5 Trends + Cascade Server CMS by Uzo Okafor
hannonhill
 
Conferences andcommunity
Conferences andcommunityConferences andcommunity
Conferences andcommunity
Jeff Carouth
 
OU Media Player at a11yLDN 2012
OU Media Player at a11yLDN 2012OU Media Player at a11yLDN 2012
OU Media Player at a11yLDN 2012
Nick Freear
 
夜宴26期《Mobile Web测试》
夜宴26期《Mobile Web测试》夜宴26期《Mobile Web测试》
夜宴26期《Mobile Web测试》Koubei Banquet
 
JavaScript debugging diagnostic web tools and firefox
JavaScript debugging diagnostic web tools and firefoxJavaScript debugging diagnostic web tools and firefox
JavaScript debugging diagnostic web tools and firefoxGennady Feldman
 
Flash dead ?
Flash dead ?Flash dead ?
Flash dead ?
Christophe Keromen
 
Internet Archive at Open Video Conference 2009
Internet Archive at Open Video Conference 2009Internet Archive at Open Video Conference 2009
Internet Archive at Open Video Conference 2009
tracey jaquith
 
Screw HTML5, make cool shit with AIR
Screw HTML5, make cool shit with AIRScrew HTML5, make cool shit with AIR
Screw HTML5, make cool shit with AIR
Eric Fickes
 
Favourite Cloud Apps
Favourite Cloud AppsFavourite Cloud Apps
Favourite Cloud Apps
Michael Rees
 
360|Flex Recap - San Jose 2010
360|Flex Recap - San Jose 2010360|Flex Recap - San Jose 2010
360|Flex Recap - San Jose 2010
David Ortinau
 
Adobe Flash - Past, Present and Future
Adobe Flash - Past, Present and FutureAdobe Flash - Past, Present and Future
Adobe Flash - Past, Present and FutureIain Lobb
 
Flexbox
FlexboxFlexbox
Flexbox
LindsayRec
 
WordPress Hampton Roads Meetup 9-18-12
WordPress Hampton Roads Meetup 9-18-12WordPress Hampton Roads Meetup 9-18-12
WordPress Hampton Roads Meetup 9-18-12Melodie Laylor
 
Vimeo and Open Source (SMPTE Forum 2015)
Vimeo and Open Source (SMPTE Forum 2015)Vimeo and Open Source (SMPTE Forum 2015)
Vimeo and Open Source (SMPTE Forum 2015)
Derek Buitenhuis
 
How we build project for Open Source
How we build project for Open SourceHow we build project for Open Source
How we build project for Open Source
Alexander Zayats
 
Unicon July 2015 IAM Briefing
Unicon July 2015 IAM BriefingUnicon July 2015 IAM Briefing
Unicon July 2015 IAM Briefing
John Gasper
 
It takes a Village: Implementing a Homegrown Solution for Streaming Video Res...
It takes a Village: Implementing a Homegrown Solution for Streaming Video Res...It takes a Village: Implementing a Homegrown Solution for Streaming Video Res...
It takes a Village: Implementing a Homegrown Solution for Streaming Video Res...
mharpasu
 
AN INTRODUCTION TO APACHE FLEX
AN INTRODUCTION TO APACHE FLEXAN INTRODUCTION TO APACHE FLEX
AN INTRODUCTION TO APACHE FLEX
Joseph Labrecque
 

Similar to Html5 video (20)

Flash media technology
Flash media technologyFlash media technology
Flash media technology
 
HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014
 
HTML5 Trends + Cascade Server CMS by Uzo Okafor
HTML5 Trends + Cascade Server CMS by Uzo OkaforHTML5 Trends + Cascade Server CMS by Uzo Okafor
HTML5 Trends + Cascade Server CMS by Uzo Okafor
 
Conferences andcommunity
Conferences andcommunityConferences andcommunity
Conferences andcommunity
 
OU Media Player at a11yLDN 2012
OU Media Player at a11yLDN 2012OU Media Player at a11yLDN 2012
OU Media Player at a11yLDN 2012
 
夜宴26期《Mobile Web测试》
夜宴26期《Mobile Web测试》夜宴26期《Mobile Web测试》
夜宴26期《Mobile Web测试》
 
JavaScript debugging diagnostic web tools and firefox
JavaScript debugging diagnostic web tools and firefoxJavaScript debugging diagnostic web tools and firefox
JavaScript debugging diagnostic web tools and firefox
 
Flash dead ?
Flash dead ?Flash dead ?
Flash dead ?
 
Internet Archive at Open Video Conference 2009
Internet Archive at Open Video Conference 2009Internet Archive at Open Video Conference 2009
Internet Archive at Open Video Conference 2009
 
Screw HTML5, make cool shit with AIR
Screw HTML5, make cool shit with AIRScrew HTML5, make cool shit with AIR
Screw HTML5, make cool shit with AIR
 
Favourite Cloud Apps
Favourite Cloud AppsFavourite Cloud Apps
Favourite Cloud Apps
 
360|Flex Recap - San Jose 2010
360|Flex Recap - San Jose 2010360|Flex Recap - San Jose 2010
360|Flex Recap - San Jose 2010
 
Adobe Flash - Past, Present and Future
Adobe Flash - Past, Present and FutureAdobe Flash - Past, Present and Future
Adobe Flash - Past, Present and Future
 
Flexbox
FlexboxFlexbox
Flexbox
 
WordPress Hampton Roads Meetup 9-18-12
WordPress Hampton Roads Meetup 9-18-12WordPress Hampton Roads Meetup 9-18-12
WordPress Hampton Roads Meetup 9-18-12
 
Vimeo and Open Source (SMPTE Forum 2015)
Vimeo and Open Source (SMPTE Forum 2015)Vimeo and Open Source (SMPTE Forum 2015)
Vimeo and Open Source (SMPTE Forum 2015)
 
How we build project for Open Source
How we build project for Open SourceHow we build project for Open Source
How we build project for Open Source
 
Unicon July 2015 IAM Briefing
Unicon July 2015 IAM BriefingUnicon July 2015 IAM Briefing
Unicon July 2015 IAM Briefing
 
It takes a Village: Implementing a Homegrown Solution for Streaming Video Res...
It takes a Village: Implementing a Homegrown Solution for Streaming Video Res...It takes a Village: Implementing a Homegrown Solution for Streaming Video Res...
It takes a Village: Implementing a Homegrown Solution for Streaming Video Res...
 
AN INTRODUCTION TO APACHE FLEX
AN INTRODUCTION TO APACHE FLEXAN INTRODUCTION TO APACHE FLEX
AN INTRODUCTION TO APACHE FLEX
 

Recently uploaded

Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
nkrafacyberclub
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
Peter Spielvogel
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Nexer Digital
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Welocme to ViralQR, your best QR code generator.
Welocme to ViralQR, your best QR code generator.Welocme to ViralQR, your best QR code generator.
Welocme to ViralQR, your best QR code generator.
ViralQR
 

Recently uploaded (20)

Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Welocme to ViralQR, your best QR code generator.
Welocme to ViralQR, your best QR code generator.Welocme to ViralQR, your best QR code generator.
Welocme to ViralQR, your best QR code generator.
 

Html5 video

  • 1. HTML 5 Video presented by Andrew Dibb
  • 2. Video on the Web • Interactive • Visually interesting • Examples: • http://couleecreative.com/ • http://www.ristorantebastimento.it/
  • 3. F-ing Flash • 2002 - Macromedia releases Flash • 2005 - YouTube is launched making exclusive use of Flash • Users must all have Flash installed on computer and current versions • Apple v. Adobe Flash
  • 4.
  • 5. HTML5 Video • Native to browser • One tag - multiple video types • No Javascript/Actionscript
  • 6.
  • 7. Formats .mp4 = H.264 + AAC .ogg/.ogv = Theora + Vorbis .webm = VP8 + Vorbis
  • 9.
  • 10. Works Cited • Wilcox, Mike. "HTML5 Video Explained." HTML5 Video Explained. N.p., n.d. Web. 25 Nov. 2013. • "HTML5 Video." HTML5 Video. W3 Schools, n.d. Web. 25 Nov. 2013. • Delgado, Ernest. "HTML5 Rocks." - A Resource for Open Web HTML5 Developers. HTML5 Rocks, 3 Aug. 2010. Web. 25 Nov. 2013.

Editor's Notes

  1. mp4 - we are familiar with ogg/ogv - Ogg Vorbis video encoding technology. webm - an attempt to create a high-quality, open video format for the web
  2. This is a good thing for the web. YouTube is in the process of going HTML5