Live HTTP Streaming of Video and
Subtitles within a Browser
Cyril Concolato
Jean Le Feuvre
{concolato, lefeuvre} @ telecom-paristech.fr
MMSys 2013
Context
1
■ Video Streaming is popular on the Web
• With subtitle support in VOD
• With live streaming solutions (DASH, HLS, …)
■ What about live subtitles ?
• Several specifications being developed
− ISOBMFF Amendment on Timed Text and Timed
Overlays, for use with DASH
− WebVTT draft (used in HLS v10)
• No deployment yet within browsers
■ Can we today stream and play live video+subtitles
within a browser?
• Yes !
• Development of a Proof-of-Concept
Live HTTP Streaming of Video and Subtitles within a Browser
- MMSys Demo 2013
Architecture
3
Live HTTP Streaming of Video and Subtitles within a Browser
- MMSys Demo 2013
Demonstration Media Formats
■ The ISO Base Media File Format
• To carry video stream segments
• Conformant to MPEG DASH and Google Chrome restrictions
■ The WebVTT format
• To carry subtitle data
− as separate text files (not multiplexed in the video container)
− Similar to HLS v10, with some differences (no embedded
video timing)
• Generation of non-overlapping, constant duration segments
(compatible with MPEG DASH)
■ MPEG DASH MPD
• To represent a dynamic live/long-running streaming service
• To enable synchronization of the video and subtitle streams.
4
Live HTTP Streaming of Video and Subtitles within a Browser
- MMSys Demo 2013
Demonstration software components
■ GPAC MP4Box
• To produce video segments on-the-fly and delete old
ones
− From a pre-recorded file (looped indefinitely)
■ VTTLiveGenerator
• Ad-hoc tool
• To produce subtitle segments on-the-fly, synchronized
with the video and delete old ones
■ Google Chrome
• Canary version
• To display the content using HTML5 and JavaScript
5
Live HTTP Streaming of Video and Subtitles within a Browser
- MMSys Demo 2013
Usage of MP4Box
■ Fragmenting a file repeatedly using -dash-ctx option
MP4Box.exe -dash-live 2000 -rap
-dash-ctx dash-live.txt
-segment-name counter-live
counter.mp4
■ Example of MP4Box’s DASH context
[DASH]
InitializationSegment=counter_liveinit.mp4
BitstreamSwitching=yes
InitializationSegmentSize=860
MaxSegmentDuration=1.000000
NextSegmentIndex=11
NextFragmentIndex=11
PeriodDuration=9.960000
[TrackID_1]
NextDecodingTime=249000
6
Live HTTP Streaming of Video and Subtitles within a Browser
- MMSys Demo 2013
Example of Video Content
7
Live HTTP Streaming of Video and Subtitles within a Browser
- MMSys Demo 2013
Example of WebVTT Segment
■ Each segment is a complete WebVTT file with multiple
cues,
• changing header, cue indices, and timing values
WEBVTT Segment 6
61
00:00:12.200 --> 00:00:12.400
This is cue 61 (start: 00:00:12.200 -- end:
00:00:12.400)
...
70
00:00:14.000 --> 00:00:14.200
This is cue 70 (start: 00:00:14.000 -- end:
00:00:14.200)
8
Live HTTP Streaming of Video and Subtitles within a Browser
- MMSys Demo 2013
Example of DASH Description
■ Use of a “dynamic” MPD
• No minUpdate attribute
• Without updates (assuming known/static timing)
■ A single period with 2 adaptation sets
• 1 video representation
• 1 subtitle representation
• Same video and subtitle segments duration (easy)
■ live-vtt-mp4.mpd
9
Live HTTP Streaming of Video and Subtitles within a Browser
- MMSys Demo 2013
Rendering using Google Chrome Canary
■ HTML page
• Use of HTML5 <video> element with an HTML
<track> element for playback synchronization
• Use of JavaScript code to control the download logic
■ JavaScript algorithm
• Fetch and parse the MPD,
• Create the <video> and <track> elements,
• Determine and fetch the video and subtitles segments
using the XMLHttpRequest API,
• Feed the video segments to the media decoder engine
using the Media Source extension API,
• Load each subtitle segment using an HTML5 work-
around
10
Live HTTP Streaming of Video and Subtitles within a Browser
- MMSys Demo 2013
Demo
11
Live HTTP Streaming of Video and Subtitles within a Browser
- MMSys Demo 2013
Discussion/Limitations
■ Working demo
• Supports time shifting or not
• Needs better integration of video & subtitle MPDs at server side
• Needs at client side:
− Better MPD parsing
− Better simple segment index algorithm
■ Issues
• Rendering performance problem if more than 4 cues per second
• User Interface problem
− Unusable built-in UI for long-running live events
− Needs custom UI to disable seeking before the first
received data
• HTML 5 limitations to load cues
− No MSE equivalent for cues (outside of VTT in MP4)
− No easy method to parse cues
12
Live HTTP Streaming of Video and Subtitles within a Browser
- MMSys Demo 2013
Questions ?
Come and see me

