Video streaming on the Web

Introduction to Web-based video streaming,
and lessons learned at Norwegian Research Council

Arild Nilsen
Anja Svartberg
Brynjulv Brynulvsen

August, 2012

Outline

• History
• Video streaming technologies
• Experiences from project

Outdated technologies

RealMedia

QuickTime

Windows Media

	<object>
	    <!-- censored due to verbosity -->
	    <embed>
	    ...
	    </embed>
	</object>
				

The road towards HTML5 video

• 2005: Discussion about <video> starts
• 2007: Opera supports <video>
• 2010: YouTube and Vimeo support HTML5 video

Why did Flash conquer the market?

• Flash is more than just video
• Tools and codecs
• 2005: Google videos and Youtube launched using Flash

	<video controls id="videoPlayer">
	    ...
	</video>
				

	var v = document.getElementById('videoPlayer');
	v.volume = 0.5;
	v.currentTime = v.duration - 3;
	v.play();
	v.addEventListener('ended', function videoEndedHandler(e) {
	    v.autoplay = true;
	    v.src = 'HelloWorld2.webm';
	});
				

Current codec support

retrieved Aug. 28, 2012

h.264 seems to win the codec-war

h.264 ubiquitous on mobile devices

Adaptive streaming

Not supported in HTML5 video

Dynamically adapt video stream to ensure a good user experience

HTTP Live Streaming

HTTP-based adaptive streaming by Apple

Early stages of Internet Engineering Task Force (IETF) standardization

How to use HTTP Live Streaming?

	<video controls>
	    <source src="HelloWorld.m3u8" type="video/mp4">
	    <source src="HelloWorld.mp4" type="video/mp4">
	    <source src="HelloWorld.webm" type="video/webm">
	    <source src="HelloWorld.ogg" type="video/ogg">
	</video>
				

	#EXTM3U
	#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1280000
	http://example.com/low.m3u8
	#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2560000
	http://example.com/mid.m3u8
	#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=7680000
	http://example.com/hi.m3u8
				

?

Is Flash dying? – Mobile Platforms

• Not supported on Apple mobile devices
• Essentially dead on Android
• Adobe kills mobile Flash, giving Steve Jobs the last laugh

  The Guardian, 2011

Is Flash dying? – Desktop

• Flash player 11.2 -> last version for Linux
• Not pre-installed on several Apple products
• Windows 8?

What does Adobe say?

&
(...) including 11.2 and the subsequent 2012 release, we are also modernizing the Flash runtime’s code base in order to ensure that the Flash runtimes meet the needs of developers over the next five to 10 years.

Experiences and lessons learned at
Norwegian Research Council

Available technologies

Flash

HTML5 video

HTTP Live Streaming

RTSP

Microsoft Smooth Streaming

Serving video of different quality

	
	Nfr.VideoResolution = function() {
	    if (Nfr.Platform.isPhone()) {
	        if (screen.width * screen.height < 480 * 800)
	            // 400 kbps, height 320 (width resized)
	        else 
	            // 1000 kbps, height 320 (width resized)
	    }
	    else if (Nfr.Platform.isPad()) {
	        if (screen.width * screen.height < 1024 * 768)
	            // 400 kbps, height 576 (width resized)
	        else
	            // 1000 kbps, height 576 (width resized)
	    }
	    else
	        // 1500 kbps, width 720p (height resized)
	};
				

Backward compatibility adds complexity

What does the customer say?

• It works on all relevant platforms
• It streams smoothly on mobile devices, and over mobile connections
• Loading time over mobile connection
• All kommunikasjon med den tyske leverandøren har gått på epost og dette har stort sett gått greit.

  Bjørn Holta, seniorrådgiver/webredaktør forskningsradet.no

Where to learn more?

Robert Reinhardt

The World of Pain that is HTML5 Video

January, 2012

Solving HTML5 Video Problems with Adaptive Streaming

March, 2012

?