Interlake HTML5 Streaming

unevenfitterInternet and Web Development

Jun 20, 2012 (5 years and 5 months ago)

478 views











Interlake HTML5 Streaming

Technical
Do
c
umentation


Date
:

20
11
/
0
5
/
2
2

Version:


1.0
0











Content

1.

HTML5 <video>

2

1.1

Browser Codec Support

2

2.

Interlake HTML5 Streaming

4

2.1

HTML5 standalone

4

2.2

HTML5 / Flash auto detect

4

2.3

HTML5 / Flash / Windows Media auto detect

6






Interlake
HTML5 Streaming

-

Technical Documentation

2

/
6

1.

HTML5
<
video
>

Video can be
integrated into websites using

different approaches. Prior to HTML5

in any case

a
browser
plugin was needed to playback video

on the web
, like Flash Player or Windows Media
Player. HTML
5

tries to change and standardize this by including a
<video>
element in the HTML
markup itself. In general this mean
s

a big step forward, but
in fact

as of today

there

is
no
standardization

across

different browsers
.

The HTML5 draft specification does only specify the
markup of the <
video
>

element, but
it lacks

a standardized video format
supported by
every

b
rowser.
In order to playback the video
without the help of a proprietary plugin
,
every

browser
need
s

to
have
the adequate

video decoder
on
-
board
.

And this is the core problem

of HTML5
video
:
Because there is no standardization for the video format t
oday eve
ry browser supports
different video formats and codecs

or even no HTML5 video at all
.

So the only solution t
o make
HTML5 video
available

across all devices
,

platforms

and browser

is to encode one video into
different

formats and codecs and deliver the rig
ht video version depending on the platform and
browser capabilities.



Therefore

most of our customers still use a Flash
-
only video approach as long as they

are

primarily

target
ing

web browsers. The reason is simple: All browsers support flash across all
r
elevant operating platforms including Apple Macs and many Linux systems.


1.1

Browser Codec Support

Currently there are 3
main

video format
s which can be used for HTML5 video delivery: OGG
Theora, H.264 and VP8

(WebM)
. None of these formats is supported by al
l browsers and no
browser supports all formats. Below you can find a table show
ing

the most widespread
browsers and
supported video formats
.


Browser


Video Formats



OGG Theora

(*.ogg)


H.264

(*.mp4)


VP8 (
*.webm
)

Mozilla Firefox

3.5

---

4.0

Internet Explorer

---

9.0

with plugin

Google Chrome

3.0

c
urrently
supported
, but
will be removed


6.0

Opera

10.50

---

10.60

Safari

---

3.1

---

Further

Reading:

You can find detailed
information on HTML5 video on

http://diveintohtml5.org/video.h
tml

Further Reading:

You can find the
current
browser
HTML5 video
support situation
on

http://en.wikipedia.org/wiki/HT
ML5_video




Interlake
HTML5 Streaming

-

Technical Documentation

3

/
6


Please keep in mind that this is not

a static

situation
, but only the
current

state of affairs. It is
likely that this

scenario

will change
repeatedly
in the future.


Besides

this

you need to know that there are some more requirements if you are targeting
special devices like iPhone or iPad. These devices currently can playback H.264 video, but only
with very

device specific video
specifications

and with a max
imum

framerate of
30

fps.





Interlake
HTML5 Streaming

-

Technical Documentation

4

/
6

2.

Interlake HTML5

Streaming

With
the

Interlake

Progressive
Streaming Package

our

customers
get access to the

different

Interlake HTML5 streaming solutions
. You can find these solutions integrated in the Control
Center for any HTML5 capable video

(depending on the video f
ormat)
.

These solutions are

HTML5 Standalone,

HTML5/Flash auto detect and
HTML5/Flash/
WinMedia

auto

detect
.


2.1

HTML5
s
tandalone

The HTML5 Standalone Solution is not suited for cross
-
browser or cross
-
platform
scenarios
, it
only
makes
sense if you know

that all users will request the video with
exactly
the same
browser

or
device
.


With this solution you’ll get an HTML5 Copy & Paste Code which includes the selected video in

only

one format

(the selected)
.
I
n order to be ab
le to watch
the video the user needs to request
the video with a browser

or
device

which is capable of displaying this format
.


Below you can find a sample Copy & Paste Code for the HTML5 standalone Streaming solution.


<video width="480" height="360" autopla
y controls><source
src="http://streaming.interlake.net/fp;streaming/20080506_130630/demo;example.mp4;str
eam;fwd.mp4" type="video/mp4" />This browser is not compatible with HTML 5.</video>


2.2

HTML5 / Flash auto detect

The H
TML
5/Flash auto detect solution cove
rs all possible HTML5 video formats and a flash
fallback for ancient browsers without HTML5 support.

So this is a real cross
-
browser & cross
-
device solution, but

i
n order to work properly each video needs to be available

in
all 3 possible
HTML5 video
formats. The H.264 video will be used for the flash fallback solution.

All needed video formats need to be existent in
the same directory

with predefined

filename
s
:


Codec

possible filenames

H.264

<video>.mp4

VP8 (WebM)

<
video
>
.
webm


OGG

<
video
>
.
ogg