More Related Content

PDF
Streaming of SVG animations on the Web
PPTX
Live streaming of video and subtitles with MPEG-DASH
PPTX
Comments on carriage of timed text and visual overlays in MP4
PPT
Latest Developments of Scalable Vector Graphics (SVG) 2, With a Focus on Stre...
PDF
ConférenSquad #4 - Hulu et DASH par Baptiste Coudurier
PDF
リニア放送型動画サービスの 
Web フロントエンド
PDF
Paris Video Tech - 1st Edition: Afrostream, un player agile  pour suivre le m...
PPTX
Paris Video Tech - 1st Edition: Streamroot, Adaptive Bitrate Algorithms: comm...
Streaming of SVG animations on the Web
Live streaming of video and subtitles with MPEG-DASH
Comments on carriage of timed text and visual overlays in MP4
Latest Developments of Scalable Vector Graphics (SVG) 2, With a Focus on Stre...
ConférenSquad #4 - Hulu et DASH par Baptiste Coudurier
リニア放送型動画サービスの 
Web フロントエンド
Paris Video Tech - 1st Edition: Afrostream, un player agile  pour suivre le m...
Paris Video Tech - 1st Edition: Streamroot, Adaptive Bitrate Algorithms: comm...

What's hot (20)

ODP
Leases and-caching final
PDF
ivisa retreat-2019
PDF
Tuning the Kernel for Varnish Cache
PDF
02 vng thanhnt-speedup_ntvv2_by_ph_pextmodule_
ODP
Accelerate your web app with a layer of Varnish
PDF
HTTP/2 turns 3 years old // Web Performance Meetup wao.io 20180612
PDF
Include os @ flossuk 2018
PDF
CephFS Update
PPTX
Varnish extend
PDF
Varnish Cache 4.0 / Redpill Linpro breakfast in Oslo
PDF
KVM Tuning @ eBay
ODP
Lisa 2015-gluster fs-hands-on
PDF
Cache hcm-topdev
ODP
Software defined storage
PDF
2021.02 new in Ceph Pacific Dashboard
PPTX
Streaming in HTML5
PPTX
Introducing Container Technology to TSUBAME3.0 Supercomputer
ODP
Disk Performance Comparison Xen v.s. KVM
PDF
Ceph Month 2021: RADOS Update
PDF
HTTP/2 and QUICK protocols. Optimizing the Web stack for HTTP/2 era
Leases and-caching final
ivisa retreat-2019
Tuning the Kernel for Varnish Cache
02 vng thanhnt-speedup_ntvv2_by_ph_pextmodule_
Accelerate your web app with a layer of Varnish
HTTP/2 turns 3 years old // Web Performance Meetup wao.io 20180612
Include os @ flossuk 2018
CephFS Update
Varnish extend
Varnish Cache 4.0 / Redpill Linpro breakfast in Oslo
KVM Tuning @ eBay
Lisa 2015-gluster fs-hands-on
Cache hcm-topdev
Software defined storage
2021.02 new in Ceph Pacific Dashboard
Streaming in HTML5
Introducing Container Technology to TSUBAME3.0 Supercomputer
Disk Performance Comparison Xen v.s. KVM
Ceph Month 2021: RADOS Update
HTTP/2 and QUICK protocols. Optimizing the Web stack for HTTP/2 era

