Incorporating video into an HTML5 based website

20
12

Incorporating video into
an HTML5
based website

Kangan Institute
-

Learning Development



Report p
roduced by Kangan Institute
–

Learning Development June 2012




INCORPORATING VIDEO
INTO AN HTML5 BASED
WEBSITE.

................................
.....

2

W
HAT IS THIS PROJECT
ABOUT

................................
................................
...........................

2

W
HAT IS
HTML

AND
HTML5?

................................
................................
.........................

2

I
S
HTML5

WIDELY SUPPORTED
?

................................
................................
........................

3

W
ATCHING VIDEO ON THE

WEB

................................
................................
.........................

3

H
OW TO PUT VIDEO ON M
Y
HTML5

WEBPAGE

................................
................................
....

4

Video formats

................................
................................
................................
.........

4

How to create a basic HTML5 web
page

................................
................................

5

Create the video tag and link the video

................................
................................
.

5

How to create HTML5 encoded video

................................
................................
....

5

Video doesn’t work

................................
................................
................................

8

The video did work, so what is it doing?

................................
................................

9

F
ALL BACK TO
F
LASH

................................
................................
................................
........

9

How to create your own Flash video player

................................
.........................

10

Insert the Flash video fall back for IE 6/7/8

................................
.........................

13

CREATING SUBTITLES F
OR HTML5 VIDEO

................................
..............................

14

C
URRENT
HTML5

SUBTITLE SUPPORT
................................
................................
...............

14

B
ROWSER AND DEVICE SU
BTITLE REQUIREMENTS

................................
................................

15

S
UBTITLE SOFTWARE

................................
................................
................................
......

15

S
UBTITLE CREATION PRO
CESS

................................
................................
..........................

17

LINK SUBTITLES TO
VIDEO

................................
................................
.....................

20

E
MBED SUBTITLES USING

HTML5

ONLY

................................
................................
............

22

M
AKING IT WORK NOW

................................
................................
................................
..

24

Making the <track> tag work in modern web browsers

................................
......

24

Downloading and using playr.js

................................
................................
...........

25

A Flash solution

................................
................................
................................
....

27

Making it work now, on an Android device

................................
.........................

30

Add the required JavaScript to the page

................................
..............................

30

Making it work now, on an Apple device

................................
.............................

33

It didn’t work on the iPad?

................................
................................
...................

35

CONCLUSION

................................
................................
................................
........

36


Report p
roduced by Kangan Institute
–

Learning Development June 2012



In
corporating video into an HTML5 based website.


What is this project about

This document has been developed as a result of a project undertaken by
Learning Development
that explored

different ways video

and subtitles

could
be incorporated into a HTML5
base
d website.

The video was first incorporated into the website, then tested on new and old
browsers and on mobile devices such as iPad, iPod, Android Phone and an
Android tablet. The testing was designed to ensure that video was visible and
usable in all new

and old browsers and did not lack accessibility features such
as subtitles.

T
his
document
will provide advice
and instructions
on

how to

incorporat
e
vi
deo into a HTML5 based website
.

It

will:



discuss
video formats required for HTML5 video



subtitle format
s and use in HTML5



identif
y
some compression software that may help produce video
in
the
right formats
*


It is also hoped that the advice and instructions will not be overly complex and
that only minor changes to the methods described in this document will

be
required once HTML5 specification is fully accepted
.

*Note: The document discusses compression
formats

but does not cover video compression
techniques

in great
detail.


What is HTML

and HTML
5?

HTML is

a code language which is used to develop webpages.

It is the code that
makes webpages look and act the way they do. For example, HTML coding will
tell the webpage what text colours to use, what to do when the user clicks

on
a
link
, when to play a video, or what happens when the user rolls the mouse
over a
n image.
HTML5 is the name given to the updated HTML standard.


Report p
roduced by Kangan Institute
–

Learning Development June 2012




Almost every web page on the i
nternet is made with, or incorporates, HTML
.
HTML was developed initially in 1990 by Tim Berners
-
Lee and was last updated

to its current standard
in 2000.
However
, since the introduction of mobile
devices there has been a need to adapt the current HTML standard to suit
these emerging technologies.
For example, HTML is now being upgraded to
include interactive features such as video and audio which can be viewed
wi
thout 3
rd

party plugins.

Although HTML5 is still in the process of developing, it is expected that HTML5
will soon replace current HTML technology and many developers and websites
are making the transition now.


Is HTML5 widely supported?

To add a video
into an HTML5 webpage, the tag <video>is added to the coding.

All new browsers

support the <video> tag and
some or most of
the

recommended
HTML5 features.


However, as HTML5 is currently under development it may be necessary to
provide multiple video forma
ts to be sure that the video will display in both old
and new
browsers (
required video formats are discussed in the section
Video
Formats
).

To see how well your browser supports HTML5 visit
http://html5test.com/
.


Wat
ching v
ideo on the web

The current HTML standard
doesn’t support

video being played directly from
webpages. Therefore, i
n order to view videos attached to webpages
,

the
user
is required to
download
3
rd

party plugins such as
Flash

or
QuickTime
.



Report p
roduced by Kangan Institute
–

Learning Development June 2012



As
3
rd

part
y plugins, such as Flash,
can drain the battery of mobile devices and
affect performance overall, both Apple and Microsoft have made the decision
to support the development of HTML5 as a way of replaci
ng the need to
download plugins
*
.
In addition

to this

A
dobe
,

the developer of the
Flash

player,

have announced that it will no longer update its mobile
Flash

player
and that it fully supports the proposed HTML5 standard
.



*
See Steve Jobs
’ article
‘
Thoughts

on
Flash
’

http://www.apple.com/hotnews/thoughts
-
on
-
Flash
/
.

How to put video on my HTML5 webpage

Video formats

Currently
, as of April 2012,

HTML5 has not confirmed which video formats will
be supported. In the meantime, to make sure all users of
a site can see the
video on any comp
uter or mobile device,

videos should be supplied in multiple
formats. For example, t
he formats that
must
be offered
at a minimum
are:



MP4

(H.264)



WebM



OGG was used by earlier versions of
Firefox
and
should be