Interlake Video Hosting &
Streaming
:

http://www.interlake.net/en/int
erlake
-
media/video
-
hosting
-
streaming/





Interlake
HTML5 Streaming

-

Technical Documentation

5

/
6


Interlake customers can either encode all
required

formats by
themselves and upload them to
their Interlake Streaming Account

or simply book

our

Encoding Service, which will encode one
source video automatically into all
required

HTML5 formats.

Below you can
find a sample Copy & Paste Code for the HTML5 Flash auto detect Streaming
solution.


<object classid="clsid:d27cdb6e
-
ae6d
-
11cf
-
96b8
-
444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version
=9,0,115,0" width="320" h
eight="176">

<param name="allowScriptAccess" value="always">

<param name="allowFullscreen" value="always">

<param name="movie"
value="http://streaming.interlake.net/players/interlake3/player.swf">

<param name="quality" value="high">

<param name="bgcolor" v
alue="#ffffff">

<param name="flashVars"
value="playlistfile=http://streaming.interlake.net/fp;streaming/20080506_130630/test/
html5;big_buck_bunny_320.mp4;stream;fwd.mp4&volume=80&button_dark=0x7B7B7B&button_bri
ght=0xffffff&icon_dark=0x333333&icon_color=0x3
33333&previewimage=http://streaming.int
erlake.net/fp;MDNPROG1/thumbnails/SDNProg/streaming/20080506_130630/test/html5;big_bu
ck_bunny_320.jpg;stream;fwd.jpg&autoplay=true&controls=true">

<video width="320" height="176" autoplay controls
poster="http://strea
ming.interlake.net/fp;MDNPROG1/thumbnails/SDNProg/streaming/20080
506_130630/test/html5;big_buck_bunny_320.jpg;stream;fwd.jpg" class="floatLeft
noBorder" id="videotag" onclick="this.play();">

<source
src='rtsp://cdnmobile.ilcdn.net/SDNProg/_definst_/mp4:str
eaming/20080506_130630/test/
html5/big_buck_bunny_320.mp4' />

<source
src='http://streaming.interlake.net/fp;streaming/20080506_130630/test/html5;big_buck_
bunny_320.webm;stream;fwd.webm' type='video/webm; codecs="vp8, vorbis"' />

<source
src='http://streami
ng.interlake.net/fp;streaming/20080506_130630/test/html5;big_buck_
bunny_320.ogg;stream;fwd.ogg' type='video/ogg; codecs="theora, vorbis"' />

<embed src="http://streaming.interlake.net/players/interlake3/player.swf"
quality="high" bgcolor="#ffffff" width="3
20" height="176" allowScriptAccess="always"
allowFullScreen="true"
flashvars="playlistfile=http://streaming.interlake.net/fp;streaming/20080506_130630/t
est/html5;big_buck_bunny_320.mp4;stream;fwd.mp4&volume=80&button_dark=0x7B7B7B&button
_bright=0xffffff&ic
on_dark=0x333333&icon_color=0x333333&previewimage=http://streaming
.interlake.net/fp;MDNPROG1/thumbnails/SDNProg/streaming/20080506_130630/test/html5;bi
g_buck_bunny_320.jpg;stream;fwd.jpg&autoplay=true&controls=true" />

</video></object>


Interlake Media Encoding

You can find more information
on the Interlake Media Encoding
Services on

http://www.interlake.net/en/int
erlake
-
media/media
-
encoding/




Interlake
HTML5 Streaming

-

Technical Documentation

6

/
6

2.3

HTML5 / Flash / Wi
ndows Media auto detect

The Html5/Flash
/Windows Media
auto detect
method is a dynamic
solution

and

works just the
other way round as the HTML5/Flash auto solution. In this case Flash/Windows Media is the
preferred delivery format and HTML5 the fallback solution if no Windows Media (e.g. for
Windows Mobile Phones) or Flash Capabilities are found.


Just
like in the previous solution the video needs to be present in different formats and with
special filenames:


Codec

possible filenames

H.264

<
video
>
.mp4

VP8 (WebM)

<
video
>
.
webm

OGG

<
video
>
.
ogg

WMV

<
video
>
.
wmv


o




Interlake customers can either encod
e all needed formats and upload them to their Interlake
Streaming Account or simply book our Encoding Service, which will encode one source video
automatically into all needed formats.


Below you can find a sample Copy & Paste Code for the
Html5/Flash/Windows Media auto
detect Streaming solution.


<iframe scrolling="no" border="0" frameborder="0" width="320" height="176"
src="http://streaming.interlake.net/fp;streaming/20080506_130630/test/html5;big_buck_
bunny_320.mp4;stream;dyn"></iframe>




As

you
can

see, there

s more to streaming video than j
ust posting a file on a server.
Please
don

t hesitate to contact us at

sales@interlake.net

to talk about your online video project
.
We

ll
be happy to guide you through the world of online video.



Interlake Media GmbH

August
-
Bebel
-
Str. 27

D
-

14482 Potsdam

Germany


www.interlake.net


Interlake Media Encoding

You can find more information
on the Interlake Media Encoding
Services on

http://www.interlake.net/en/int
erlake
-
media/media
-
encoding/