Similar to Mm sys 2013-demo (20)

PPTX
Streaming video to html
PPT
HTML5 video & Amazon elastic transcoder - FCIP August 2014
PPTX
Multimedia Streaming Architecture
PDF
Serverless Media Workflow
PDF
Silverlight Wireshark Analysis
PPTX
IBC Content Everywhere Hub Presentation: HTML5 And Fastest Encoding
PPTX
Video Killed My Data Plan: Helsinki
PDF
Html5video
PPTX
Html 5
PPTX
T3fest video
PPTX
NodeJS Edinburgh Video Killed My Data Plan
PPTX
Frontcon video
PDF
Wwx2014 - Todd Kulick "Shipping One Million Lines of Haxe to (Over) One Milli...
PDF
Building video application on windows 8 with Windows Azure Media Services
PPT
HTML5 Presentation
PPTX
Media Source Extensions
PDF
ReproNow—Save Time Reproducing and Triaging Security Bugs
PDF
Adobe HTTP Streaming
PPTX
Video performance glasgow
Streaming video to html
HTML5 video & Amazon elastic transcoder - FCIP August 2014
Multimedia Streaming Architecture
Serverless Media Workflow
Silverlight Wireshark Analysis
IBC Content Everywhere Hub Presentation: HTML5 And Fastest Encoding
Video Killed My Data Plan: Helsinki
Html5video
Html 5
T3fest video
NodeJS Edinburgh Video Killed My Data Plan
Frontcon video
Wwx2014 - Todd Kulick "Shipping One Million Lines of Haxe to (Over) One Milli...
Building video application on windows 8 with Windows Azure Media Services
HTML5 Presentation
Media Source Extensions
ReproNow—Save Time Reproducing and Triaging Security Bugs
Adobe HTTP Streaming
Video performance glasgow

More from Cyril Concolato (11)

PDF
Tutoriel sur le streaming vidéo sur HTTP et sur MPEG-DASH
PPTX
Delivery of Timeline for External Data in MPEG-2 Transport Stream
PPT
GPAC Team Research Highlights
PPTX
Extensions for Hybrid Delivery using MPEG-2 TS and DASH
PPTX
Carriage of timed subtitles and graphics in MP4
PPT
MPEG-4 BIFS Overview
PPTX
MPEG-4 BIFS and MPEG-2 TS: Latest developments for digital radio services
PPTX
Usages of DASH for Rich Media Services
PPTX
Adaptive Video and Metadata Display using Multimedia Documents
PPTX
Usages of DASH for Rich Media Services
PPTX
Electronic Program Guides using SVG
Tutoriel sur le streaming vidéo sur HTTP et sur MPEG-DASH
Delivery of Timeline for External Data in MPEG-2 Transport Stream
GPAC Team Research Highlights
Extensions for Hybrid Delivery using MPEG-2 TS and DASH
Carriage of timed subtitles and graphics in MP4
MPEG-4 BIFS Overview
MPEG-4 BIFS and MPEG-2 TS: Latest developments for digital radio services
Usages of DASH for Rich Media Services
Adaptive Video and Metadata Display using Multimedia Documents
Usages of DASH for Rich Media Services
Electronic Program Guides using SVG

Recently uploaded (20)