considered
as
a format
still
worth supplying


How HTML5 works with multiple formats

The HTML5 <video> tag works using a fall back method. This means that a
browser that cannot view one video format will fall back to using the next in
the queue. If the browser still
does not understand the video format it can
keep looking through the <video> tag for more information or a f
ormat that it
does understand.

Some very old browsers don’t support the HTML5 video tag at all. In this case
a
nother format that can be offered is
the FLV file
type
.

Flash

also supports the

Report p
roduced by Kangan Institute
–

Learning Development June 2012



MP4 video codec so it is not overly important to supply the FLV format type

as
well
.

The MP4 video must be H.264 encoded to work with a
Flash

video player.

How to c
reate a basic HTML5 webpage

The only tags requir
ed to make a HTML5 web page are listed below.
All other

HTML tags fit within this structure, normally within the body tag. The
HTML5
<
video
>

tag is

also included in the body tag.


<!DOCTYPE html>

<html>


<head>


<title>My HTML5 Page</title>



</head>



<body>

<p>Webpage content such as text, images and video
go here</p>


</body>

</html


Create the video tag and link the video

Before adding an HTML5 encoded video into a webpage, video
s will need to be
HTML5 encoded and a link added to the
video on the HTML5 webpage.

The following section
s

will provide instructions on:



creating an HTML5 encoded video



creating an entire HTML5 web page
that includes a link to a video.

How to create HTML5 encoded video

Step 1

I.

Choose a video to add to the page
.


Report p
roduced by Kangan Institute
–

Learning Development June 2012



II.

Rename the
file to something simple (
for

this example
the

video will be
referred to as
html5videoex
).


III.

C
onvert this file into 2 different formats, so you will have two video files
created from the original source file
html5videoex
:





html5videoex
.
mp4



htm
l5videoex
.
webm

Creating a
WebM

Video

To convert video files to
WebM
format
,

try any of the software found here
:

http://www.webmproject.org/tools/#non
-
commercial
-
webm
-
tools

*

N
OTE*

The software in this site contains some
tools
which
are web based and are therefore not tied to a single
computer operating system
.


After testing software, the results in t
his project
show that

Firefogg

is a
suitable tool.

http://firefogg.org

A video example of using Firefogg
to convert files to the WebM

format
can be
found here:

http://www.youtube.com/watch?v=UyhXlLIV1vY


Creating a
MP4
video

The results f
rom this project show that
Handbrake
*

(or any other MP4
convertor including iTunes and QuickTime)
is a useful tool for creating an MP4
video. Handbrake is available on Mac OSX and Windows and is free.

NOTE*
: In some applications (ie Handbrake) there is an

option to choose the
format

of the final file type. In
this case
MP4 should be selected
and
H.264
should be selected from the

video codec
section. These are the
default options in Handbrake but may not be in other software.


http://handbrake.fr/


A video example of using Handbrake to convert video to the MP4 (H.264)
format can be found here:


Report p
roduced by Kangan Institute
–

Learning Development June 2012



http://www.youtube.com/watch?v=IJqLwRoZy1A

Step 2

This step involves s
etting up a website folder where videos can be stored along
with all other media and documents for the webpage.



Create a folder named
‘website’

to store the videos and any webpages
etc.




Place the formatted videos
html5videoex
.mp4

and
html5videoex
.webm

i
nto the ‘website’ folder

Step 3

This step involves c
reat
ing

a web page in your favourite development software
or text editor.




Use the HTML
mark
-
up

below

to make a valid HTML5 web page.

<!DOCTYPE html>

<html>


<head>


<title>My HTML5
Video
Page</
title>


</head>



<body>


</body>

</html>



Save
the

file as
html
5video.htm

into the
‘website’
folder where you
stored the correctly formatted video.

In the
‘website’
folder you should now have:

I.

html5video.htm

II.

html5videoex
.webm

III.

html5videoex
.mp4


Report p
roduced by Kangan Institute
–

Learning Development June 2012



Step
4

This step involves adding the video to the webpage.



Open the
html5video.htm file



P
lace th
e

HTML
mark
-
up
*

below,
between the opening and closing
body tags:

NOTE*

Always put the MP4 video first. Some Apple devices at the time of writing only process the
first
source tag. If the MP4 is at the bottom of the list it may not play in iOS devices such as iPad.


<body>

<video width="
640
" height="
360
" controls="controls">


<source src="
html5videoex
.mp4" type="video/mp4" />


<source src="
html5vi
deoex
.webm" type="video/webm" />

Your browser does not support video, please take this

opportunity to download a new browser.

</video>

</body>



Save the changes

made

to the html5video.htm file and open it in a
browser
.*

NOTE*

If your video looks distorted
adjust the width and height attributes in the video tag to your video
dimension
s
.


Video doesn’t work

If the video doesn’t work, check
all of
the following:



the file path to the video is incorrect (Check the file path and amend if
needed)



review the HTML m
ark
-
up coding for inconsistencies



if you see the “
your browser does not support video…”

text you are using
an older browser that needs to be upgraded (instructions on how to

Report p
roduced by Kangan Institute
–

Learning Development June 2012



supply video to older browsers will be provided

in the

following

section
s)
.



If you

are testing your work on the internet and find that the video
works fine when tested locally but not when run on the server (internet)
it is likely that the mime.types file on the server will need to be updated.

Either add, or ask the web administrator to

add this information to the
mime.types file:


video/mp4


mp4 mp4v mpg4 m4v

video/mpeg


mpeg mpg mpe m1v m2v

video/ogg


ogv ogg

video/quicktime
qt mov

video/webm


webm



The video did work, so what is it doing?

Firstly the browser d
etects the
<
video
>

tag and
then
looks for the
<
source
>

tag
. The
<
source
>

tag

tells the browser where to find the video. If the browser
does

not know how to
process the

first

video, in this case
the MP4 video file
,

it
will move o
n to the
second

<
source
>

tag

and use that.

Some older browsers may not
understand the <video> tag

at all so the movie
won’t work despite there being several sources. In this case there is the option
to fall back to flash. This is discussed in the following section.


Fall back to
Flas
h

Currently
Internet Explorer 6/7/8 ha
ve

