SlideShare a Scribd company logo
HTML5 and <video>

Panel at Open Video Conference
         20th June 2009
Panellists
• Eric Carlson
            Apple
• Michael Dale
            Xiph, Wikimedia, Kaltura, Metavid
• Viktor Gal
            Mozilla, Xiph & Annodex
• Jan Gerber
            Xiph, Pad.me, ffmpeg2theora
• Philip Jägenstedt
            Opera
• Silvia Pfeiffer
            Mozilla, Xiph & Annodex
Issues
•   Status of HTML5 video
•   Demos
•   Baseline codec
•   Annotations
•   Track selection
•   Others
Status of HTML5 video
• WHATWG HTML5 video spec:
  http://www.whatwg.org/specs/web-
    apps/current-work/#video

• Media Fragments spec:
  http://www.w3.org/TR/media-frags-reqs/

• Browser & server support
Firefox 3.5

     Adaptation for Firefox (Chris Double)

   Liboggplay (Viktor Gal) , libsydneyaudio

           Liboggz (Conrad Parker)


  Ogg      Vorbis   Theora Skeleton    Kate
(Monty)   (Monty)    (derf) (Annodex) (ogg.k)
Opera

Adaptation for Opera (Philip Jägenstedt)

GStreamer                 DirectShow

                       Oggcodecs
                     (Christian Adam)

        Ogg      Vorbis     Theora Skeleton
      (Monty)   (Monty)      (derf) (Annodex)
Webkit

GStreamer         QuickTime Framework

                         XiphQT
                      (Arek Korbik)

                 Liboggz (Conrad Parker)


        Ogg       Vorbis   Theora Skeleton
      (Monty)    (Monty)    (derf) (Annodex)
Chrome

Chrome Adaptation



     ffmpeg
Demos
Baseline Codec
Annotations:

    closed captions
        subtitles
time-aligned meta data
    DOM exposure
Track Selection:

 multiple audio tracks
multiple annotation tracks
  language selection
  content negotiation
Other topics:

  in-browser a/v capture
live video communication
    playlists / streaming
 video editor functionality
  media server support /
       simplification
Questions

More Related Content

Viewers also liked

Video Accessibility HTML5
Video Accessibility HTML5Video Accessibility HTML5
Video Accessibility HTML5Silvia Pfeiffer
 
Nsw Public Sphere1: Video for Politicians and Government
Nsw Public Sphere1: Video for Politicians and GovernmentNsw Public Sphere1: Video for Politicians and Government
Nsw Public Sphere1: Video for Politicians and GovernmentSilvia Pfeiffer
 
10x10 presentation tag
10x10 presentation tag10x10 presentation tag
10x10 presentation taglesley90
 
Asymmetrical Interfaces in Telehealth
Asymmetrical Interfaces in TelehealthAsymmetrical Interfaces in Telehealth
Asymmetrical Interfaces in TelehealthSilvia Pfeiffer
 
090518_unix-ensembl
090518_unix-ensembl090518_unix-ensembl
090518_unix-ensemblocha_kaneko
 
Html5 Open Video Tutorial
Html5 Open Video TutorialHtml5 Open Video Tutorial
Html5 Open Video TutorialSilvia Pfeiffer
 
Taking HTML5 video a step further
Taking HTML5 video a step furtherTaking HTML5 video a step further
Taking HTML5 video a step furtherSilvia Pfeiffer
 
WebRTC beyond Audio and Video
WebRTC beyond Audio and Video  WebRTC beyond Audio and Video
WebRTC beyond Audio and Video Silvia Pfeiffer
 

Viewers also liked (10)

Video Accessibility HTML5
Video Accessibility HTML5Video Accessibility HTML5
Video Accessibility HTML5
 
Nsw Public Sphere1: Video for Politicians and Government
Nsw Public Sphere1: Video for Politicians and GovernmentNsw Public Sphere1: Video for Politicians and Government
Nsw Public Sphere1: Video for Politicians and Government
 
Launch VQmetrics
Launch VQmetricsLaunch VQmetrics
Launch VQmetrics
 
Hyperlinktag
HyperlinktagHyperlinktag
Hyperlinktag
 
10x10 presentation tag
10x10 presentation tag10x10 presentation tag
10x10 presentation tag
 
Asymmetrical Interfaces in Telehealth
Asymmetrical Interfaces in TelehealthAsymmetrical Interfaces in Telehealth
Asymmetrical Interfaces in Telehealth
 
090518_unix-ensembl
090518_unix-ensembl090518_unix-ensembl
090518_unix-ensembl
 