PDF
NewMind AI Weekly Chronicles – August ’25 Week IV
PDF
LMS bot: enhanced learning management systems for improved student learning e...
PDF
AI.gov: A Trojan Horse in the Age of Artificial Intelligence
PDF
Advancing precision in air quality forecasting through machine learning integ...
PDF
Transform-Your-Streaming-Platform-with-AI-Driven-Quality-Engineering.pdf
DOCX
Basics of Cloud Computing - Cloud Ecosystem
PDF
Transform-Your-Supply-Chain-with-AI-Driven-Quality-Engineering.pdf
PDF
Improvisation in detection of pomegranate leaf disease using transfer learni...
PDF
Electrocardiogram sequences data analytics and classification using unsupervi...
PDF
giants, standing on the shoulders of - by Daniel Stenberg
PDF
A hybrid framework for wild animal classification using fine-tuned DenseNet12...
PDF
EIS-Webinar-Regulated-Industries-2025-08.pdf
PPTX
Module 1 Introduction to Web Programming .pptx
PDF
Convolutional neural network based encoder-decoder for efficient real-time ob...
PPTX
agenticai-neweraofintelligence-250529192801-1b5e6870.pptx
PDF
Co-training pseudo-labeling for text classification with support vector machi...
PDF
Lung cancer patients survival prediction using outlier detection and optimize...
PDF
Comparative analysis of machine learning models for fake news detection in so...
PDF
The-2025-Engineering-Revolution-AI-Quality-and-DevOps-Convergence.pdf
PDF
5-Ways-AI-is-Revolutionizing-Telecom-Quality-Engineering.pdf
NewMind AI Weekly Chronicles – August ’25 Week IV
LMS bot: enhanced learning management systems for improved student learning e...
AI.gov: A Trojan Horse in the Age of Artificial Intelligence
Advancing precision in air quality forecasting through machine learning integ...
Transform-Your-Streaming-Platform-with-AI-Driven-Quality-Engineering.pdf
Basics of Cloud Computing - Cloud Ecosystem
Transform-Your-Supply-Chain-with-AI-Driven-Quality-Engineering.pdf
Improvisation in detection of pomegranate leaf disease using transfer learni...
Electrocardiogram sequences data analytics and classification using unsupervi...
giants, standing on the shoulders of - by Daniel Stenberg
A hybrid framework for wild animal classification using fine-tuned DenseNet12...
EIS-Webinar-Regulated-Industries-2025-08.pdf
Module 1 Introduction to Web Programming .pptx
Convolutional neural network based encoder-decoder for efficient real-time ob...
agenticai-neweraofintelligence-250529192801-1b5e6870.pptx
Co-training pseudo-labeling for text classification with support vector machi...
Lung cancer patients survival prediction using outlier detection and optimize...
Comparative analysis of machine learning models for fake news detection in so...
The-2025-Engineering-Revolution-AI-Quality-and-DevOps-Convergence.pdf
5-Ways-AI-is-Revolutionizing-Telecom-Quality-Engineering.pdf