24% of the browser market and
do

not
support the
HTML
5

video tag at all.
In this case, some users who are using one
of these browsers may not be able to access the video content at all.

In this

Report p
roduced by Kangan Institute
–

Learning Development June 2012



case a fall back to
F
lash

Player

is required
, as it

will more than likely be
installed on most computers.

To create the fall back to
Flash
, a
Flash

video
player which supports subtitles and provides helpful advice on how to
incorporate them

is needed.

If it isn’t possible to
find a Flash
video
player that supports subtitles
,

it is
possible to create
one that does. First

the creation of

a standard Flash based
video player
will be demonstrated
and later attaching subtitles
to it
will be
discussed.


How to
cre
ate your own
Flash

v
ideo player

This link provides instructions on
how to create a
Flash

video player:

http://www.youtube.com/watch?v=CnZTkKaEIRI

The steps below are a guide to creating a
Flash

video player
.

Steps


Co
mments

Open

Adobe
Flash

and
create a
new file
.


The information in this table works on
Flash

CS versions 3 and above
.

Save the file as videoplayer.fla
into the
‘
website’

f潬T敲e睨敲w
瑨攠䡔䵌H 牥慤礠癩v敯猠慲攠
獴s牥r.

坨敮 瑨楳⁳瑥i 楳ic潭o汥l攠瑨e
webs
ite

folder should contain:



videoplayer.fla



html5videoex
.mp4



html5videoex
.webm



html5video.htm

Resize

the
Flash

document

to
the dimensions of the video.
Usin
g Finder (on the Mac)
or

My Computer
on Windows
:



Report p
roduced by Kangan Institute
–

Learning Development June 2012



Add 40 pixels to the height of
the
Flash

document to make
room for the video controls
added later.


A.

S
elect the video,
from

information
that shows the video dimensions.

or

B.

O
pen the video in an application s
uch
as
QuickTime
. In
QuickTime
o
pen the
Movie Inspector

window.

C.

In
VLC

from the menu
and
select:

To
ols

>
Media Information

>
Codec

Open the ‘
Components’

睩nT潷
晲潭o瑨攠
瑯瀠
m敮u

楮
Flash
.

Select
Window
>

Components

From the Components window
choose
Video.


From the Video options choose
FLVPlayback
click,
drag

and
release

this onto the document.


Clo
se the ‘Component’ window
.


卥琠瑨攠T業en獩sns

(U敩杨琠慮T
睩T瑨)

潦 瑨攠䙌噐污lb慣欠
c潭o潮敮W
Ⱐ瑯

瑨攠獡浥
T業敮獩sn猠慳s瑨攠癩摥漮

卥汥S琠瑨攠䙌噐污l
bac欠c潭o潮敮W b礠
c汩捫楮i 潮o瑨e
癩摥漠
潢橥o琠潮o瑨e
T潣om敮琬
not

the one that is in the
component win
dow
. Once selected
height
and width opt
ions are made available in the
P
roperties

panel.

Position the FLVPlayback
component so that its top left
corner sits in the top left corner
of the document.

Or, select the FLVPlayback component by
clicking on the
vid
eo
object on the
document and set
ting the X and Y values in
the
P
roperties

panel both to 0.

Open the ‘
Component
Select
Window
>

Components Inspector


Report p
roduced by Kangan Institute
–

Learning Development June 2012



Inspector’

睩nTo眠晲潭o瑨攠瑯瀠
m敮u.

卥汥S琠瑨攠䙌噐污祢ac欠
c潭o潮敮W
.

卥汥S琠瑨攠䙌噐污祢ac欠c潭o潮敮W b
礠
c汩捫楮i 潮o瑨e 癩摥漠潢橥c琠潮o瑨e
T潣om敮W

䙲潭o瑨攠
‘Component
Inspector’

睩nTo眠wh潯獥s
‘skin’
.

‘skin’ refers to the controls of the video
p污祥爠
–

p污礬l獴spⰠp慵獥s整c.

卣牯S氠To睮w瑨攠汩l琠潦 潰瑩潮猠
慮T cU潯獥s
SkinUnderPlayStopSeekCaption
Vol


Th
is places the controls under the video.
The ‘skin’ will have play, stop, seek, caption
慮T 癯汵l攠c潮瑲潬o.

C汩捫 O䬮


䙲潭o瑨攠
‘Component
Inspector’

睩nTo眠wh潯獥s
‘source’.

卯u牣r 楳⁵獥s 瑯⁳整 瑨攠汩湫Ⱐ潲 p慴a, 瑯⁴h攠
癩摥漮

卥汥S琠
Browse

and locat
e the
MP4 video

created earlier.

The video

player being constructed should
be in the same folder (website) as the
HTML5 videos prepared earlier. Therefore
the MP4 video should be visible when

Browse

is selected.

Click OK.


Save the changes that have been

made.


Press Ctrl
-
Enter on a PC or
Command
-
Return on a Mac to
publish your video.

The video should display in a
Flash

window.

Troubleshooting


Report p
roduced by Kangan Institute
–

Learning Development June 2012



Video not working:



C
heck the
‘
獯u牣r
’

楳i獥琠c潲牥r瑬礠楮i
瑨攠
Component Inspector



Make sure that the MP4 video
has
been encoded with H.264. Use
H
andbrake to re
-
encode if necessary.

Done

The website folder should now contain
these files:



videoplayer.fla



videoplayer.swf




SkinUnderPlayStopSeekCaptionVol
.sw
f



html5videoex
.mp4



html5videoex
.webm



html5video.htm



You are

now ready to insert the
Flash

video fall back into your HTML5
webpage.


Insert

the
Flash

video fall back for IE 6/7/8

The instructions below are a guide to inserting code for the
Flash
video fall
back into older browsers (IE 6,7,8).

Update your webpage,
html5video
.htm,
using the code below.


Report p
roduced by Kangan Institute
–

Learning Development June 2012



<body>





<video width="
640
" height="
360
" controls="controls">



<source src="html5videoex.mp4" type="video/mp4" />



<source src="html5videoex.webm" type="video/webm" />