Html5 Open Video Tutorial
Html5 Open Video TutorialHtml5 Open Video Tutorial
Html5 Open Video Tutorial
 
Taking HTML5 video a step further
Taking HTML5 video a step furtherTaking HTML5 video a step further
Taking HTML5 video a step further
 
WebRTC beyond Audio and Video
WebRTC beyond Audio and Video  WebRTC beyond Audio and Video
WebRTC beyond Audio and Video
 

Similar to Open Video Conference: HTML and the video tag

The State of Go - Andrew Gerrand
The State of Go - Andrew Gerrand The State of Go - Andrew Gerrand
The State of Go - Andrew Gerrand Hakka Labs
 
HTML5 Multimedia Accessibility
HTML5 Multimedia AccessibilityHTML5 Multimedia Accessibility
HTML5 Multimedia Accessibilitybrucelawson
 
WebRTC Browsers n Stacks Implementation differences
WebRTC Browsers n Stacks Implementation differencesWebRTC Browsers n Stacks Implementation differences
WebRTC Browsers n Stacks Implementation differencesAlexandre Gouaillard
 
(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop
(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop
(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser WorkshopTaro Matsuzawa
 
WebRTC と Native とそれから、それから。
WebRTC と Native とそれから、それから。 WebRTC と Native とそれから、それから。
WebRTC と Native とそれから、それから。 tnoho
 
NTTW4-FFmpeg.pdf
NTTW4-FFmpeg.pdfNTTW4-FFmpeg.pdf
NTTW4-FFmpeg.pdfJunZhao68
 
Video Streaming: Broadcast quality on a shoe string budget.
Video Streaming: Broadcast quality on a shoe string budget.  Video Streaming: Broadcast quality on a shoe string budget.
Video Streaming: Broadcast quality on a shoe string budget. netc2012
 
WHIP WebRTC Broadcasting @ FOSDEM 2022
WHIP WebRTC Broadcasting @ FOSDEM 2022WHIP WebRTC Broadcasting @ FOSDEM 2022
WHIP WebRTC Broadcasting @ FOSDEM 2022Lorenzo Miniero
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introductiondynamis
 
Flash and HTML5 Video
Flash and HTML5 VideoFlash and HTML5 Video
Flash and HTML5 VideoYoss Cohen
 
Nextcloud Android App Development Process Insights
Nextcloud Android App Development Process InsightsNextcloud Android App Development Process Insights
Nextcloud Android App Development Process InsightsAndy Scherzinger
 
Swift extensions for Tape Storage or other High-Latency Media
Swift extensions for Tape Storage or other High-Latency MediaSwift extensions for Tape Storage or other High-Latency Media
Swift extensions for Tape Storage or other High-Latency MediaSlavisa Sarafijanovic
 
Internet Archive Video Presentation
Internet Archive Video Presentation Internet Archive Video Presentation
Internet Archive Video Presentation tracey jaquith
 
Android 2.3 Introduction
Android 2.3 IntroductionAndroid 2.3 Introduction
Android 2.3 IntroductionKan-Ru Chen
 

Similar to Open Video Conference: HTML and the video tag (20)

The State of Go - Andrew Gerrand
The State of Go - Andrew Gerrand The State of Go - Andrew Gerrand
The State of Go - Andrew Gerrand
 
HTML5 Multimedia Accessibility
HTML5 Multimedia AccessibilityHTML5 Multimedia Accessibility
HTML5 Multimedia Accessibility
 
WebRTC Browsers n Stacks Implementation differences
WebRTC Browsers n Stacks Implementation differencesWebRTC Browsers n Stacks Implementation differences
WebRTC Browsers n Stacks Implementation differences
 
(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop
(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop
(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop
 
List of Files Format
List of Files FormatList of Files Format
List of Files Format
 
WebRTC と Native とそれから、それから。
WebRTC と Native とそれから、それから。 WebRTC と Native とそれから、それから。
WebRTC と Native とそれから、それから。
 
Jaoo irony
Jaoo ironyJaoo irony
Jaoo irony
 
NTTW4-FFmpeg.pdf
NTTW4-FFmpeg.pdfNTTW4-FFmpeg.pdf
NTTW4-FFmpeg.pdf
 
Video Streaming: Broadcast quality on a shoe string budget.
Video Streaming: Broadcast quality on a shoe string budget.  Video Streaming: Broadcast quality on a shoe string budget.
Video Streaming: Broadcast quality on a shoe string budget.
 
WHIP WebRTC Broadcasting @ FOSDEM 2022
WHIP WebRTC Broadcasting @ FOSDEM 2022WHIP WebRTC Broadcasting @ FOSDEM 2022
WHIP WebRTC Broadcasting @ FOSDEM 2022
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introduction
 
B2g
B2gB2g
B2g
 
Flash and HTML5 Video
Flash and HTML5 VideoFlash and HTML5 Video
Flash and HTML5 Video
 
Nextcloud Android App Development Process Insights
Nextcloud Android App Development Process InsightsNextcloud Android App Development Process Insights
Nextcloud Android App Development Process Insights
 
Slide
SlideSlide
Slide
 
Webrtc and tokbox
Webrtc and tokboxWebrtc and tokbox
Webrtc and tokbox
 
Swift extensions for Tape Storage or other High-Latency Media
Swift extensions for Tape Storage or other High-Latency MediaSwift extensions for Tape Storage or other High-Latency Media
Swift extensions for Tape Storage or other High-Latency Media
 
Internet Archive Video Presentation
Internet Archive Video Presentation Internet Archive Video Presentation
Internet Archive Video Presentation
 
Html5 introduction
Html5 introductionHtml5 introduction
Html5 introduction
 
Android 2.3 Introduction
Android 2.3 IntroductionAndroid 2.3 Introduction
Android 2.3 Introduction
 

Recently uploaded

Transforming The New York Times: Empowering Evolution through UX
Transforming The New York Times: Empowering Evolution through UXTransforming The New York Times: Empowering Evolution through UX
Transforming The New York Times: Empowering Evolution through UXUXDXConf
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityScyllaDB
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaRTTS
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyUXDXConf
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureFemke de Vroome
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCzechDreamin
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfChristopherTHyatt
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastUXDXConf
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIES VE
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsStefano
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101vincent683379
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsPaul Groth
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomCzechDreamin
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
 
Intelligent Gimbal FINAL PAPER Engineering.pdf
Intelligent Gimbal FINAL PAPER Engineering.pdfIntelligent Gimbal FINAL PAPER Engineering.pdf
Intelligent Gimbal FINAL PAPER Engineering.pdfAnthony Lucente
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxAbida Shariff
 

Recently uploaded (20)

Transforming The New York Times: Empowering Evolution through UX
Transforming The New York Times: Empowering Evolution through UXTransforming The New York Times: Empowering Evolution through UX
Transforming The New York Times: Empowering Evolution through UX
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdf
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
 
Intelligent Gimbal FINAL PAPER Engineering.pdf
Intelligent Gimbal FINAL PAPER Engineering.pdfIntelligent Gimbal FINAL PAPER Engineering.pdf
Intelligent Gimbal FINAL PAPER Engineering.pdf
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
 

Open Video Conference: HTML and the video tag

  • 1. HTML5 and <video> Panel at Open Video Conference 20th June 2009
  • 2. Panellists • Eric Carlson Apple • Michael Dale Xiph, Wikimedia, Kaltura, Metavid • Viktor Gal Mozilla, Xiph & Annodex • Jan Gerber Xiph, Pad.me, ffmpeg2theora • Philip Jägenstedt Opera • Silvia Pfeiffer Mozilla, Xiph & Annodex
  • 3. Issues • Status of HTML5 video • Demos • Baseline codec • Annotations • Track selection • Others
  • 4. Status of HTML5 video • WHATWG HTML5 video spec: http://www.whatwg.org/specs/web- apps/current-work/#video • Media Fragments spec: http://www.w3.org/TR/media-frags-reqs/ • Browser & server support
  • 5. Firefox 3.5 Adaptation for Firefox (Chris Double) Liboggplay (Viktor Gal) , libsydneyaudio Liboggz (Conrad Parker) Ogg Vorbis Theora Skeleton Kate (Monty) (Monty) (derf) (Annodex) (ogg.k)
  • 6. Opera Adaptation for Opera (Philip Jägenstedt) GStreamer DirectShow Oggcodecs (Christian Adam) Ogg Vorbis Theora Skeleton (Monty) (Monty) (derf) (Annodex)
  • 7. Webkit GStreamer QuickTime Framework XiphQT (Arek Korbik) Liboggz (Conrad Parker) Ogg Vorbis Theora Skeleton (Monty) (Monty) (derf) (Annodex)
  • 11. Annotations: closed captions subtitles time-aligned meta data DOM exposure
  • 12. Track Selection: multiple audio tracks multiple annotation tracks language selection content negotiation
  • 13. Other topics: in-browser a/v capture live video communication playlists / streaming video editor functionality media server support / simplification