Mm sys 2013-demo

  • 1. Live HTTP Streaming of Video and Subtitles within a Browser Cyril Concolato Jean Le Feuvre {concolato, lefeuvre} @ telecom-paristech.fr MMSys 2013
  • 2. Context 1 ■ Video Streaming is popular on the Web • With subtitle support in VOD • With live streaming solutions (DASH, HLS, …) ■ What about live subtitles ? • Several specifications being developed − ISOBMFF Amendment on Timed Text and Timed Overlays, for use with DASH − WebVTT draft (used in HLS v10) • No deployment yet within browsers ■ Can we today stream and play live video+subtitles within a browser? • Yes ! • Development of a Proof-of-Concept Live HTTP Streaming of Video and Subtitles within a Browser - MMSys Demo 2013
  • 3. Architecture 3 Live HTTP Streaming of Video and Subtitles within a Browser - MMSys Demo 2013
  • 4. Demonstration Media Formats ■ The ISO Base Media File Format • To carry video stream segments • Conformant to MPEG DASH and Google Chrome restrictions ■ The WebVTT format • To carry subtitle data − as separate text files (not multiplexed in the video container) − Similar to HLS v10, with some differences (no embedded video timing) • Generation of non-overlapping, constant duration segments (compatible with MPEG DASH) ■ MPEG DASH MPD • To represent a dynamic live/long-running streaming service • To enable synchronization of the video and subtitle streams. 4 Live HTTP Streaming of Video and Subtitles within a Browser - MMSys Demo 2013
  • 5. Demonstration software components ■ GPAC MP4Box • To produce video segments on-the-fly and delete old ones − From a pre-recorded file (looped indefinitely) ■ VTTLiveGenerator • Ad-hoc tool • To produce subtitle segments on-the-fly, synchronized with the video and delete old ones ■ Google Chrome • Canary version • To display the content using HTML5 and JavaScript 5 Live HTTP Streaming of Video and Subtitles within a Browser - MMSys Demo 2013
  • 6. Usage of MP4Box ■ Fragmenting a file repeatedly using -dash-ctx option MP4Box.exe -dash-live 2000 -rap -dash-ctx dash-live.txt -segment-name counter-live counter.mp4 ■ Example of MP4Box’s DASH context [DASH] InitializationSegment=counter_liveinit.mp4 BitstreamSwitching=yes InitializationSegmentSize=860 MaxSegmentDuration=1.000000 NextSegmentIndex=11 NextFragmentIndex=11 PeriodDuration=9.960000 [TrackID_1] NextDecodingTime=249000 6 Live HTTP Streaming of Video and Subtitles within a Browser - MMSys Demo 2013
  • 7. Example of Video Content 7 Live HTTP Streaming of Video and Subtitles within a Browser - MMSys Demo 2013
  • 8. Example of WebVTT Segment ■ Each segment is a complete WebVTT file with multiple cues, • changing header, cue indices, and timing values WEBVTT Segment 6 61 00:00:12.200 --> 00:00:12.400 This is cue 61 (start: 00:00:12.200 -- end: 00:00:12.400) ... 70 00:00:14.000 --> 00:00:14.200 This is cue 70 (start: 00:00:14.000 -- end: 00:00:14.200) 8 Live HTTP Streaming of Video and Subtitles within a Browser - MMSys Demo 2013
  • 9. Example of DASH Description ■ Use of a “dynamic” MPD • No minUpdate attribute • Without updates (assuming known/static timing) ■ A single period with 2 adaptation sets • 1 video representation • 1 subtitle representation • Same video and subtitle segments duration (easy) ■ live-vtt-mp4.mpd 9 Live HTTP Streaming of Video and Subtitles within a Browser - MMSys Demo 2013
  • 10. Rendering using Google Chrome Canary ■ HTML page • Use of HTML5 <video> element with an HTML <track> element for playback synchronization • Use of JavaScript code to control the download logic ■ JavaScript algorithm • Fetch and parse the MPD, • Create the <video> and <track> elements, • Determine and fetch the video and subtitles segments using the XMLHttpRequest API, • Feed the video segments to the media decoder engine using the Media Source extension API, • Load each subtitle segment using an HTML5 work- around 10 Live HTTP Streaming of Video and Subtitles within a Browser - MMSys Demo 2013
  • 11. Demo 11 Live HTTP Streaming of Video and Subtitles within a Browser - MMSys Demo 2013
  • 12. Discussion/Limitations ■ Working demo • Supports time shifting or not • Needs better integration of video & subtitle MPDs at server side • Needs at client side: − Better MPD parsing − Better simple segment index algorithm ■ Issues • Rendering performance problem if more than 4 cues per second • User Interface problem − Unusable built-in UI for long-running live events − Needs custom UI to disable seeking before the first received data • HTML 5 limitations to load cues − No MSE equivalent for cues (outside of VTT in MP4) − No easy method to parse cues 12 Live HTTP Streaming of Video and Subtitles within a Browser - MMSys Demo 2013