<object id="
f
lash
Content" type="application/x
-
shockwave
-
f
lash
"
data="
videoplayer.swf
" width="640" height="400">




<param name="movie" value="videoplayer.swf" />



<p>Download the
Flash

plugin from <a
href="http://www.adobe.com" title="Down
load
Flash

plugin">www.adobe.com</a></p>



</object>




</video>





</body>



Creating subtitles for HTML5 video

This section will discuss



current html5 subtitle support



browser and device subtitle requirements



subtitling software



techniques fo
r creating subtitles

Current HTML5 subtitle support

In the current proposed HTML5 standard the <video> tag contains a <track>
tag used for supplying a link to a subtitle file.

At the time of writing (April 2012) there is no support for providing subtitles

using the <track> tag

in HTML5 enabled websites displaying video.

While the
<track> tag remains unsupported by all current browsers a few developers

Report p
roduced by Kangan Institute
–

Learning Development June 2012



have created JavaScript libraries (JavaScript is code which makes web pages
very interactive) that add the

required functionality to the <track> tag.

The proposed

subtitling
format for
HTML5 video
is

WebVTT whic
h is based on
SubRip .SRT and there are JavaScript libraries available that support it.

WebVTT (.vtt) has a lot of support and will likely remain the f
ormat used for
subtitling HTML5 video into the future.
This is a positive outcome as it is
possible to demonstrate the correct way to create and incorporate subtitles
that work now and remain relevant when the HTML5 specification is
completed
.

Browser and
device subtitle requirements

While JavaScript libraries solve the problem of the lack of subtitle support in
modern HTML5 browsers it does not completely solve the problem for:



o
lder browsers using the
Flash

based fall back



m
obile devices (iOS and Android
*
), even though they have HTML5
enabled browsers installed.

To create subtitles that will wo
rk in all situations there need
s

to be
3

different
subtitle formats

provided. These formats are:



WebVTT (.vtt) for modern web browsers on a desktop or laptop
compute
r



SubRip
SRT (.srt) for use with iOS devices



XML (.xml) for
Flash

fall back and
an

Android solution.

I
t is possible to create the
SubRip

format and convert that into
the
other
formats using freely available
web based
tools.


Subtitle software

Subtitles are

required to make video accessible to all users. The process of
making subtitles involves creating an initial subtitle in the SubRip SRT format
then converting it into WebVTT and XML for
Flash
.


Report p
roduced by Kangan Institute
–

Learning Development June 2012



The WebVTT format is used by HTML5 to provide subtitles and i
s relatively
new.
Consequently, t
ools that export directly to this format are hard to find.
Currently WebVTT only works on desktop and laptop computers running
modern browsers with a JavaScript solution.

WebVTT validator :
http://quuz.org/webvtt/

The table below provides information on free subtitling options which have
been tested in this project.

These options can be used to create subtitles
which can be converted to WebVTT format for HTML5 web pages.

Subtitling t
ool

Creates
WebVT
T

Operatin
g system

Ease of
use

1= difficult, 5=
easy

Fre
e

Web
based
solutio
n

Time to
subtitle
3min video

Subtitle
Workshop

No

Windows
only

4

Yes

No

1 hour

MAGpie


No

Windows
only

2

Yes

No

2 hours

Aegisub

No

Windows
and Mac

1
–

c潵汤
n潴

来琠楴i
瑯⁷W牫r
敦e散瑩癥W
y

奥Y

乯

啮獵sc敳獦
畬

Universal
Subtitles/Amar
a

No

Any
operating
system
with a
web
browser.

5

Yes

Yes

20 minutes


Report p
roduced by Kangan Institute
–

Learning Development June 2012



*No software tools that could support export to the WebVTT format were
identified.

The two software programs which
standout as being of the most use are
discussed below.

Subtitle Workshop

Th
is tool plays MP4 encoded files. This is a feature which is unavailable in other
tools.

While it is easy to use the
interface, it

is not completely intuitive and
requires re
gular a
ccess to the help files.
While Subtitle Workshop does not
directly create WebVTT (.vtt) files
,

the conversion process from the .srt type is
exceedingly easy.

Universal

Subtitles
/Amara

This
is

excellent and is by far the easiest subtitling tool available.
There are 3
simple steps that are explained clearly
at
the beginning of each step via short
video instructions. This tool
is

the simplest tool for the
beginner
to
use.

Universal

Subtitles
/Amara
is a web based tool. This means that the video being
worked on

will need to be uploaded to
a video hosting site (
ie

You
Tube
, Vimeo,
your personal website
) in order to apply subtitles.

The video can then be
removed
once subtitling has been completed.

During
the project
trials
,

Universal Subtitles/Amara was used to cr
eate the
initial subtitles file. The file was then converted into a
WebVTT file

later
.
In the
future it is expected that WebVTT will become the standard for delivering
subtitles and there will
be more software available that will export directly to
WebVTT.


Subtitle creation process

Universal Subtitles/Amara
*

was identified as the best tool for creating

initial

subtitles
. The interface is
easy to navigate

and does not contain any more tools
than are needed for
each step which saves time.


Report p
roduced by Kangan Institute
–

Learning Development June 2012



NOTE*
:
If video ca
n’t be uploaded to an internet location it is recommended that Subtitle Workshop is u
sed to
create

subtitles instead
.

The following steps provide instructions for creating subtitles in
Universal
Subtitles
/Amara.

Step 1:


U
pload the video

onto a video hosti
ng site (ie

YouTube, Vimeo
)
or any site or
web server that you have access to.

Step 2:


The Universal Subtitles/Amara website and
instructions on how to create
subtitles are provided in the link
*
below.
The
site contains short instructional
videos for e
ach step.
Step 3 below contains instructions on how to save the
subtitles to your computer
.

http://www.universalsubtitles.org/

NOTE
*
:

Due to an imminent name change from Universal Subtitles to Amara the we
b link
above

will likely
change. If the link is not working it would be best to search
for ‘Universal Subtitles Amara’.




Step 3:


Save the subtitles

to your computer.



s
elect the
‘Download
s
ubtitles’

button at the end of
the final step





c
opy the text
from the text box(
this
contains

the
actual
subtitles
)


Report p
roduced by Kangan Institute
–

Learning Development June 2012






o
pen any text editor such as Notepad on the PC or TextEdit on the Mac



p
aste the copied text into the text editor




d
elete the first 3 lines from the file, these relate
to
Universal
Subtitles/Amara re
quirements only.



s
ave the file as
subs.srt


Step 4:

Convert the file from subs.srt to subs.vtt
*



navigate to this website:
http://atelier.u
-
sub.net/srt2vtt/

(search string

used
to find this site initially w
as
‘convert srt to
web
vtt’)



u
pload the subs.srt file by selecting ‘Choose File’


Report p
roduced by Kangan Institute
–

Learning Development June 2012





s
elect the ‘Convert me please’ button



t
he converted, WebVTT (.vtt) file will download

NOTE
*
: The differences between .srt and .vtt are currently slight. A properly formatted .v
tt file has WEBVTT at
the top of the fil
e and then a blank line and replaces commas in the time format with decimal

points
.



Step 5:

Convert the file subs.srt to .xml for
Flash



N
avigate to this website
*
:

http://vsync.tunezee.com/convertCaption.html


(search string ‘srt to timed text’)
.



S
elect ‘Choose file’ and choose the subs.srt file created earlier
.



C
hoose W3C Timed Text

from ‘Output format’
.



S
elect the ‘Convert’ button
.



D
ownload the converte
d file.


NOTE
*
:
T
his site uses a popup window to process the file conversion.

Check that the p
opups are unblocked on
your browser.

Link subtitles to video

Once you have created and saved the subtitles they have to be linked to the
video on the webpage. Th
e following sections will discuss:


Report p
roduced by Kangan Institute
–

Learning Development June 2012



Embed
ding

subtitles using HTML5 only


The

section ‘
Embed
ding

S
ubtitles using HTML5 only’

will describe how subtitles
will be provided to HTML5 based websites in the future.

Making subtitles work now

T
he section


‘Making
s
ubtitles

work now’

will discuss how to get subtitles to
work before the HTML5 specification is ratified.

Before start
ing



M
ove the

subs.srt,

subs.vtt

and the
subs.xml

file to the ‘
website’
folder

that was

created earlier

All files required should now be i
n the same folder, encoded video files, HTML5
web page
s

and the subtitle files.
It is important to ensure that
all sub title files
are available in the ‘website’ folder.
This will make
files

ready to

work with and
link to the HTML5 encoded video.

The websi
te

folder should contain these files:



videoplayer.fla



videoplayer.swf



SkinUnderPlayStopSeekCaptionVol
.swf



html5videoex
.mp4



html5videoex
.webm



html5video.htm



subs.srt



subs.vtt



subs.xml



Report p
roduced by Kangan Institute
–

Learning Development June 2012



Embed subtitles using HTML5 only

These instructions will provide the HTM
L5 code for embedding subtitles.
Before starting,
open
the
html5video.htm
webpage that
was created
earlier.
That web page contained 3 links to 2 videos:



html5videoex
.mp4



html5videoex
.webm

Two of the links
in this page
were for HTML5 enabled devices and
the

other
was for the
Flash

based fall back if the browser didn’t support HTML5.

The
HTML
code
in this webpage
currently
appears as:

Current code

<body>





<video width="
640
" height="
360
" controls="controls">



<source src="html5videoex.mp4" t
ype="video/mp4" />



<source src="html5videoex.webm" type="video/webm" />





<object id="
flash
Content" type="application/x
-
shockwave
-
flash
"
data="
videoplayer.swf
" width="640" height="400">




<param name="movie" value="v
ideoplayer.swf" />



<p>Download the
Flash

plugin from <a
href="http://www.adobe.com" title="Download
Flash

plugin">www.adobe.com</a></p>



</object>




</video>





</body>




Updated code


Report p
roduced by Kangan Institute
–

Learning Development June 2012



Add the line of code below
after
the <source> ta
gs and

before

the <object> tag
to create the link to the subtitle:

<track src="subs.vtt" kind="subtitles" srclang="en" label="English
subtitles" default />

Th
e

<track> tag
is all that is required to meet the proposed HTML5
specification

of providing subtit
les
.
Currently
there are no browsers that
render the subtitles from the <track> tag only and there
fore

a JavaScript
solution
must be
provided.

This is discussed in the ‘Making it work now’
section of this document.

src

–

this is the location and name of th
e subtitle file

kind

–

specifies whether captions, subtitles, chapters, descriptions or metadata
are being provided.

srclang

–

the language of the track

label

–

the title of the track

default

–

specifies that the track is enabled by default. Many track ele
ments
can be used for the same video.

The webpage code

now

with the <track> tag included appears as below:

<body>





<video width="640" height="360" controls="controls">



<source src="html5videoex.mp4" type="video/mp4" />



<source
src="html5videoex.webm" type="video/webm" />





<track src="subs.vtt" kind="subtitles" srclang="en"
label="English subtitles" default />


<object id="
flash
Content" type="application/x
-
shockwave
-
f
lash
"
data="
videoplayer.swf
" width="640" he
ight="400">



<param name="movie" value="videoplayer.swf" />



<p>Download the
Flash

plugin from <a
href="http://www.adobe.com" title="Download
Flash

plugin">www.adobe.com</a></p>




Report p
roduced by Kangan Institute
–

Learning Development June 2012



</object>




</video>





</body>


1.

Save the chang
es to the web page and test the result in a browser. In
future versions of web browsers this is all that will be needed to get
subti
tles to work. As of April 2012
*

there are no browsers that support
the <track> tag.

NOTE
*
:
Web Developers
should
make sure t
hat the

sites and pages
that are developed
,
work

on all commonly
used web browsers

including old and new
. It is expected that IE8, that does not have <video> tag support will
be in common use for the next few years
, 2015 and beyond
. Therefore
while the <tr
ack> tag will start to
become more widely incorporated into future browsers web developers will still need to make sure that
subtitles are available in older browsers that don’t support
<track>
.


Making it work now

Making the <t
r
ack> tag work in modern web

browsers

At the time of writing there are
three
JavaScript solutions that offer the
required subtitle f
unctionality to the <video> tag;

Playr.js, MediaElement and
BubbleJS.

Playr.js


The chosen JavaScript solution for this project is
playr.js
.
(
Instructio
ns on
downloading and using playr.js
are outlined in
Downloading and Using
Playr.js
)

Media Element

MediaElement.js
http://mediaelementjs.com/
, appears to be a robust
alternative though the configuration is more co
mplex than other available
options.

BubbleJS


Report p
roduced by Kangan Institute
–

Learning Development June 2012



BubbleJS
http://bubbles.childnodes.com/

is well designed and has the most
potential for the creation of interesting video interaction in the future. The
downside
to this however is that it has some features which make it less
compliant

and easy to use
. For example:



i
t only supports .srt subtitles



it has a complex setup which makes it difficult for beginners



the subtitle track is linked through JavaScript not by th
e <track> tag in
the HTML.


Downloading and using playr.js

Playr.js is

downloadable here:

https://github.com/delphiki/Playr


St
e
p 1:



D
ownload the repository as a zip file by selecting

the

ZIP

icon




U
nzi
p the files and then place them into the ‘website’ folder created
earlier
.



D
elete the files called CHANGELOG.markdown and README.markdown
(

they are not important for implementing subtitles
)
.

Your website folder should now include these files and folders:



videoplayer.fla



videoplayer.swf


Report p
roduced by Kangan Institute
–

Learning Development June 2012





SkinUnderPlayStopSeekCaptionVol
.swf



html5videoex
.mp4



html5videoex
.webm



html5video.htm



subs.vtt



subs.xml



playr.js



playr.css



images (folder)


Step 2:

Now link the required files to the webpage
.



Change the <head> of the HTML t
o appear as below:


(This will link the
required JavaScript to the webpage.)


<head>


<title>My HTML5 Video Page</title>


<link rel="stylesheet" type="text/css" href="playr.css" />


<script src="playr.js" type="text/javascript"></sc
ript>


</head>

Step 3:

To enable the JavaScript a small change needs to be made to the <video> tag.



Update the <video> tag so that it matches below:

<video
class="playr_video"

width="640" height="360" controls="controls">



Save and test the web page in
a modern browser.


Report p
roduced by Kangan Institute
–

Learning Development June 2012



Subtitles should appear on the page over the video, if they do not
,

use the
video controls that appear underneath the video to show the captions.
*

NOTE:

*
There is a current issue (April 2012) with Google Chrome where the subtitles will n
ot appear unless the
video is being viewed over the
i
nternet. Local computer testing does not work. Either upload the ‘website’
folder to the
i
nternet or test using another browser such as Firefox.


A
Flash

solution

O
lder browsers that don’t support HTML5
video need to use the
Flash

fall
-
back
as

described earlier for

IE 6,7 and 8.

Firstly
the
Flash

video player needs to be
altered to show subtitles.

The steps below will update the videoplayer.fla and
videoplayer.swf files.

There is a video demonstration of
the steps below

available

here:
http://www.youtube.com/watch?v=HcG3L1P149U

Steps

Comments

Open videoplayer.fla that was created
earlier
.

This can be found in the ‘
w
ebsite’
景汤lr.

卥汥S琠瑨攠呥T
琠呯潬 晲潭o瑨攠瑯W汢l爠
–

don’t draw a text box just yet.

卥瑴楮i 瑨攠潰瑩潮猠b敦e牥rT牡r楮i
瑨攠瑥硴⁢潸 獥敭敤 瑯慫a 愠b整瑥爠
牥獵汴 楮i䅤潢A
䙬慳a

C匵S
周楳⁩猠
p
牯b慢汹ln潴⁩op潲瑡WW

瑨潵杨 楴i睡w
晲u獴牡瑩湧
.

卥琠瑨敳攠p牯p敲瑩e猠s敦e牥rT牡r楮i 愠
瑥
硴⁢潸J



Make the text box a
Dynamic

text box



Choose a readable font such as
Arial

When the text box
, or text tool,

is
selected all of the text box properties
can be located in the Properties panel.


Report p
roduced by Kangan Institute
–

Learning Development June 2012





Set the font size to
16pt



Choose a bright colour such as
white

or
yellow



Click on the ‘Character
Embedding’ button



Choose ‘
Uppercase’,
‘Lowercase’, ‘Numerals’,
Punctuation’ a
nd ‘Basic Latin’

䑲慷 愠瑥硴⁢潸 慴a瑨攠b潴瑯洠潦 瑨攠
癩摥漠o污祥爠獣牥sn
.

P污l攠楴iw
U敲e 獵s瑩瑬敳eu獵慬汹s
慰p敡爮

䝩G攠瑨攠瑥硴⁢潸 慮 i
n獴慮c攠n慭e 潦
subsText
.

When the text box is selected the
re is
an ‘Instance Name’ option located in
瑨攠P牯p敲瑩e猠s慮敬e

From the ‘
Window’

m敮u ch潯獥s
‘
Components’
.


䑲慧D瑨攠
FLVPlaybackCaptioning

component to the left of the video.

The positioning do
es not matter

as

the component

is not visible when the
movie is
running;

placing it off to the
side of the video player keeps the
work area clear.

Close the ‘Components’ window.


From the ‘Window’ menu choose
‘
Component Inspector’
.


Make sure that the
F
LVPlaybackCaptioning component is
selected.

Click on
the component

with the
‘Selection’ tool (Black Arrow)


Report p
roduced by Kangan Institute
–

Learning Development June 2012



Select the ‘Parameters’ tab on the
‘Component Inspector’ window.


卥琠瑨攠
CaptionTargetName

property
to
subsText

This is the name of the text box
c
reated earlier.

Set the
Source

property to
subs.xml

subs.xml

is the subtitle file
created
for
Flash

earlier.

From the menu choose ‘Control’ and
then ‘Test Movie’.

周攠獵s瑩瑬W猠獨潵汤 慰p敡爠瑨潵杨
瑨敹em慹abe 愠汩瑴汥 晬慴a慮T n潴⁳瑡oT
潵琠慳ucU 慳⁥
硰xc瑥T. On攠睡礠瑯w
晩砠瑨楳⁩猠i漠慴o慣U 愠
Drop Shadow

filter to the text box.

Select the text box.


From the ‘Properties’ panel choose
‘Filters’
.


Select the ‘Add Filter’ button at the
b潴瑯洠汥晴l潦 瑨攠pan敬e

周攠楣潮o汯潫o 汩步l愠p楥i攠潦 p慰敲e

C
U潯獥s
Drop Shadow.


Save and test the movie again.


A
Flash

file that plays subtitles has
been created.

This should have updated the
videoplayer.swf file that is in the
‘Website’ folder.

Go back to the ‘Website’ folder and
潰敮 瑨攠
html5video.htm

file
in IE
6,7,8 to view the
Flash

fall
-
back. The
subtitles should now be working
there.




Report p
roduced by Kangan Institute
–

Learning Development June 2012



Making it work now, on an Android device

Androids are more complex.
The

video opens in a native Android player and
does not play in the webpage directly

because the
subt
itle track is ignored

by
the internal Android vid
eo player. W
hile it is possible to embed
subtitles on the
video

(as described later in
Making It Work N
ow on an Apple
D
evice
) the
current Android video player does not give the option of selecting them.


The
refore a
Flash

alternative that does supply subtitles is required. To supply
the
Flash

alternative
a

Flash

fall
-
back in the HTML5 <video> tag

is needed
in
combination
with a
JavaScript fix that:



removes the <video> tag completely (which, as a by
-
product re
moves
the HTML5
Flash

fall
-
back)



re
-
embeds the
Flash

video.

In order to

implement HTML5 and video in the

easiest

most conformant and
future proof

way
, two

JavaScript libraries were used
;

SWFObject and jQuery,
and a short customised script
.

NOTE:
Custom J
avaScript could have been written to do everything mentioned
above though it is easier to implement

the proposed fixes using these

common
JavaScript
libraries
.

JQuery is becoming more widely used and it is not unlikely
that it is already available on the p
age that will hold the video

that requires
this fix
.

Add the required JavaScript to the page

Step 1:

Download the required JavaScript libraries SWFObject and jQuery.

SWFObject:
http://code.google.com/p/swf
object/

jQuery:

http://jquery.com/


At the time of writing the current versions are SWFObject2.2 and jQuery 1.7.2
use the latest versions that you can find to ensure cross browser compatibility.


Report p
roduced by Kangan Institute
–

Learning Development June 2012



Step 2:



Place the JavaScr
ipt files into the ‘
w
ebsite’ folder
*.

Note
*
:

When the SWFObject folder is unzipped

it creates a number of folders that contain examples of how to
use it and 2 SWFObject JavaScript files. Both files will work though the one file that is used in the examples

below is the minified version found in
the folder
:

swfobject_2_2/swfobject/swfobject.js
.



The files

now

in the ‘
w
ebsite’ folder should appear as below:



videoplayer.fla



videoplayer.swf



SkinUnderPlayStopSeekCaptionVol
.swf



html5videoex
.mp4



html5videoex
.webm



html5video.htm



subs.vtt



subs.xml



playr.js



playr.css



images (folder)



jquery
-
1.7.2.min.js

(or similar depending on current version)



swfobject.js

(or similar depending on current version)

Step 3:



Open
html5video.htm

in
a preferred

web editor


Report p
roduced by Kangan Institute
–

Learning Development June 2012





Paste the followi
ng HTML into the <head> of the document

above the
playr.js

link.
Ensure that the same order as below is kept
as it

is

important.

<link rel="stylesheet" type="text/css" href="playr.css" />

<script src="jquery
-
1.7.2.min.js" type="text/javascript"
language="j
avascript"></script>

<script src="swfobject.js" type="text/javascript"
language="javascript"></script>

<script src="playr.js" type="text/javascript"></script>


Step 4:

This step will:



include some custom code that inserts a
flash

object



use information fro
m the
flash

fall
-
back in the video tag



remove the <video> tag completely



complete the process

on an Android device only.


1.

Insert the code below between the swfobject.js and playr.js <script>
tags.

The code below waits until the page is ready. Once the page

is ready it looks
for the Android* operating system (OS) and if it finds the Android OS it:



creates a <div> for the new
Flash

to be embedded in



embeds the
Flash

video into the newly created <div> using information
that is obtained from the
Flash

fall
-
bac
k in the <video> tag



deletes the <video> tag from the page as it is no longer required



Report p
roduced by Kangan Institute
–

Learning Development June 2012



<script src="swfobject.js" type="text/javascript"
language="javascript"></script>


<script type="text/javascript">


$(document).ready(function(){



if(navigator.userAge
nt.toLowerCase().indexOf("android") >
-
1) {




$("<div id=
'
flash
Content'
></div>").insertBefore("video");

swfobject.embedSWF($(
"video object").attr("data")
+”?”
,
"
flash
Content", $("video object").attr("width"), $("video
object").attr("height"), "9.0.0");

//
all on one line.


$("video").remove();



}



})

</script>

<script src="playr.js" type="text/javascript"></script>

IMPORTANT

NOTE*:

For some reason
Flash

video does not work on Android in a
Flash

video player
**
unless
there is a question mark (?) after the
path to the
Flash

file.

A question mark is used to send information from
the web page back into
Flash
. This is why there is a question mark in the code above
-

($("video
object").attr("data")
+”?”
,

–

If variables are being sent to
Flash

from the standard
Fl
ash

embed created in the
HTML5 <video> tags it is wise to remove the question mark from the
JavaScript
code. Here is the amended
code
-

($("video object").attr("data"),

NOTE
**
: playr.js still runs though it does not find a <video> tag and does not initiali
ze any code that causes
confusion for the Android device.


Step 5:

Upload the website and t
est this
on

an Android device.

Making it work now, on an Apple device

Apple iOS devices such as the iPhone, iPod and iPad work differently with
video in web pages. R
ather than playing the video directly in the webpage the
video opens i
n the inbuilt iOS video
player. This

means that any subtitles
provided by the web page will not be visible as the video is not displayed in the
webpage.


Report p
roduced by Kangan Institute
–

Learning Development June 2012



The best way to provide a sol
uti
on is to return to
Handbrake

so that subtitles
can be directly encoded onto the video.
This section will provide instructions
on this process.

A video demonstration of the steps below is available here:
http://www.youtube.com/watch?v=SiBJtF7bQOs


Step 1:


Encode the video with subtitles
*. (

The
subs.srt

file will be used for this
purpose)



Open the Handbrake application



Locate
and use

the original video file
, do not use any of the videos
previously
encoded and compressed, using these videos would only
produce a poor quality result

as you would be recompressing an already
compressed video
.



Make the e
xport
ed

file

name
html5exsubs.mp4



Select the tab labelled
‘Subtitles’



Select the
‘Add External SRT’

but
ton



Navigate to the
‘
w
ebsite’
folder



Choose the
subs.srt

file



Press the
Start

button to begin the encoding process.



When encoding is finished m
ove the new MP4 file to the ‘website’ folder

Step 2:

Link the new subtitled video to the webpage.



Change the firs
t <source> tag from this

<source src="html5videoex.mp4" type="video/mp4" />


Report p
roduced by Kangan Institute
–

Learning Development June 2012





To this:

<source src="
html5exsubs.mp4
" type="video/mp4" />

Upload
the new video file and the changes to the webpage
and test the
webpage on an iOS device such as an iPad.



Select

th
e subtitles button when the video loads

in the video player

to
see the encoded subtitles with the video.

NOTE
*
:
Encoding

subtitles directly into the video
does not mean

the HTML based webpage no longer needs the
<track> tag. The above is a ‘fix’ for provid
ing subtitles on an iOS device only.


It didn’t work

on the iPad
?

Not all versions of

iPad
s

are the same
. A
t the time of writing, iPad 1,2 and 3
were

available.

When testing the procedure outlined above
, both

iPad 1 and
iPad 2 gave different results. On s
ome iPads the video played well how
ever on
others there was a conflict between playr.js JavaScript library and
the iPad
,
as
playr.js

JavaScript library tried to override the iPad in how the video was
played.

This problem can be is solved by amending the J
avaScript for Android so that
subtitles
are
co
nsistently
available
on iPad devices

as per instructions below:

Step 1

Amend the JavaScript for Android in the <head> of the html5video.htm
webpage so it appears as below:

<script type="text/javascript">



$(
document).ready(function(){



if(navigator.userAgent.t
oLowerCase().indexOf("android")
>

-
1) {



$("<div id=
'
flash
Content'
></div>").insertBefore("video");

swfobject.embedSWF($("video object").attr("data")+"?",
"
flash
Content", $("video object").att
r("width"), $("video
object").attr("height"), "9.0.0");



$("video").remove();


Report p
roduced by Kangan Institute
–

Learning Development June 2012




}

if(navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/iPod/i)){




$("video").removeAttr("class")



}


})


</script>

This JavaScript removes the ‘class’ attribute from the <video> tag that triggers
the playr.js scr
ipt to create the video player.

This means that the video will
display in the webpage as normal HTML5 video does on an iPad an
d the
subtitles will be available when the video is played in the native iPad video
player.




Conclusion

In due time,
HTML5 will make the work of a web developer
more efficient and
effective.

Once the final video format is chosen, e
mbedding video
in HTML5

webpages
will
become less complex.

In addition
,

the
implementation of
subtitles using the <track> tag will eventually require less or no JavaScript fixes.


In the meantime, a
Flash

fall
-
back will be necessary as
IE8 is expected to be
used widely
until 20
15 when Microsoft stops support for Windows XP

and it
currently
d
oe
s not support the <video> tag.

There is still some degree of complexity in c
reating subtitles
, in that there is a
lack of available software for easy and less time
consuming file

conversio
n to
HTML5 compatible formats. However, this may change at some stage as the
available features in
Universal Subtitles/Amara
were better than expected and
have the potential to be developed further.


Report p
roduced by Kangan Institute
–

Learning Development June 2012



Google are
currently working on providing subtitles in
Yo
uTube
by
developing

voice recognition. However this needs further refinement as when voice
recognition was tested
with

video
accompanied by
good quality audio
;

approximately 10% of what was said was correct. Discussion of these res
ults
can be viewed at thi
s link

http://www.youtube.com/watch?v=krq1msguNFo
.

It was not possible to locate information that

indicated how iOS or Android will
support

HTML5/web based

subtitles in the future. This was a litt
le
disappointing as these devices seem to
be behind the
rapid uptake of HTML5

among web developers
. Perhaps changes will occur when the HTML5
specification is completed.

Currently there
is a lack of

tools that will create, or help to create, WebVTT
format

files. It is expected that this w
ill

change as the format is very similar to
the fairly common SRT format

and may not require major

changes to
existing
software
.
Over the life of the project it
has been

noted that changes were still
happening and

there wa
s an increase in
available

tools
.
(Such is the rate of
change that
the information in this

document was frequently changed to
include new developments.)

BubbleJS
http://bubbles.childnodes.com/

provides a promi
sing
future for
both

triggering subtitles successfully
and providing a

high functioning video player.
The BubbleJS player can trigger actions that happen outside of the video player
such as opening, closing, animating, effecting colour changes

etc.

on

othe
r
html objects. This is an excellent result for education

in that it provides a

video
player that
can

provide accessible
video and

also

interact with other page
elements to present information related to the video in

engaging and

innovative ways.

Hopefully

the setup of BubbleJS becomes easier.

Working with video on the web has, over the years, become much easier and a
lot of time savings can be found in good processes and work practices.
Hopefully the time saved can be dedicated to the creation of subtitles

and
accessible video for all internet users.



Report p
roduced by Kangan Institute
–

Learning Development June 2012





Acknowledgements

This project was made possible by funding from the Australian Government's National VET
E
-
learning Strategy, through the New Generation Technologies for Learning business
activity.















With the exception of the Commonwealth Coat of Arms, the Department’s logo, any material protected by a trade mark
and where otherwise noted all material presented in this document is provided under a Creative Commons Attribution 3.0
Australia (
http://creativecommons.org/licenses/by/3.0/au/
) licence.



flexiblelearning.net.au